2. Componentize your Web pages
Once you've detected the mobile device accessing your Web pages, you want those pages to present themselves appropriately. To do that, you need to first architect your pages as components, using
DIVs. You simply can't show all of a Web page designed for 1,024-by-768 screen size on a mobile device designed to run at 320 by 480 pixels -- at least not in a usable way.
Therefore, you need to put elements into named
DIVs so that you can later manipulate which ones display on which devices and how they show up. This is the heart of creating an autoadjusting website.
Tip: Avoid using absolute page widths, table widths, and the like. Instead, use percentages where possible, so you don't create an element larger than the mobile devices can display at 1:1 ratio. (They'll scale down these larger elements, shrinking your page along with them.) The exception is for embedded objects such as images. You want these to scale down, which most mobile browsers will do -- if you set an absolute width or height for them.
3. Work through your layout scenarios and program them via AJAX and CSS
Here's where design skills come in: You need to figure out how you want your pages to look in the common browser windows. There are really just three sizes to worry about:
- 320- or 480-pixel width for smartphones -- the measurement depends on whether you want to optimize for vertical or horizontal viewing; I recommend the vertical-optimized width of 320 for these devices
- 768 or 1,024 pixels for tablets -- I'd optimize for the horizontal width of 1,024
- Whatever width you prefer for desktop browsers -- that may be 1,024 pixels as well if you're designing your site to work with 17-inch monitors that used to be very common
Don't worry about the small variations among smartphone and tablet screen sizes. These three size classes will work across the board. If you want to optimize for widescreen tablets, such as the Motorola Mobility Xoom, then add 1,280 to the mix of sizes.
Now decide what you want to display in each of the three (or four) layout scenarios. In some cases, you'll simply decide not to show certain components on a page, to keep the site from getting too complex for a smartphone. Instead, some of those removed components could be made available as links to new pages, or you may decide they won't be visible to mobile users. In other instances, you'll move components, such as by vertically stacking them in one column for a smartphone but retaining the more traditional, horizontally oriented columns approach for tablets and desktops.