Creating iPhone-ready sites using CSS media query
Using A List Apart’s article on Responsive Web Design (by Ethan Marcotte) as inspiration, this site now uses CSS media queries to determine a visitor’s screen resolution and serve up an appropriate version should the viewer be visiting from an iPhone. If you have an iPhone next to you, give it a try.
I find myself visiting an increasing number of sites through my iPhone, and have noticed I tend to visit a large number of links from Twitter, email, RSS apps and similar, make a mental note of them, and re-read them from my laptop once I’m back in the office. In fact, I’m getting increasingly frustrated when I’m on 3G and forced to download an entire site’s output, from ad farms to images. So, to that end, I’ve optimised this site, sans fat, for quick and easy readability.
The best part? The entire experience is done through a few new meta tags and an iPhone-only stylesheet. No markup was harmed in the making of this (mobile) version.
A few points
- Knowing that mobile users won’t take actions normally reserved for desktop browsing, I removed the contact page (and large contact form) from the mobile version. Should a visitor want to contact me, they can do so using the relevant contact details and a click-to-call mobile number on the footer of each page.
- Through CSS, I was able to increase the size of buttons throughout the mobile version, as well as remove the need for a hover state. We all know fingers are much more cumbersome than a mouse pointer, and the mobile optimisation acts accordingly.
- Using %’s for widths vs pixels allows a fluid setup when a user rotates from portrait to landscape orientation.
Leave a Reply