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
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. Its worth considering the average connection speed of an iPhone user over EDGE/3G is considerably slower than typical transfer rates on conventional computers. As of this writing 4g is unavailable on the iPhone, Nonetheless, considering your user’s minimum connection speed should be considered part of your standard iPhone 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 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
thank you for your interesting article. I got asked a few days ago, if it was worth bothering to optimize one’s site for the mobile phones. my answer though not directly was leaning toward no since the mobile phones only represent a tiny fraction of web surfing. plus the fact that most mobile users do it only when they’re on the run but not as their main web surfing tool. I don’t have hard data on that but I would think, if I were a mobile user, and someone gave me the link to an interesting site, I would bookmark it and wait until I’m near a computer to take a close look at it. but since I’m not a mobile user, my position would be strictly speculative. I was also thinking that it would be a monumental task to make your website browsable on mobile phones because I was wondering how ‘one site would fit all’ but your article sheds some light on that issue. thank you very much. I’m sure this will cause me to reconsider my position on the issue.
My feeling is that alot more people will be finding us with QR Codes in the future. They will appear on all of our printed literature and even on our website.
A smart phone will read the QR Code and will take the user to the website. What is it that these typically, younger on-the-go users will want to know.
How about what you do, Home Page, Contact info, Contact Page, Directions, Direction Page.
These are the pages that you will want to optimize for quick loading and less scrolling.
So do you have to optimize your whole web site, I won’t at this time, but I will optimize those 3 pages!
I’m glad it was useful for you.
Nice advice. You might also be interested in “Optimizing for Mobile Devices – What Should You Look at?” – http://tumblr.com/xkz12f5dwk
This information was very useful!!! Thank you so much!!!!
Glad it helped.
hi, new to the site, thanks.
test successful
Ya..Its really helpful
Looking for the answer to: Can you easily enter text in a search field?
aowsome tips really appreciatable.
Thanks Shaun Mackey to share this post.
this was really helpful. Thanks for writing and explaining in a nice way… however, i am wondering if you can help? we are attempting to get a zoom on the android… what defaults would i use if i wanted to allow the zoom? we have 3 people working on this thing and still can’t get it to zoom, even after removal of the viewport tag! Thanks!
I tried lot and finally it helped me. Thank you for your tips.