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?
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.
The viewport. You start off with the viewport --a concept invented by the W3C, but one that garnered little attention until the iPhone came along. In the chart on the first page in this article, you'll notice that before the iPad and iPhone 4, Apple's devices were all 320 pixels wide. However, on those devices, Mobile Safari thought that it had a width of 960 pixels. That meant that internally, your site was compressed to a third the width, and then put out on the screen. Want to change that equation? That's the viewport.
That line goes into the head section of your HTML and tells mobile browsers that you may think your width is 960, but I think you should be satisfied with 320 pixels across -- or whatever the device-width happens to be.
At least that's the way Apple described how it should work; in practice, I've had better luck giving the viewport a fixed width:
This is one of those gray areas where there's no one right answer that fits all sites on all devices; you need to play with it to find what width works best for your site.
Media queries. Next up is a little bit of custom CSS geared toward the mobile crowd.