How to make your website mobile today

It's 2010 and your users are on smartphones and iPads. Here's how to make sure your website is too

1 2 3 4 5 Page 2
Page 2 of 5

So let's try to bring some order to that chaos, first by being a little picky, and then by using a touch of HTML, CSS, and JavaScript to handle the remaining issues.

Yes, there are a lot of devices, but you don't have to support them all. Do so by eliminating the outliers:

  • Sorry, RIM. Sorry, Microsoft. You had your day in the mobile market (well, RIM did; Microsoft never did quite figure out a solution to Windows + mobile device + usable), but it's over. There may still be plenty of these devices, but research has shown that they aren't used to surf [PDF].
  • Sorry, small screens. Unfortunately, a 240-by-320 surface is just too small for a good browsing experience. The Pixi's 320-by-400 screen is almost twice as large, yet barely made the cut.
  • Sorry, third parties. Every device you should care about ships with its own Web browser. If you have an Android, you have a choice of browsers, including Opera Mini and Mobile Firefox. But you have to draw the line somewhere, and unless you have a fully funded lab, it's unlikely you'll be able to test your site on every permutation of browser and screen size. So stick with the browser that the device maker included.

Anything else you're thinking about dropping? This is where your server logs come in handy. Keep in mind, though, that while you may have few mobile visitors now, it might be solely because they don't (yet!) find your site welcoming.

The nitty-gritty of making your site over
Let's say you have a fairly normal website: It has content, a menu bar, a header, and footer (see Figure 1). You know it's built to standards, so you assume it's going to work just fine without any changes. And then you look at it on an iPhone 3G S (see Figure 2) or a Nexus One (see Figure 3). And you remember you thought that navigation bar was so snazzy when you got it working, but now realize mobile devices don't support hover effects. And you start trying to figure out which would be easier: redesigning the entire site or creating a duplicate mobile version?

Figure 1
Figure 1:

Figure 2
Figure 3

Thankfully, those aren't the only two options. I'll take this site (you can see the live version on your mobile or desktop browser) and show you how to add a little more markup, style, and code. Then we'll be done -- no redesign or duplication needed.

1 2 3 4 5 Page 2
Page 2 of 5