Years ago I had a Palm. Back then I used it pretty much just as an organizer. Now I have replaced my mobile with a Palm 700p smartphone (which runs on old [deprecated] Palm software but has a very sharp and bright screen) so as to be able to get online while mobile, without having to drag along a laptop computer.

I've spent the last few days browsing the web, and learning some things — mainly that when viewing them on a handheld, the vast majority of websites out there not only look like (excuse me) crap but don't even work! On many sites, I would scroll all the way down through the page to the bottom, and never find the content. It was all off to the side, where (hello, Blazer designers!) the handheld's web browser will not scroll.

For the sites that worked, it was great. Google News and Yahoo! News are absolute delights on handhelds — tops on usability.

Ironically, very cumbersome were sites devoted to handheld applications downloads. Even Palm's own website was cluttered to the point of being utterly unusable. I can say with full authority now that it's very easy to get lost on a single web page with dozens of links filling the top of a page viewed on a handheld. The "semantic web" this ain't.

Yes, and I am certainly very late to the party on this one. Yes, I've heard the hype about handhelds and read the articles about handhelds. Leave it to some hard first-hand lessons in handheld web browsing to get the message through my (some would say "thick") head: for each website, be sure to create alternate page designs for handhelds! There's just no excuse not to these days.

So how to do it? Some Googling pulled up this great article on A List Apart from more than two years ago. In this how-to, Elika Etemad and Jorunn D. Newth give a brief run-down on some simple stylesheet best practices towards having a very presentable website for site visitors using handhelds.

• Minimize horizontal spacing, and use ems and percentages, not pixels....
• Avoid floats....
• Minimize decorative images....
• Avoid depending upon plug-ins....
• Turn off display of non-essential elements....

But I would go further.

1. Content needs to load first. Yes, include a small logo for those folks who are loading images. Yes, perhaps offer up your main navigation of 4 or 5 links. But that's it. Don't load your mission statement. Don't make visitors crawl down through your sidebar content before getting to your article(s) or blog post(s). It's just too much to plow through. Put the content up top.
2. Minimize the ads or leave them out altogether. Make sure they're clearly marked as ads. And forget display ads.
3. CSS-only layout is essential. Yes, you can display: block; your table cells, but you can't change their order. Only with CSS-only layouts can you get your main content to the top of the page load for all of your various page designs.

Of course, while it's relatively easy to keep design for handhelds in mind for new websites, new Drupal themes and new page templates, it's not so easy for existing sites. After all, when remediation involves not just an added stylesheet but also refactoring the page templates themselves, we're talking a bit of time and effort. (Handheld site visitors who are reading this article at the time of publication will note that this site itself is not very handheld-friendly. We're in the midst of doing a redesign, and plan to have an improved handheld experience here on pingv.com in the coming weeks.)

The additional upside of designing for handhelds is that accessibility is also improved.

The handheld explosion is happening on the web. It's time to design for them, even if you're creating your designs on the Mac 30-inch cinema screen.

• Laura's blog
• 
• 
• 
• 
• 
• 
• 
•