1 The Big Benefit

I think portability across devices is one of the most important aspects of the XHTML/CSS combo.

To have printer and handheld friendly pages without duplicating your content is a boon and should be something that most on-line publishers can advantage of.

posted at 06:43 am on December 5, 2003 by Michael Ward

2 Great series of articles.

What I really want to know is where to get those Palm Emulators.

posted at 07:33 am on December 5, 2003 by Jeremy FLint

3 What browsers support @media: handheld?

I’m trying to find out if many of the handheld browsers even support the handheld media type. If they don’t you won’t get very far with this approach. :) The one I’m most insterested in at this point is Plucker (http://www.plkr.org) and Avantgo.

(P.S. @Jeremy, read the article again, it says where to get the Palm emulator.)

posted at 08:36 am on December 5, 2003 by Hal Rottenberg

4 Why single quotes around 'print'?

In the <link> tag, most of the attributes use double quotes, why does media=‘print’ use single?

posted at 08:46 am on December 5, 2003 by Jules

5 Small Screen Rendering

Another good way to test a site for suitability for handheld devices is to download the Opera 7.2x and try the SSR (Small Screen Rendering ) mode by clicking Shift-F11.

What this does, is change the layout of the page and “fold” it into a format suitable for handheld devices, losing some layout, but making the content easily available. If there are stylesheets for @media handheld, Opera will use those styles and not SSR.

This technology is available both in Opera’s desktop versions and on all the mobile versions that are currently being shipped with Nokia devices.

Using this technique also shows a major shortcoming of the Slashdot redesign. Don’t get me wrong, I loved the article, but the redesign isn’t perfect yet. Which shortcoming am I talking about?

SSR renders the page in order it encounters the content in the code. In the redesign, the code containing the actual content of the page, the articles, is at the end of the file. So when I turn on SSR, I first get a huge list of links, sections, logins etc. before I finally see the content. When using SSR on the normal /. page, the content is at the top.

So for the redesign to be even better than it currently is, it should try to move the code around, putting the actual content more towards the top.

Another tip for making pages more suitable for handheld devices, is to write a separate stylesheet for @media handheld, and to hide certain sections that are irrelevant to handheld users, like Poll, bookreviews, freshmeat etc. This can simply be done with display:none; in the handheld stylesheet.

posted at 09:15 am on December 5, 2003 by Mark Schenk

6 Media types

Hal brings up an interesting point. It seems many hand-held browsers try to fool the website into thinking they are “just another NS/IE variant”. My suggestion is to write to the authors of the applications to make sure they submit themselves as “hand-held” media

posted at 09:43 am on December 5, 2003 by Christopher Harrington

7 @media handheld

operas support for @media handheld is somehow weird. including it with

@import url(handheld.css) handheld;

works; including it with

@import url(handheld.css);

and putting the @media handheld {…} inside the css file doesn’t work. it’s interesting that this second method works with all the other mediatypes, but not “handheld”. so from now on my htm file looks like this:

<style type=“text/css”>
<!—
import url(handheld.css) handheld; import url(othermedia.css);
—>
</style>

othermedia.css looks like this:

@media all { /* supported by IE, Mozilla, Opera */ .class { }
} /* end all */

@media projection { /* supported by Opera */ .class { }
} /* end projection */

@media handheld { /* not supported this way; please see handheld.css; supported by Opera */
} /* end handheld */

@media print { /* supported by IE, Mozilla, Opera */ .class { }
} /* end print */

@media screen { /* supported by IE, Mozilla, Opera */ .class { }
} /* end screen */

posted at 10:20 am on December 5, 2003 by flaimo

8 Shouldn't the menu be at the bottom for non-CSS us

Thanks! This was definitely worthwhile.

Take it for what it’s worth, but I know that Mark PIlgrim will always insist that navigation should be at the bottom for text-browser users, and that main content should be first (http://diveintoaccessibility.org/day_10_presenting_your_main_content_first.html).

This is especially true, I should think, for a page with as much menu as Slashdot. If you look at the no-CSS example rendered, it takes me three screens at 800×600 to get to content. Frankly, I’m not going to be anywhere near as interested in the menu as in the content, if I’m reading Slashdot in Lynx.

Someone mentioned this above in passing as a problem for small-screen devices, but it’s also a problem for screen readers and, frankly, NS4 and IE4 users, who do still exist.

posted at 10:35 am on December 5, 2003 by Wes Meltzer

9 Skip link

If you look at the CSS version, the first item to appear in both Small Screen Rendering in Opera 7.21, and in Lynx is a “Skip to Content” link.

The whole idea was to show a Slashdot redesign without adjusting the content, thus the skip link to jump over the menu.

posted at 11:28 am on December 5, 2003 by Sean Sieg

10 re: @media handheld

just found out that i was using opera 7.11. a look at the changelog shows that they fixed that handheld-media bug with 7.20….

posted at 05:21 pm on December 5, 2003 by flaimo