6 Tips to Create An iPhone Website

Note: This article is very old and is no longer updated.

The iPhone website has gained popularity in recent years. Ordinary websites are receiving more traffic from mobile devices than ever before. Even if you have no immediate plans to create an iPhone website, there are steps you can take to make your current website more iPhone friendly. Below we will explore 6 techniques you can perform to present iPhone website content to these users.

Think small to make your iPhone Website huge

How does your website look on the iPhone? Do you have to zoom into a content area to read content? How will the size and order of your page elements affect an iPhone user’s experience? Can you easily enter text in a search field?

These are some of the usability issues an iPhone website solves. Consider the number of pixels allocated as padding between your navigation options. If you don’t have enough space in between your navigation elements, your site will present difficulties for users trying to navigate using their fingers instead of a mouse. An average persons index finger is roughly 40-70 pixels in width, therefore you should consider leaving extra space between navigation elements or making them larger to allow for easy interaction as we discuss here.

Fortunately, you can make these modifications by using an iPhone specific style sheet (as we discuss here). In this way, it is possible to style your sites content separately for these visitors.
Setting Default Zoom

iphone website specifications

MobileSafari allows you to zoom and rotate page views to more clearly navigate content, but you can easily minimize the need for your users to do so. For example, if your home page loads with extra space on the left and right sides, this will carry over into the default presentation for iPhone visitors. However, you can instruct MobileSafari to zoom into a web pages content by default. This is effectively the start of making an iPhone website.

To accomplish this, we set the viewport width to the width of the device by adding the following declaration to the head of your HTML file:

<meta name = "viewport" content = "width = device-width">

To set the initial scale to 1.0, add this to the head of your HTML file:

<meta name = "viewport" content = "initial-scale = 1.0"> 

To set the initial scale and to turn off user scaling, add this to the head of your HTML file:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no"> 

We utilize the viewport meta tag to improve the presentation of your iPhone website. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the iPhone’s screen.

iPhone Website Pro Tip: Viewport Orientation

The iPhone supports both landscape and portrait views. You can specify CSS based on viewport orientation which is determined using JavaScript and updated in the orient attribute of the body element. We’ve outlined some of the benefits of using iPhone website style sheets in a previous article.

To achieve this, you target the browser width. Here’s the CSS:

 body[orient="portrait"] { property: value; } body[orient="landscape"] { property: value; } 

The following javascript detects and sets the iPhone’s viewport orientation by evaluating the innerWidth property of the window object and setting the orient attribute of the body element at regular intervals:

var updateLayout = function() { if (window.innerWidth != currentWidth) { currentWidth = window.innerWidth;
 var orient = (currentWidth == 320) ? "profile" : "landscape"; document.body.setAttribute("orient", orient
); window.scrollTo(0, 1); } }; iPhone.DomLoad(updateLayout); setInterval(updateLayout, 500); 

Hiding the iPhone toolbar

 

With one line of JavaScript you can hide the big toolbar:

window.scrollTo(0, 1);

Include this line of code to the phone’s orientation detection JavaScript, and the toolbar will reappear when the orientation is changed. Voila, iPhone website. Simply omit this line if you want the toolbar to show. This is discussed in more detail in our article “How to hide the address bar in MobileSafari”.

Optimize Images

 

iPhone websites can be a step backwards in certain ways… If you recall optimizing images for 28.8 kbit/s modems you may want to skip this section. We recommend you consider serving re-optimized assets to these users and avoiding the use of large images or other weighty media on your website. Animated gifs are unsupported at this time and gracefully display the first frame of the animation supported in later versions of IOS.

Biggest iPhone website usability issue? No Flash Support

While it may be coming shortly *sarcasm*, currently you are unable to view flash content on the iPhone. But what if you already have flash creative on your non-iPhone website? We trust you are presenting alternate content to non-flash enabled visitors, as iPhone visitors attempting to view your flash movies will instead see the default plugin not found image. There are several packages freely available which perform this detection or you can use the tools built into the Flash authoring environment.

These are just a few of the techniques site owners can use to make their content more easily accessible by iPhone website visitors. If you found this iPhone website tutorial useful please share with your friends.


iPhone website, iphone websites

You may want to like this now ➡➡

To your continued success in life and business.

Was this post helpful? If so, I would totally appreciate you commenting below and clicking "like" above.

Shaun Mackey
I help people make websites better, faster and more profitable for their online business.
Contact me here.

 

Enter Your Comments Below:

comments

Trackbacks