Ordinary websites are receiving more traffic from mobile devices than ever before. Even if you have no immediate plans to serve a microsite to your iPhone visitors, there are steps you can take to make your current website more iPhone friendly. Below we will explore several techniques you can perform to present optimized content for these users.
Using styles optimized for MobileSafari
How does your website look on the iPhone? How will the size and order of your page elements affect an iPhone user's experience? Do you have to zoom into a content area to read content? Can you easily enter text in a search field?
These are some of the questions iPhone microsite development addresses. 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.
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
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.
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 web content on iPhone. 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 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 specific style sheets in a previous article.
To achieve this, you target the browser with
body[orient="landscape"]
or
body[orient="portrait"]
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. 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
If you recall optimizing images for 28.8 kbit/s modems you may want to skip this section. Its worth considering the average connection speed of an iPhone user over EDGE is considerably slower than typical transfer rates on conventional computers. As of this writing 3g is unavailable on the iPhone, Nonetheless, considering your user's minimum connection speed should be considered part of your standard website development procedure. 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.
No Flash Support
While it may be coming shortly, currently you are unable to view flash content on the iPhone. But what if you already have flash creative on your site? 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 website owners can use to make their content more easily accessible by iPhone visitors. Let us know what you think.
-Shaun Mackey
