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:
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!