In the past year, I have seen more and more mobile visitors to some of the websites I maintain, and the lion's share of those mobile visitors are using Safari on the iPhone or iPod Touch. A few of the sites receive more than 5% of their visits from such devices. For those sites, I thought it would be fitting to give them a little better mobile treatment, optimizing the layout for the iPhone.
The first thing you have to consider when 'mobilizing' your site is the fact that, physically, the screen is tiny. There is no way someone can interact with a website (especially an information-rich website) in the same way on an iPhone as they can on their desktop. Certain functionality can certainly be hidden from mobile users, but the flipside of this is that there are some mobile users who, come hell or high water, want to do everything on their iPhone. The key is to give the user the same basic functionality, but reformatted for a tiny mobile touchscreen.
The iPhone does an excellent job of taking almost any web page and reformatting it for the small screen, allowing users to zoom in and out on certain sections of the page as they see fit. But what if you could make the main parts of your site (like articles, news items, etc.) legible, without the user even having to zoom in or double-tap?
I'll be giving solutions for a few basic problems here:
- The iPhone Display's Width
Since the iPhone display is only 320 physical pixels wide, Apple chose to shrink pages down to fit the screen; they chose to take, by default, a 980-pixel-wide chunk of your web page and resize it to fit on the 320-pixel-wide screen. Not everyone's website is optimized for a 980-pixel-wide display, though. Your site might be a little wider than that, or (more likely), a little smaller. Every pixel is precious when you have so few to work with, so it would be a good idea to tell the iPhone how wide your site's content actually is. - iPhone Text Resizing
The iPhone tries to help users read the text on a web page by increasing the text size slightly. While this is a nice feature, it can sometimes break designs using graphic backgrounds or fixed-height sections. To work around this problem, you can tell Safari to leave a div's text size alone. - Resizing and Rearranging Sections of Your Page
For the optimal mobile experience, moving your content around and changing the size of link areas (for easier clickability) are important things to consider. You can do both of these things, as well as tackle the two other problems listed above, by using a custom iPhone stylesheet.
Creating the Stylesheet
For simplicity's sake, create a new stylesheet called iphone.css, and save it on your site along with your other CSS files. To reference the file from your web page, add the following tag in your page's <head> area:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
This will make sure that only mobile browsers will see this stylesheet. (I don't know of any computers made in the past 20 years with screen widths less than 480 pixels!).
Styling for the iPhone
Now open up your iphone.css file, and add the following property, inside of div's where you'd like to keep the text size exactly the same as on the desktop version of your website:
-webkit-text-size-adjust: none;
Alternatively, you can change 'none' to a value such as 150%, if you'd like to set specifically how much you want the font size to increase. This can be helpful for making certain areas of your site more legible to users, without having to zoom in.
In this style sheet, you can also change other styles for your site, maybe even setting some of them to "display: none;" in order to help clear up some of the clutter on your site when people view it on the iPhone. If you have a sidebar or two, you might want to have them clear the content area, allowing the content section to fill up the width of the iPhone's skinny screen.
Defining the Viewport
Now that you have your web page's elements styled specifically for the iPhone, you can tell the iPhone exactly how wide the content area of your page should be. Let's say your page's content is 800 pixels wide; Add the following meta tag in the document's <head> section:
<meta name="viewport" content="width=800" />
Now, when someone visits your site on an iPhone (or any other mobile device smart enough to respect your viewport setting), the phone will stretch (or squish) your content to fit exactly the width of the screen. Thus, your site's mobile readers will be much happier viewing your site on the go:
Here are a few more awesome resources for iPhone-specific website formatting:
- Put Your Content in My Pocket [A List Apart]
- Optimize for the iPhone [css discussion]
- Design for the iPhone [evolt]
So, what do you think about iPhone design? I know it's quite easy to go overboard when considering mobile site design, especially with regard to cutting functionality. I would hope that you can reach a happy medium when determining what features mobile users would like to remain on your site!
Comments
is exactly what I needed! Thanks alot
I posted this page mostly as a reference for myself, but I'm glad you found it helpful ;-)
There are a lot of times when I just need to remember the CSS for the webkit text size adjust rule, and searching for it on Google isn't always as easy for me as going to this bookmarked page.
I created seperate folder for iphone design. and all pages under that folder works/looks great on iphone.
However, i dont know how to direct visitors to that folder.
I saw some websites doing that:
When you visit the website, it goes to another folder for the iphone content.
How can i do this?
Example: http://www.sporx.com
or http://www.ccn.com
thanks.
@ Anonymous: If you can edit your .htaccess file, this is quite simple: just paste something like the following into your .htaccess:
#redirect mobile browsers
#for iPhone
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
#for BlackBerry
RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
#for Palm
RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
#nobody cares about Windows Mobile ;-)
Found on: http://dev-tips.com/featured/redirect-iphone-blackberry-palm-requests-with-htaccess
Great info on iPhone dev. Sure will come handy when we start building those web sites for iPhone interface to our customers at one day in work projects.
I tried implementing this code into my .htaccess file but I got an error when I tested on my iphone:
Safari cannot open page because too many redirects occurred.
How do I fix this? Thanks!
Great post. Some good example websites of css-switching for iPhone:-
bbc.co.uk
visualaccessni.co.uk
I've been trauling through websites who just talk nonsence about this, but really appreciate your post, easy to understand and not to hard to implement, thanks so much
Huge thanks for this amazing article. I have few websites and I have found out that there are a lot of users coming through iPhone to my website too. I have an iPhone too so I actually can see what is comfortable in my website and what is not. The most uncomfortable thing for iPhone browsing is scrolling down. But you can't just shorten the content of your websites so it is better to create another version of your website specially for iPhones and other phones to my mind. I mean yourwebsite.com/iphone. I think I will do it in this way. Thanks for amazing article and useful information one more time. I will be waiting for other great ones from you.
Sincerely,
Linda Tollson from iphone application development