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

By Dori Smith, InfoWorld |  Internet, web development

The first part of the link tag looks like a straightforward style sheet, up until the end. The media attribute is how you can identify not just mobile browsers in general, but which mobile browsers in particular. The only screen keywords are the voodoo that tells mobile browsers that this is just for them. After that, you can get picky about which browsers, but here you're looking for all mobile devices that have a maximum device width of 1,024 pixels -- that is, everything up to and including an iPad. Because of this line, every mobile device will load mobile.css.

Now, you can get a little more particular:

This starts off similar to the earlier broad media query, but then looks at the minimum pixel ratio of the device. If it isn't 2 or higher, you aren't interested. Right now, the only browser fitting that description is the iPhone 4 with its Retina display. This line lets you tweak details a little for Apple's latest toy, which gets to use mobile2.css.

For the next line, it helps to remember that these devices can be in horizontal or vertical orientation when your page loads. You can't just say you want all devices that are at least 480 pixels across; if the device is in landscape orientation, you may get a false positive.

This line brings in the same style sheet, but for different device: one with both a minimum height and minimum width of at least 768 pixels. That's the iPad, and it's going to get the same special style sheet as the iPhone 4.

Style your site. To understand what's going on in mobile.css, you first have to know a little about how the site is put together. See those big gray bars on the right and left of the page in Figure 1? The middle section, #container, is only 80% of the page. And while it looks nice on a big display to have all that room on the sides, it's a waste of space on a mobile device. So start off by making the content fill the entire width:

#container { width: 100%; }

Something you may have noticed while looking at Figure 2 or Figure 3 (or looking at sites with one of your own devices): Bold fonts aren't attractive. They take up too much room and don't display well. Let's stop that for the site's normally bold navigation:

#navbar { font-weight: normal; }

Originally published on InfoWorld |  Click here to read the original story.
Join us:






Answers - Powered by ITworld

Ask a Question