Pocket-Sized Design: Taking Your Website to the Small Screen

by Jorunn D. Newth, Elika Etemad

56 Reader Comments

Back to the Article
  1. Great write up.

    2_ALA: What about the ALA’s stylesheet?
    It will be useful, IMHO.

    Copy & paste the code below to embed this comment.
  2. Just tried the the stuff out and made myself a handheld css. Worked great. Too bad that there is not many telephones out there that include a good browser (Opera/Mozilla).

    Just wanted to say thnks alot.

    Copy & paste the code below to embed this comment.
  3. I modified a local development site and used the ‘shift+F11’ preview in Opera7. It worked and displayed perfectly. But when I copied the site to a DELL AXIM Pocket PC running Internet Explorer, it does not display correctly. It seems to pick up some aspects of the pda CSS and then other aspects of the standard style sheet. The result is a melange. Is this a known problem with IE on pocket PCs?

    Copy & paste the code below to embed this comment.
  4. If you’re going to disable all images from loading then we’re just talking about text, correct?  In the case of email, who has a computer hooked to the Internet, but no phone?  What practical application is there for someone with a cell phone, or other device, to access aside from looking up movie listings while driving to the theater?  You know who does love this stuff is the cell phone providers.  It gives the users more reasons to have to mess with their phones and more ways for them to blow minutes when they are bored.  It is a novelty currently but shortly will fade away and become a topic on one of those VH1 shows in the next 5 to 10 years.

    Copy & paste the code below to embed this comment.
  5. Bad table:
    table td {display: block;}

    Good table:
    table[summary] {display: table-cell;}


    If you do W3C-pedantic-style table it is formatted nicely even in lynx! http://wiki.pornel.ldreams.net/lynx [lang=pl]

    Copy & paste the code below to embed this comment.
  6. Hi,

    I have downloaded and installed NetNewsWire 2.0 beta 3 on my Mac and I really like this Mac news reader as it has a built in support to display not only the site feeds but to actually jump to the site and view the article internally. Now, certainly you could enlarge the NetNewsWire window for as large as you would with your web browser. I however like to keep it small as I only jump to the original article when something really got me interested.

    Now, I just thought that as news readers become more and more smart – also thinking about Mozilla’s side bar at this moment – I think there is a bit more than just the hend held when alternative web views might come handy…

    Copy & paste the code below to embed this comment.
  7. The only way I know of is to either not specify ‘handheld’ in the media or use Javascript. Let’s assume that the handheld screen is 200 pixels. I know this is probably wrong but I’m just using 200 as an example. If the screen width is equal or less to 200, lose the stylesheet. This script assumes the stylesheet link is the first link element in the page.

    if (self.screen.height<=200)
    document.getElementsByTagName(‘head’)0.removeChild(document.getElementsByTagName(‘link’)0)

    I’m not saying this is the best way, this is just the way I would do it.

    Copy & paste the code below to embed this comment.
  8. As far as I know Nokia’s XHTML browser still does not support Javascript. I’m still looking for a way to disable CSS for Nokia’s browser.

    The biggest problem is that many of the existing Nokia phones with XHTML browser ignore the media attribute for the link tag. Even that I specify a stylesheet for media=“screen”, it appeared on the Nokia’s browser as well and caused some big problems; part of the text on the page are out of the page and cannot be viewed; even if I scroll, the text are hidden, overflowed the viewable area.

    I hope somebody can have a fix on disabling CSS for the Nokia’s XHTML browser without using any server side language.

    I’m still working on getting a fix myself.

    Copy & paste the code below to embed this comment.
  9. tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

    Copy & paste the code below to embed this comment.
  10. Just in case it helps anyone, I have run Damon Cool’s ( http://www.htmldog.com/test/handheld.html – see page 2 of this discussion ) handheld media type test on my Orange SPV C500 Smartphone which is running Windows Mobile 2003 with Internet Explorer.

    The browser applies all the stylesheets irrespective of media specified. I haven’t tried this but I’m guessing that so long as you declare your handheld stylesheet last you should be able to override the css already applied from the media=screen stylesheet.

    Copy & paste the code below to embed this comment.
  11. congratulations for the article.

    Copy & paste the code below to embed this comment.
  12. congratulations for the article.

    Copy & paste the code below to embed this comment.
  13. I tested some webpages including ALA on Siemens CX65. Everything just fine. Siemens uses browser from Openwave which ignores CSS. Links like “Skip navigation”, “Top of the page” are really useful. I think that link skipping main content to menus on the right on ALA would be useful too.

    Copy & paste the code below to embed this comment.
  14. I’ll be honest- I’m hugely excited about the fact that more and more handheld devices are managing to deal with XHTML and CSS.

    Being a Nokia 6600 owner (symbian operating system with Opera installed) I have already managed to experince the joys ahead.

    But I’ll tell you one thing (two actually…):

    1. Surfing the internet wirelessly on my laptop with gfx@full resolution, XP Pro, latest I.E. and plug-ins, is quite a difference experience to the slugginsh, boring looking days of even as recent as 1998.
    The handheld devices will go through a similar perdios of maturity, and most of our work won’t even need special mark-up, just GOOD mark-up (like ANYTHING viewing it needs!)

    2. I just hope the likes of V0d4F0n£ et. al. don’t lock the Internet down to their poor services too tightly. (If I’m honest, I haven’t even managed to try out Opera on my handset yet because the V0d4F0n£ ‘L1V£’ settings don’t seem to allow me to bypass their bespoke (and comparitively poor) software)

    Oh well, that’s my two cents worth, I’d appreciate your thoughts :)

    I’m off to install the Managed Fax Service on MS SBS 2003, and then it’s back to php, MySQL and XHTML/CSS :D

    Best wishes,

    Mark Clulow

    [ http://www.cooscreations.com ]
    [ http://www.pulsemarketing.org ]
    [ http://www.annabuckley.com ]

    Copy & paste the code below to embed this comment.
  15. I’ve been using Opera for desktop since long. I badly need a version for my Palm OS4 handheld and I’m sure there are many others around who’d want a standards based browser for the palm. The only one that comes close is the Xiino3 and is still far from it though it is the best around. Blazer and iPanel lag far behind.
    A word of advise though. Make it for OS4 and add compatibility for OS5 as majority of Palm users are still on 4. You can’t just upgrade your software but need to upgrade your hardware too

    Copy & paste the code below to embed this comment.
  16. Embracing standards in Web Design is the right way to go, after readind this article I noticed that a lot of sites developed using standards are already Pocket-Sized friendly.

    Copy & paste the code below to embed this comment.