Specifying a Webpage Icon for iPhone Home

We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:

• a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
  • rounded corners
  • drop shadow
  • reflective shine

  This is the image for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  

• an image precomposed, to this image iPhone doesn’t add effects.
  This is the image precomposed for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  

How we can provide this image? There are two ways:

• place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website),
• add a link element to the webpage, as in:

  <link rel="apple-touch-icon" href="/custom_icon.png"/>

  or

  <link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>

  With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.

Hide Safari Components

Add this line if you want that your web app/website don’t show the safari user interface components:

<meta name="apple-mobile-web-app-capable" content="yes" />

Status Bar Appearance

You can change the Status Bar of web app/website using the following line of code:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

There are three different colors:

1default

2black

3black-translucent

NOTE: If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Specifying a Startup Image

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

<link rel="apple-touch-startup-image" href="/startup.png">

Here an example of my custom startup:

The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Standalone Detection

You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.

Note & Conclusion

All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.

Is my opinion that if you develop a strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page” , all these settings can be make your app amazing.

This website uses these options, you can test them adding it to your home screen of iPhone/iPod Touch, actually I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.

Resources

• Safari Dev Center – Safari Web Content Guide

THE HTML

How you can see, this is a typical list with a div container used to apply the script and render the style. I added pillMenu class to give it a default style, but you can replace it with another class like nav or nav-wrap of wordpress.

Selected is the name of the class for the selected menu, this class name can be changed in the options of Mootools class. Change in “current_page_item” if you want to use the script with the list of  pages in wp.

<div id="menu1" class="pillMenu">
	<ul>
		<li class="selected"><a href="#" title="Go to Home Page">Home</a></li>
		<li><a href="#" title="Go to About Page">About</a></li>
		<li><a href="#" title="Go to Archive Page">Archive</a></li>
		<li><a href="#" title="Go to Sitemap Page">Sitemap</a></li>
		<li><a href="#" title="Go to Contact Page">Contact</a></li>
		<li><a href="#" title="Go to Long Text Menu Page">Long Text Menu</a></li>
	</ul>
	<div class="clearfix"></div>
</div>

THE CSS

These are the style rows of code that you have to add in your css file if you want an horizontal movement, I added also clearfix style, but if you have your own you can remove it.

The class .pill is the class of pill that you can customize, actually it is only a transparent block with 1px border, but, if you want, you can replace it with a background or a single line.

If you decide to change the name of the selected class, remember to change it also in the css.

.pillMenu{ position: relative; }
.pillMenu ul{ margin: 0; padding: 0; position: relative; }
.pillMenu ul li{ float: left; list-style: none; margin: 0 5px; position: relative; z-index: 10; }
.pillMenu ul li a{ color: #000; display: block; padding: 5px 10px; text-decoration: none; }
.pillMenu ul li.selected{ background-color: #000; border: 1px solid #000; }
.pillMenu ul li.selected a{ color: #fff; }
.pillMenu .pill{ border: 1px solid #666; }
.pillMenu .clearfix{ clear:both; display:block; height:0; font-size:0; line-height:0 }

This is the version of css for a vertical movement.

.pillMenu_vertical{ position: relative; width: 75px; }
.pillMenu_vertical ul{ margin: 0; padding: 0; position: relative; }
.pillMenu_vertical ul li{ list-style: none; margin: 5px; position: relative; z-index: 10; }
.pillMenu_vertical ul li a{ color: #000; display: block; padding: 5px 10px; text-decoration: none; }
.pillMenu_vertical ul li.selected{ background-color: #000; border: 1px solid #000; }
.pillMenu_vertical ul li.selected a{ color: #fff; }
.pillMenu_vertical .pill{ border: 1px solid #666; }

The MooTools Class

var PillMenu = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		vertical: 0,
		pillClass: 'pill',
		selectedClass: 'selected',
		duration: 'short',
		transition: Fx.Transitions.Linear
	},

	//initialization
	initialize: function(element,options) {
		//set options
		this.setOptions(options);
		//set element
		this.element = document.id(element);
		//set pill element
		this.pill = this.element.getElement('.pill');

		if(!this.pill){
		    //build pill element
		    this.pill = new Element('div',{
		    	'class': this.options.pillClass,
		    	'style': 'position:absolute; z-index:1;'
		    });
		    //inject pill into element
		    this.pill.inject(this.element,'top');
		}
		//make effect
		this.pillFx = new Fx.Morph(this.pill, {'duration': this.options.duration, 'link': 'cancel', 'transition': this.options.transition});

		this.start();
	},

	start: function() {
		//fire event start
		this.fireEvent('start');

        this.element.getElements('li').each(function(el,i){
			//detect selected menu
			if(el.hasClass(this.options.selectedClass)){
				//save selected menu
				this.selected = el;
				//set pill dimensions
				this.pill.setStyles({
				    width: el.getStyle('width'),
				    height: el.getStyle('height'),
				    left: el.getPosition().x - this.element.getPosition().x,
				    top: el.getPosition().y - this.element.getPosition().y
				});

			}						

			//add event to element
			el.addEvent('mouseenter', function(){
				//fire event start
				this.fireEvent('change');
				//set effect for horizontal and vertical style
				if(!this.options.vertical){
					this.pillFx.start({
					    'left': [this.pill.getStyle('left'), el.getPosition().x - this.element.getPosition().x],
					    'width': [this.pill.getStyle('width'), el.getStyle('width')]
					});
				} else {
					this.pillFx.start({
					    'top': [this.pill.getStyle('top'), el.getPosition().y - this.element.getPosition().y],
					    'height': [this.pill.getStyle('height'), el.getStyle('height')]
					});
				}

			}.bind(this));

		}.bind(this));

        //add event to reset all
        this.element.addEvent('mouseleave', function(){
        	//set effect for horizontal and vertical style
        	if(!this.options.vertical){
        		this.pillFx.start({
				    'left': [this.pill.getStyle('left'), this.selected.getPosition().x - this.element.getPosition().x],
				    'width': [this.pill.getStyle('width'), this.selected.getStyle('width')]
				});
			} else {
				this.pillFx.start({
				    'top': [this.pill.getStyle('top'), this.selected.getPosition().y - this.element.getPosition().y],
				    'height': [this.pill.getStyle('height'), this.selected.getStyle('height')]
				});
			}			

		}.bind(this));

	}

});

The following are arguments, options, and events for PillMenu:

Arguments

• element: The element to apply the script
• option: The class options

Options

• vertical: [0/1] makes the movement horizontal or vertical
• pillClass: [pill] name of class to give to pill element
• selectedClass: [selected] name of class of selected menu item
• duration: [short] time of duration of transition
• transition: [Fx.Transitions.Linear] transition to apply

Events

• start: Fire when the script is started
• change: Fire when the mouse go over the menu item

Usage

These are a lot of examples that you can add to your domready to use the script.

window.addEvent('domready',function() {
	//example for default menu
	var myMenu1 = new PillMenu('menu1');

	//example for vertical menu
	var myMenu1 = new PillMenu('menu1', {vertical: 1});

	//example for elastic menu
	var myMenu1 = new PillMenu('menu1', {
		duration: 'long',
		transition: Fx.Transitions.Elastic.easeOut
	});

	//example for event actions
	var myMenu4 = new PillMenu('menu4', {
  		onStart: function() {
			alert('Start');
		},
  		onChange: function() {
			alert('Change');
		}
	})
});

This script is released under the MIT and GPL licenses, feel free to edit and use it everywhere.