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

by Jorunn D. Newth, Elika Etemad

56 Reader Comments

Back to the Article
  1. That’s a nifty idea, but how accurate is that? It’d be nice to have some accurate cell phone emulators as well.

    Copy & paste the code below to embed this comment.
  2. Er… so many comments flew in as I’m writing one reply. I see somebody addressed my question about the accuracy of that emulator already.

    Copy & paste the code below to embed this comment.
  3. I disagree that it is a waste of time to work on making our pages work properly on handhelds now instead of waiting for the technology to catch up.

    Two reasons:

    1) Download requirements – wireless connections available on handhelds sometimes experience spotty network connections, making it even more important to minimize download times.

    2) The technology hasn’t caught up yet – It’s bad business to just write off the folks not possessing the cutting edge technology.  Pages should be as accessible to as many people as possible within reasonable limits.

    Copy & paste the code below to embed this comment.
  4. I think it would have been fair to cite Daniels work:
    http://disruptive-innovations.com/archive/2003_11_01_index.html#item106993150854165720
    and http://webperso.easyconnect.fr/danielglazman/weblog/newarchive/2002_10_20_glazblogarc.html#s83291371

    Copy & paste the code below to embed this comment.
  5. k, I don’t have a PDF to browse websites with but I did take a look at the emulators mentioned in the previous responses and it seems to me that the only place where PDA’s and their browsers are falling short is in displaying font styles. When you look at at http://relay5.yospace.com/ipaqbrowser/ipaqbrowser.html?http://www.alistapart.com/
    you’ll notice that we’ve lost the font styles and we’re getting ugly text. Really if the text were the same as what one usually see’s on the AListApart.com website then I’d be happy knowing that I’m getting all the content that’s on the page effectively. Once can even see the background image in the header for a touch of visual branding. That’s really all you need for a website being viewed through a screen of such small dimension.

    Great read, and enjoyable discussion.

    One suggestion about the format in which the responses to your articles are displayed. I think it would be really nice to see them in a heirarchical format so people can respond directly to a particular response, as in a message board. I guess linking to an automatically generated topic in an existing forum would work perfectly, especially if you could integrate it’s look into the rest of your website.

    Sorry tangental rambling. :)

    Copy & paste the code below to embed this comment.
  6. It’s fair to say that a lot of designers don’t design for the future, take the many that ignore standards and will only code for IE. I personally prefer to code once but to take handhelds into consideration when doing so. None of my sites are viewed on handhelds so it’s not high priority at present.

    Copy & paste the code below to embed this comment.
  7. Yeah, well, Opera is not the only browser able to render a web page on a small screen, degrading nicely the contents. Any CSS-aware browser, with a good level of CSS support, can do it using the stylesheet I have written for Mozilla, Mozilla Firefox, and Mozilla Minimo. It is available at http://lxr.mozilla.org/mozilla/source/embedding/minimo/smallScreen.css

    Opera invented SSR, and “Small Screen Rendering” is now a trademark.  They have a de facto monopoly on cell phones.
    Elika spent the summer working for Opera, that probably explains why only Opera is quoted in her article.

    But a stylesheet is a stylesheet is a stylesheet :-) Only a stylesheet.

    About the article itself, I think it is a very bad approach to ask web authors to write with small screens in mind. The right approach, IMHO, is “make your web site as usual, and let us, the browser vendors, do our job so your web site appears readable on a cell phone; you really should not care about that, it’s our duty.”. Browser vendors employees reading this paragraph may change this “duty”  to “burden” ;-)

    Copy & paste the code below to embed this comment.
  8. Am using a Sony Clie SJ33 PDA running Palm OS4. Is there any browser which supports XHTML & CSS? I design websites following standards. I’d like to make mine compatible with handhelds too, since I happen to own one also.

    Copy & paste the code below to embed this comment.
  9. The title of the article could be clearer. You’re designing for Opera UA.

    There is much more popular Nokia UA. Using the Nokia UA on the series 40 say is dangerous. It’s best turned off. How do I do this? Make the handheld.css last and try clean up the mess caused by the earlier style sheet.

    See:

    http://natalian.org/archives/2004/06/16/nokia-device-independence-with-css/

    http://natalian.org/handheld.css

    Also put content first, and silly menus last.

    My site works with almost all Nokia phones. Some phones have a size limit which does not work with some of my longer blogs.

    Copy & paste the code below to embed this comment.
  10. Good and interesting article.
    Nice work

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

    Copy & paste the code below to embed this comment.
  20. 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.
  21. congratulations for the article.

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

    Copy & paste the code below to embed this comment.
  23. 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.
  24. 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.
  25. 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.
  26. 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.