There are now more web-enabled mobile devices on the planet than there are computers. The total number of such devices is expected to hit 1 billion by the year 2013. What does this mean to you? First and foremost, if your site isn't mobile-compatible, you're almost certainly leaving a lot of money on the table.

That said, enabling your site for mobile properly is not the simplest job you will ever have to do. There are a lot of issues to consider if you want to get it right.

Designing for Mobile: Problem #1

Mobile Web Design 268x276 PNG

The biggest single problem with designing a site for portable devices is that there are a huge number of them. What do you design for? How do you approach the problem efficiently?

You've got the iPhone, which is clearly the front-runner right now. But then there's the iPad, Android devices, BlackBerry, and even the Windows tablet. You simply can't code a separate version of your site for each one, there are far too many to do that.

On the other hand, you can't do a one-size-fits-all, as so many people used to do. There's just far too much difference in capabilities between devices. A site that works for the iPhone or Android devices, with their smaller screens, will be horribly frustrating for an iPad or other tablet user.

Responsive Web Design: Query the Client

The best way to approach this problem is with what's called "responsive web design". What is this? Basically, it's a method where you dynamically choose the best "version" of your site based on information that you can get from the device trying to access your site.

You use a combination of media and user agent queries to figure out how your user is browsing, with what sort of device, and what capabilities that device has. Then your site's code can respond with the best possible results based on this information. And what's the best way to do this? With your stylesheets!

Basically, you design and style your site with several screen resolution ranges in mind, for example:

  • 200 pixels wide
  • 200-400 pixels wide
  • 400-600 pixels wide
  • 600 pixels or more

Once you have done this, you can send the appropriate version and stylesheet to the client based on the information that you can gain from user agent and media queries.

Flexible Design and Mobile

The general concept of flexible design is to create your sites not with specific devices in mind, but with general device capabilities. You create a website *system* that allows you to put out a site that will work for any device. Done properly, this will produce a user experience that is acceptable, even for devices you've never heard of -- or which haven't yet been released.

Some general rules of thumb for different size devices: small devices work better if your text is broken up into smaller chunks, and your clickable buttons should be proportionally larger than for other devices.

Once you move up to more medium-sized devices, it's usually reasonable to simply scale down a lot of the content you would use on your normal full-sized sites. Also, bandwidth is frequently still an issue for mobile devices, so it's worthwhile to have scaled-down versions of your graphics to serve to these devices, rather than just scaling the same image using width/height values in CSS or IMG tags.

Finally, for bigger devices like the iPad, you'll want to create something that is as close to fully functional as possible; it will be almost identical to the site you serve out to desktop or laptop computer clients.

More posts filed under category: General Information

Like this post? Subscribe to our RSS feed and get loads more!