Designing for hand-held user agents

[jamesicus]

Newer computer screen conformations and smaller viewing devices are necessitating more flexible/fluid Markup & CSS (style sheet) authoring these days. Of particular interest is the use of cell phones to browse web pages. The Opera Web pages, Opera Mobile Browser, and Small Screen Rendering Technology are excellent references, the latter one being especially valuable for Windows O/S Web authors. The Apple IPhone uses a mini Web Browser by Safari.

Hand-held mobile devices such as the Blackberry (8800, Curve, Pearl), and the Palm Treo 650, employ Web Page Small Screen Rendering which can be emulated in Firefox via the top drop-down menu: Tools> Web Developer> Miscellaneous> Small Screen Rendering (or via Miscellaneous> Small Screen Rendering from the drop-down menu in Chris Pederick's Web Developer add-on). The same facility is available in Opera, another excellent developer tool, via View> Small screen (toggle) from the top drop-down menu.

Following are my own experiences:

While browsing our local shopping mall I frequently stop at the some of the numerous cell phone vendor kiosks and ask salesman to check how a few of my web pages render in various products -- I haven't been turned down so far -- they are often bored and only too willing to demonstrate their wares (besides there may be a sales possibility).

Quick informal surveys of my web page user populations have shown that cell phone usage of my pages is quite spotty. Only three users reported viewing my Italic Handwriting pages in their cell phones and then only out of curiosity. On the other hand, my Roman Coins pages are visited quite often by enthusiasts at coin shows (using cell phones) wishing to attribute or authenticate coins they are contemplating purchasing.

JFP

[Stomme poes]

Hubby just got a phone/supercomputer this summer (Nokia E61i, model is at least a year and a half old though) running the Symbian OS. We were curious what browser it uses: checking our servers it's a version of Safari. Seems to render like Safari.

Friend came over with this portable PlayStation2 thing. We checked our fire dept site on it, which has a menu using a trick of Paul's, with display: inline-block. The browser on that thing acts like FF2, meaning it doesn't support inline-block. I wrote to the company who made the browser (Oregan) but so far no reply. Dunno if their rendering engine is based off some old Gecko or completely made from scratch.

OperaMini wrapped the menu. Such surprises and incompatibilities stump me and make me wonder if this Wild West needs to settle down a bit before I work too hard on mobiles (unless the site were targeted towards them). To hear that some mobiles are specifically built to ignore the handheld.css makes it worse.

Again though what an excellent suggestion re the store! Brilliant.

[jamesicus]

.......... OperaMini wrapped the menu. Such surprises and incompatibilities stump me and make me wonder if this Wild West needs to settle down a bit before I work too hard on mobiles (unless the site were targeted towards them). To hear that some mobiles are specifically built to ignore the handheld.css makes it worse ...........

Yes, in some cases a re-think of page design/layout is required to accommodate hand-held user agents. I have found that if my pages render well in small screen rendering mode (FF and Opera) they do pretty well (well enough) in other HH devices -- I have designed all my pages with this in mind. Here are some design techniques I have adopted with HH user agents in mind:

* Structure pages utilizing header markup - use h1 for the page title and h2-h6 for section headings.
* Keep images small - large ones take too long to load and do not render well.
* Use short Link titles and URLs - long ones will truncate.
* Use proportional, rather than absolute, sizing and dimensions (% and em rather than pixels).
* Use basic font styles - PDAs only use the most common ones (Times new-Roman, Arial, etc.)
* Avoid using Tables for layout - they do not work well.
* Avoid Frames - they do not work on small screens.

JFP

[Stomme poes]

I'd say those points work pretty well re computer browsers as well.

I suppose I'd add to that, Avoid Tricks. I do consider how I did the menu on this site a sort of trick (centered horizontal menu) and OperaMini does show it correctly when it zooms out-- and to tell the truth I'd say even if it's a bit ugly it does make more sense for that menu to wrap rather than forcing a scroll bar. But OM seems pretty good at avoiding those when it can. Tricks using a lot of absolute positining or other goofy things at this point can't be trusted in mobiles.

Oh, I'd also add Javascript to your list-- even devices who can use Javascript often get their batteries drained to nothing really fast if you have a lot of scripts. While we should be doing the JS as an add-on that gracefully degrades anyway, this may be more important than ever to smaller devices running on battery. The smarter users will have JS turned off.

My boss had this Erickson phone where he can't log into our stats at work because it stupidly requires JS just to log in. His (not even a year old) phone doesn't support enough JS (supports some). There should have been a fallback.

[jamesicus]

I'd say those points work pretty well re computer browsers as well.

I suppose I'd add to that, Avoid Tricks. I do consider how I did the menu on this site a sort of trick (centered horizontal menu) and OperaMini does show it correctly when it zooms out-- and to tell the truth I'd say even if it's a bit ugly it does make more sense for that menu to wrap rather than forcing a scroll bar. But OM seems pretty good at avoiding those when it can. Tricks using a lot of absolute positining or other goofy things at this point can't be trusted in mobiles.

Oh, I'd also add Javascript to your list-- even devices who can use Javascript often get their batteries drained to nothing really fast if you have a lot of scripts. While we should be doing the JS as an add-on that gracefully degrades anyway, this may be more important than ever to smaller devices running on battery. The smarter users will have JS turned off.

My boss had this Erickson phone where he can't log into our stats at work because it stupidly requires JS just to log in. His (not even a year old) phone doesn't support enough JS (supports some). There should have been a fallback.

Excellent information! I particularly like your points relating to JS -- I meant to include that and forgot it -- thanks. I avoid scripting except where absolutely necessary. I was surprised by the battery drain caused by JS when my grandson was demonstrating the use of his Palm CENTRO in browsing web pages.

JFP

[jamesicus]

I'd say those points work pretty well re computer browsers as well ..........

I agree. Here is a re-write of my introduction to that section:

"Although some of the following principles are applicable to good Web page design in general, the tabulation includes considerations that are especially important for successful Web page rendering in hand-held devices with their narrow windows and columnar displays:"

JFP

[Stomme poes]

I was surprised by the battery drain caused by JS when my grandson was demonstrating the use of his Palm CENTRO in browsing web pages.

Yeah I've been in constant battle to remove and avoid scripts except when the benefits are worth it and it can degrade gracefully but it's been hard. Luckily the boss is crazy about mobiles and his doesn't even have support so this has been one of my best reasons for using (for instance, a css solution when possibly) other things instead : )
unfortunately I couldn't get AutoTab.js removed from our forms : ( That's a nasty one.

[jamesicus]

Of course this thread relates to generating or changing "regular" Web pages to accommodate Mobile/Small Screen device rendering, or at least optimize their display in such devices, as much as possible.

Designing specifically for Mobile/Small screen rendering requires different approaches and techniques. Two basic references are: Designing for the Mobile Web and W3C XHTML Basic 1.1. And now, of course, the excellent information provided via the "Mobile Web Design - Be Swift About It!" thread currently posted in this Forum.

JFP

[Stomme poes]

James,
what do you think of Mike's take on it, re the Lainy Feingold site? While you can click on the Handheld Page theme, I assume that's actually also the CSS fed to mobiles who accept media="handheld". What I wonder about though is while he's got a set width, what about zoomable browsers like OperaMini or non-zooming browsers on wider-than-normal phone screens? Not sure how that works.