Mobile web: a few things to know

Internet on a pocket device has very little in common with the fuller « desktop » experience. On the other hand, it also has a lot in common…

Setting the stage

I’ve just received a Nokia E65 which comes with a Webkit browser, to which I quickly added Opera Mobile. (And Gmail, and Google maps which is almost better than its desktop counterpart). The browsers, usually paid very little attention to on the desktop are leaders in terms of mobile browser market share. Minority browsers lead the handheld world.

How can you surf without a mouse?

The phone has a tall million-color display, numeric keyboard and arrow keys but no azerty keyboard or pointing device. Yet, one navigates using a mouse on the webkit-based browser, while Opera tabs from link to link using the arrow keys (much like Lynx). Same hardware, different navigation system. Avoid mouse-only interaction at all costs.

Skip links

Whatever the browser I use, I love to find skip links. When I can find them… All skip links that only display when moused over or tabbed to remain completely inaccessible. That is, unless the CSS is ignored. Lesson learned: never hide skip links.

Widgets

« Print » links and text resize widgets: don’t use them. They definitely duplicate browser functionality, or in this case serve absolutely no purpose because, hey, ever tried printing from a cellphone? (To be honest, this phone has printing capability, which I find amazing, but I have no printer anyway). Never bother with print links or text-resize widgets ever again.

Typing URLs

Typing long URLs is a major pain, especially the « Gateway error » unhelpful message you get if you type an address that doesn’t resolve. Keep URLs short and focus on navigation. Bookmarks are a great idea after all… Both browsers prefill the address input field with www, so the subdomain « m. » is in fact longer to type. Content negociation is your friend here, though it reeks of browser sniffing, and so on. Provide a clear navigation and clean URLs.

Technologies

Javascript and CSS are available on some mobile browsers. Not fully implemented though, so be sure to test for what you need before jumping into the action. Some dropdown menus drop offscreen, some buttons ring empty, and text-styled-as-link is completely impossible to reach and use. Use object detection to avoid hanging scripts.

Conclusion

Don’t even think about trying to test the hundreds of phone/browser combinations out there. Trust web standards, follow accessibility guidelines and cut page weight as much as you can.