How To Optimize Your Site For The iPhone
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?
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
While having a mobile site may be the hot new thing to have, I don’t think it’s for everyone. Usually the mobile site’s purpose is to provide quick, pertinent information and functionality for those who need it on the go. The reader doesn’t necessarily have the time to sit and peruse a site and all of the stuff on it. Plus loading times can be much longer on the iPhone (darned AT&T). That said, I think that you can include all of the important information without sacrificing content, but it greatly depends on the goals of having the mobile site.
So that said, I use a different mindset when designing for mobile. Use buttons vs. hyperlinks (fat finger friendly). Don’t bother with hover states (a big “duh” to me, but some clients don’t think about it). Try to use percentage widths over pixel widths when possible. Don’t use too many images, use CSS for buttons. Use sprites for more optimal loading. Use a 1-column layout if possible. Know your device audience – iPhone/Android vs. Blackberry vs. Windows Mobile. And always have a link to the desktop version for those who want to see it
I agree, which is why I decided not to do a full mobile version of my site, instead I just focused on fixing a few of the small quirks and making s ure it loaded correctly in it
I really need to use this post once i get to the point of making my website for the iphone. thanks for the post!
Great article and some helpful details to discuss with our team as we begin redesign project with a focus on mobile optimization. The latest research says by 2013 mobile browsing will outpace desktop browsing meaning this is something every business, brand, e-comm, content provider and blogger should be thinking about.
Question:
1) Do you know if these iPhone tags also work on Android devices or are they propitiatory to Apple devices. It would be nice to see some standardized tags that fired when detecting a mobile browser.
Enjoy your posts and thought it was time I left a comment.
@chrisbrashear
Thanks Chris for finally leaving a comment! LOL
I’m not sure if these work on the Andriod, which is why I haven’t mentioned it in the post. I don’t have one to test it on, although I guess it wouldn’t be much work to google it (I just have a hatred of all non-iPhone mobile users
)
I did a few searches but think there is value in asking someone who actually works day in day out with it. I have a growing theory that as more content is produced and Google continues to index EVERYTHING on the web eventually you will find articles/websites/blog posts that both support and disprove every question. Since we are including more keywords in our queries we often are unwittingly steering the results to support our preconceived desired answers (subliminally… kinda like your contempt for those who have seen the light e.g., Android users
@ChrisBrashear
The viewport tags work across most mobile devices… you can find device-specific meta tags in the developers’ sites for the particular device.
iPhone’s is here:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
To me, the best way is to make separate mobile version.
Layout should be one column built on percents, not pixels. The initial design should be dropped to the core features/functionality.
Two most important things: navigation and text. Navigation at the top, fluid. Text easy readable.
Look at Gmail, Flickr, Facebook – they all have done great job with their mobile versions.
But first of all, check out WebDesignerDepot and A List Apart on your iPhone – those two are without a doubt the greatest mobile versions I’ve ever seen. They should be examples of how to make a site’s mobile versions.
Hi Amber, I have a Motorola Droid and just wanted to let you know how your site looks on my inferior device
On first load (held vertically), the site looks fine – top left is where it should be, except that it is at the same zoom as your pre-optimization screenshot.
Other problems:
- I can’t zoom in or out on any of your pages. This wouldn’t be a big deal except that I can’t see a whole column of text at once because of the default zoom.
- If I turn the phone to landscape mode (or first load the page that way) there is a graphical glitch that sets your left margin to 0, and it stays that way even when I turn it back to portrait mode.
- The heights of most of your pages are about twice normal, i.e. I can scroll down below the footer quite a ways.
I’m not sure what the problem is, as both the Droid and the iPhone use the WebKit engine for their browsers. The Droid is also a 480-width screen. They must be different WK versions. I dunno.
Just my two cents! I also wanted to say thanks for all the awesome blog posts – I found you through Freelance Folder a couple months ago – you’ve helped me over the hurdles to starting my own freelance operation!
For an iPhone-friendly site, how about the WordPress for iPhone plugin?
http://iphone.wordpress.org/2009/06/05/os-3-0-beta-available-for-testing/
I suppose that the plugin might not display properly depending on how the structure of the site has been altered, but it might be a quick-and-dirty way to get it to display well on the iPhone. I don’t know what this will or won’t mean for other mobile platforms, though…
Okay, wrong link (sorry)…
http://wordpress.org/extend/plugins/wptouch/
I’ve tried different WordPress iPhone plugins, but because my site isn’t just a blog, none of them work really well.
“The iPhone was built to show the full web”
So you don´t consider Flash a part of the “full web”?
I consider Flash to be on the same nuisance level as IE6. It never runs correctly on my top of the line iMac (which Photoshop can’t even crash) and I look forward to the day when we have better technologies to replace it – and we do now. It’s been well over a year since I’ve had to use flash. Everything is in jQuery and I’ve never seen an instance where something “had” to be flash. It’s not just more of a choice, like choosing between a custom CMS and WordPress. Even most of the flash sites out there have the exact same site in a mobile or static version, so video is not an issue.
Exactly what I was looking for. I had read about the iPhone specific CSS file before but not the Viewport code for the header. Thank you. This saved me a lot of time.