designing for mobile

[richardf]

Is there a section here for designing for mobiles and for handhelds.

I wanted to create a page that is built in HTML and CSS, but make it available for handheld devices. I think I pretty much get the hang of designing for handhelds except that there is a 500 pixel wide table on one of the pages, and I was wondering what the best way to deal with this was.

Also I wanted to ask, what is the best resolution to build for for pdas and mobiles.

Thanks

[Dan Schulz]

You may want to read this thread before doing anything else:
http://www.sitepoint.com/forums/showthread.php?t=431774

Basically, mobile technology is in a state of transition. Older handheld units cannot (and I mean this literally) understand HTML, much less CSS, and depend on a wireless content specification called WML (Wireless Markup Language), which is served over the Wireless Application Protocol (WAP). Newer devices can handle HTML fine, but the CSS support varies wildly.

As far as actual real estate goes, you're pretty much looking at anything (the following are in pixels) from 128x128 to 240x320.

WML and the WAP are being abandoned by the Open Mobile Alliance, which is working in conjunction with the W3C Device Independence Working Group to promote access to a "unified Web from any device in any context by anyone."

I'm not going to go into WAP and WML, but I am going to touch up on HTML and CSS a bit, since it will eventually be supported by just about everything, and it will also (in the meantime) help improve your existing HTML/CSS strategies for the "traditional browser" audience.

Write clean, semantic, and valid HTML. A proper document structure is going to be essential. If something is a header, mark it up as a header. If it is a paragraph, mark it up as a paragraph. If it's a list, use a list (if it's a list of links, then use an unordered list of links - like you would for a navigation menu). Use the HTML code that was designed for the job. Also, keep your HTML code as small as possible.

<div class="header">
    <div id="header1">
        <p>Level One Header</p>
    </div>
</div>

is just down-right atrocious. Not only is it not semantic, but your mobile users will be paying money to download that.

<div class="header">
    <div id="header1">
        <h1>Level One Header</h1>
    </div>
</div>

Ok, now we're getting somewhere. But we still have a ways to go. We don't need that second DIV in there (and arguably the first).

<h1>Level One Header</h1>

This (above) is the ideal solution. However, what if you want a tag line to be associated with the header?

<div id="header">
    <h1>Level One Header</h1>
    <p>Tag Line - Our site is the leader in...</p>
</div>

would be appropriate. Not only is it semantic (and valid) markup, but it's less bytes that has to be transferred (and processed) from the server (and to the mobile browser). Your mobile users will thank you (since they won't have to pay as much).

Another thing to do is to avoid using actual HTML images as much as possible. If you do, try to keep them small. You can use CSS (and the IMG element as an anchor) to replace the default HTML image with a CSS background as necessary for regular and handheld devices.

Where would the CSS go? In its own stylesheet, of course (remove the space and forward slash from the end of the tag if using HTML 4 - you only need them if using XHTML).

<link rel="stylesheet" type="text/css" href="/styles/handheld.css" media="handheld" />

Here's a list of mobile browser (and their vendors) for you. Their sites change regularly, so I won't list the exact pages to get the emulators (if they even offer them). I'll leave that up to you:
Opera (Opera Software) - www.opera.com
NetFront (Access Systems) - www.access-company.com/
Nokia (Nokia) - http://forum.nokia.com
Openwave Mobile Browser (Openwave) - www.openwave.com
Pocket Internet Explorer (Microsoft) - www.microsoft.com
Picsel (Picsel Technologies) - www.picsel.com
iPhone Tester - www.iphonetester.com

Here's a list of mobile device manufacturers as well:
Forum Nokia - http://forum.nokia.com (wow, haven't we seen this link already?)
Ericsson Mobility World - www.ericsson.com/mobilityworld
BlackBerry Developer pages - www.blackbery.com/developers

And as an extra treat, I'm going to include Microsoft's MSN TV (formerly WebTV) in the mix as well.

With a scant screen size of 544x372 pixels, it's one of the hardest to design to. Fortunately it remains just barely a blip on the overall usage radar, but it still has millions of users (I personally know one). You can get the emulator for MSN TV at http://developer.msntv.com/TOOLS/msntvvwr.asp

[richardf]

Dear Dan,

Thank you for that comprehensive response. All of it was really useful and insightful.

[Dan Schulz]

Not a problem.

[ryanhellyer]

Some links I've found useful for making mobile designed sites:

http://www.passani.it/gap/#prereq
http://emulator.mtld.mobi/emulator.php

I'm no expert but here's my take on things:

Basically, keep your code as simple as possible, don't use images unless absolutely necessary and make sure they're highly compressed if you do.
There is little point in changing fonts or font sizes, use of H1, H2, H3 etc. will provide the accentuation necessary for titles etc.
Always prepare liquid layouts to compensate for varying screen widths, you don't want users to have to scroll sideways.
Never use excessive code, your users will be paying for any extra code you add and it can be quite a substantial cost.

Ryan,