SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    designing for mobile

    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

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    <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.

    HTML Code:
    <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).

    HTML Code:
    <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?

    HTML Code:
    <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).

    HTML Code:
    <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
    Last edited by Dan Schulz; Aug 26, 2007 at 03:01. Reason: Added iPhone Tester

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Dan,

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

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a problem.

  5. #5
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •