Go out for a chai latte with your local technology soothsayer (or just study your Google Analytics reports) and it’s pretty clear that the mobile web is the future.
But let’s not call it the mobile web, let’s call it the smaller web. And by smaller, I mean a web with less available screen real estate than the desktop.
While the iPhone may have a fully-capable web browser, it still has a relatively small screen. Serving the desktop version of the your website is hardly the best way to deliver your content to iPhone owners.
And don’t forget that the iPhone people are the lucky ones. The latest devices — iPhones, iPads, Android phones — have relatively large screens by mobile standards, but these devices are in the hands of a very slim percentage of worldwide mobile users. There are some 3 billion users out there with older phones, or devices with crappy browsers and very small screens.
The point here is that you need something far better than the desktop-optimized version of your website to offer to mobile visitors.
There are three popular ways to approach mobile sites:
- Write good code, but do nothing special for mobile. This works fine if your audience is made up of iPhone, iPad and Android users with nice, high-speed 3G connections. That’s about 1 percent of the mobile market, but some sites with an abnormally large number of iPhone users (like an iPhone news site) can get away with it.
- Detect the device in use and serve a separate mobile site. Something like m.flickr.com. While this approach works, it means maintaining a second website, plus constantly updating your device detection scripts as new gadgets come on the scene.
- Build an adaptive site using CSS 3 media queries. Thanks to CSS 3 and the new media query syntax, you can build a site that automatically adapts its layout to fit the screen size of your visitors.
The later approach has received the most attention lately, with many designers moving to fluid grids that reflow content, resize images and nicely smoosh themselves down to fit any screen. Check out Simon Collison’s personal site, or designer Jon Hick’s website for examples of media queries in action.
Be sure to resize your browser window so you can see the content reflow as the browser width shrinks. That’s the gift of media queries — by precisely labeling your CSS, the presentation can be altered dynamically depending on the device’s screen width and height. Your content never changes, and neither does your CSS. The page simply adapts.
However, as nice as media queries are, before we dive into the syntax and how it can help, it’s important to realize that this approach is not going to magically solve all your mobile design problems.