5 simple rules for creating mobile-savvy websites

It's not hard to give smartphone and tablet users compelling access to your sites -- so get started

Page 3 of 4

Next, create a CSS for each scenario, hiding DIVs you decide not to display, substituting alternative versions where needed, and applying the appropriate layout parameters for the device class in question. Use JavaScript to detect the mobile device, then load the appropriate CSS for that device. Alternatively, use Apache scripts to detect the mobile device and redirect to the appropriate page.

This approach means you have separate pages for each class of device to manage, serve, and report on, but you avoid the JavaScript overhead and the complexity of the all-in-one page design. You might also have JavaScripts and/or PHP code that do layout modifications that CSSes don't handle.

Your Web pages of course should be based on templates that have these DIVs and the accompanying CSS and JavaScript links, so you're not hand-coding each page for the various options. Sure, custom pages will need custom coding, but most pages should be based on templates -- especially if you use a content management system to generate your pages.

Tip: Once you've done the CSS work for each class of device, you may want to expand the font-family list to accommodate the fonts available on popular devices. For example, your CSS might add Lucida Grande and Palatino to the font-family list to take advantage of those iOS system fonts (you might do the same for your Mac desktop users as well). Likewise, you may add BBAlpha Sans and BBAlpha Serif for BlackBerrys to use their native system fonts. The beauty of the CSS font-family list is that the browsers will ignore fonts they don't have, so you can list all the possible fonts in the one CSS.

Tip: For those pages you can't make mobile-savvy but need to leave accessible from your Web pages, you have a couple of options. Either make them unavailable, with a intermediate notice page explaining they are not mobile compatible, or send users to the desktop page instead, perhaps with an interstitial notice page so that they know the move is not an error.

4. Eliminate proprietary technologies where possible
A well-designed website should already stick to HTML4, the core HTML5 capabilties widely deployed, JavaScript, and CSS, so it works on the variety of desktop browsers in popular use. But in reality, many websites were originally designed in the days when Internet Explorer was the de facto standard, so they use ActiveX controls and other items that work only in IE. You should ditch these legacy dependencies; they are simply not supported in mobile devices, nor do they work in desktop Firefox, Safari, or Chrome.

| 1 2 3 4 Page 3
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies