Posts Tagged ‘iphone’

iPhone 5 wireframe template 2.0

Posted on: 7 Comments

**Update**

Check out the new iPhone 6 sketch templates!!

While using my own iPhone wireframe template, I was getting frustrated that I wasn’t able to draw 3 or 4 equal boxes across the screen without having to count out the grid lines. So I thought it was time to update this and make it better. So whats new you ask?

 

  • New and improved grid
  • New space grey color
  • 2 pages. First page includes the top bar (signal strength, time and battery life)
  • Second page has the top bar omitted

Download

Staying in full screen mode on the iPhone from page to page

Posted on: 32 Comments

It is incredibly easy to make any website capable of being saved as a full screen web app on the iPhone, iPad or iPod Touch. You may have come across a tutorial teaching you how to add a couple of meta tags in the head of your html and now you can save your website to your phone’s desktop and have it launch in full screen mode without the browser chrome.

The Problem

At this point, you are probably really excited to have added about 100 pixels of screen real-estate to your website. As you start to play around, you click on a link and what’s this? It switches from your full screen mode to Safari. You hurry and switch back to the full screen app and try it again. Once more, it opens the new page in Safari.

This is one thing that I had a hard time finding a solution to on the internet. How to keep your experience of the web app in the full screen mode without it trying to open every link in Safari.

Good news, I found some javascript that will fix this problem. Include this script below on every page of your site and it basically will grab all the anchor tags on the page and it handles the window location, which will load the new page and keep you in the full screen mode.

The Code

function fullscreen() {
	$('a').click(function() {
		if(!$(this).hasClass('noeffect')) {
			window.location = $(this).attr('href');
			return false;
		}
	});
}

fullscreen();

Notes

One thing to note about this method, is if you have a link that points to a file that you want the user to download, like a PDF, you should add the class ‘noeffect’ to the anchor tag to avoid problems.

If you visit the demo link on an iPhone or iPad and save it your homescreen. Launch it and click on the navigation links. You will see that it keeps you in the fullscreen mode.

Demo