The iPhone was built to show the full web and I love it just for that. A lot of sites though, have “mobile” versions of their site to make it easier to navigate and quicker to load. The problem with these mobile optimized sites is that in the process of becoming easier to use, they omit a lot of important information.
For that reason alone, I tend to turn off the mobile view when visiting one of these sites and attempt to navigate the full site. While this is possible, it’s still a bit of pain, especially if you’re on a site like Amazon, Walmart or a full blog. There’s just so much “stuff” on each page, it’s hard to really read and look at everything within the iPhone. So what’s the solution?
If you haven’t been living under a rock (or aren’t just plain mean) you’ve probably noticed that I redesigned the site (again). The previous site was OK, but it was becoming a cluttered and took FOREVER to load in a normal browser, so mobile viewing as out of the question. For this new redesign I had several goals:
- Communicate what I do more effectively, so I stop getting design requests
- Make the site about 5x faster to load
- Make it fast to load, and easy to read and navigate on the iPhone
- Declutter while still conveying the same information.
The fact that I had the iPhone in mind while designing, led to many decisions on what or what not to do. The result led to an optimized site for the iPhone as well. How can you accomplish this?
Start with the iPhone in mind
Unless you’re designing an extremely complicated eCommerce site like Amazon, you shouldn’t need a completely separate mobile version of your site. The iPhone was made for full site viewing, so don’t handicap your visitor with a parsed down site. Instead, keep the iPhone in mind while designing and aim for a quick loading site with great typography (so it’s easy to read on smaller screens), contrast and a good hiearachy.
That being said, most sites don’t look or act perfectly on the iPhone without a few tweaks.
Set up the first loading experience
Depending on the size of your site, when a user visits it on the iPhone it can end up looking very very tiny and zoomed out, or zoomed in close to one element (the most likely). The picture to the left is how my site loaded in the iPhone without the user manually zooming at all.
We certainly don’t want visitors to only see a small portfolio of the site when they first come to it, instead we want them to see the whole layout at once, as if they were in a browser, right?
Luckily Apple has come out with some great meta tags for use in controlling the iPhone. To control the zoom of a site you’ll need to place this between your head tags:
<meta name="viewport" content="width=device-width; initial-scale=0.3; maximum-scale=1.0;"/>
The initial-scale portion of this tag controls how the site loads in the iPhone browser. For mine, I’ve got it set to 33% of the actual site, and this allows it to load the whole site. You may need to adjust this to fit your container (Mine’s 950px).
iPhone Only CSS
Other than scale, my site was almost perfect in the iPhone, except for the hero text on my homepage.
For some reason, it didn’t scale well and ended up overflowing into the rest of the homepage content which made it both ugly and impossible to read (see right).
In order to fix this, we need to change the CSS without affecting the real site’s CSS. I’ve heard that you can do this with PHP, but it’s really unnecessary with the new CSS3 media tags. We can use the tag max-device width to target only iPhones.
Max-device-width means this will ONLY affect devices with a resolution of 480 and below (the iPhone). With this you can now edit your site in any way possible to make it better for the iPhone. Keep in mind though, that even if you display:none a bunch of elements to make it easier to read or navigate, those elements will still taking up resources while loading. Here’s the new CSS tag:
<link media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />
The result:

Your iPhone Tips
What are some of your iPhone optimization tips?