TIPS and TRICKS - Web Page Design
Changing the Design of a Page for Wireless Devices with the Handheld Media Type
Design Techniques to Turn Any Page Into a Wireless Friendly Page
By Jennifer Kyrnin
If you haven't already started thinking about how your Web pages look on cell phones and other small devices, now, with the advent and popularity of the iPhone, Treo, and Blackberry, you may want to reconsider. It would be great if we didn't have to do anything to our Web pages to have them viable on cell phones, but until some science fiction device comes true allowing us to view 1024x768 sized images on 320x160 screens, we're going to need to cope. (And while you're at it, scifi guys, where is my flying car???)
One for viewing the page on a computer screen, one for printing the page, and one for viewing on small form-factor devices or "handhelds". You reference them in the
of your document like this:
You need to use the link method to attach your style sheets, as wireless devices don't have to download those style sheets they don't need (in other words, the screen and print ones). Plus, many built-in browsers on cell phones don't support the @media and @import methods of loading style sheets.
The user-agent knows what type of media it can display, and will download and use the style sheet for that appropriate media type. For example, computer screens use "screen", print uses "print", and wireless handheld devices use "handheld".
Note: some wireless devices refuse to use the "handheld" media type, and instead display Web pages using the "screen" media type. Others ignore both style media types, so you might want to include a very basic style sheet at the top for "all" media types. And finally, some cell phones strip out all style information completely, leaving a page that is very simple.
The browser wars continue, and the casualties are the Web designers (and the customers). My recommendation? Do what you can, and use the handheld media type to style for wireless devices. If you're feeling really ambitious, write to the manufacturers with cell phones that don't comply and complain.
What Your Wireless or Handheld CSS Should Include and Remove
When you're building CSS for handheld devices, the first thing you should do is remove all elements of the page that wireless devices can't use or don't support well. Do this by setting the display: none; style on those elements. For example, you might want to hide the larger ads and leave in only print ads. If you put a class of "scr_ad" on every large ad you can hide them from cell phones in your handheld CSS with this style property:
.scr_ad { display: none; }
These are the things you should consider omitting from the handheld version of your pages:
- images that are not legible below 160x320 resolution
- advertising - especially graphical and flash-based
- JavaScript - most phones don't handle JavaScript well, so it's a good idea to not display those sections of your site
- Large logos and navigation found at the top of the page
You should also include things on your handheld page (by setting the display: none; in your screen CSS document), such as:
- Smaller versions of your images
- Text advertising - this works great on a cell phone
- Text navigation links near the top of your page to jump to other sections of the page.
Wireless Web Design Tips
- Build your HTML using CSS style sheets so that the primary content comes first. Logos and navigation can be very slow to download on a phone.
- Avoid frames, pop-ups, and Flash, or hide these elements where possible as described above.
- Put alternative text on all images.
- Assume that your fonts won't be used.
- Don't rely on color for features (like "required" fields in forms) as some cell phones are still black and white.
- Use access keys to make your links more usable without a mouse.
Test Your Designs
Be sure to test your designs to make sure that they look okay and what you're expecting to disappear and remain do so. It's easy to test your handheld media type CSS in your regular Web browser. But to get the full effect, you might want to test using the Opera small screen viewer.
Be sure to:
- Test with JavaScript disabled
- Test with images turned off
- Test with no mouse support
As Always, Be Willing to Be Flexible
If you were designing Web pages 5 to 10 years ago, you remember the issues we had with the "browser wars." Well, in many ways, designing for the wireless market has all the same challenges, multiplied by 100. There are so many different carriers with different browsers and different options, and it's impossible to test all the combinations.
Your best bet is to create a CSS file that works as best you can, test it as extensively as you can, and then not worry about it. By taking the step of creating a handheld CSS file, you're helping out your wireless customers and that will ultimately help your sites.
