21 Re: "Nice demo, but what about the rest?"

Great idea. I think every ALA page should have a style switcher, CSS for handhelds, a rotating image, a better rotating image, sliding doors, highlighted search terms, horizontal drop down menus, suckerfish dropdowns, dynamic text replacement, zebra tables, references to “Oz” and four kinds of drop shadows!

;-)

Seriously though, practical enhancements like CSS for handhelds usually make it into the main ALA design, but they are not usually available the second an article goes live.

posted at 08:39 am on September 2, 2004 by Brian Alvey

22 About emulators

The so called pocket PC emulator, to which John Ivanoff refered, is not a real emulator. It uses the rendering engine of the browser it is viewed with and doesn’t apply handheld stylesheets at all.
OpenWave browser (used on a lot of Japanese cell phones) emulator download: via http://odn.openwave.com/downloadManager.ow?softwareId=3 (registration required) or else http://developer.openwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/ (for the Japanese version, click the link under the export declaration, no registration required).

posted at 10:22 am on September 2, 2004 by Andreas Bovens

23 CSS for Handhelds is not a good idea

I have to agree with a the posts here that state trying to style stuff on handhelds it near pointless. I have to get my sites working on Blackberry devices and they at least make it a sort of easy by plainly not supporting CSS at all. Generally I’ll say that relying on style to get things working on a handheld is a bad idea, since so few handheld browsers support it properly.

I also agree that we don’t have long till these things get reasonable res screens which will also resolved most issues.

posted at 12:10 pm on September 2, 2004 by Kolano

24 stylesheet is not enough

I dont’t believe stylesheet is enough to solve this. You have to simplify your content a lot, by offering not only alternate (media=‘handheld’) stylesheet, but by complete re-write of your website. With some CMSs, this is easily possible, you may see e.g. regular demo version of BLOG:CMS ( http://demo.blogcms.com/ ) and it’s mobile version ( http://demo.blogcms.com/wap.php ). Quite a difference, right?

Btw, BLOG:CMS is one of very few systems that ship with “mobile” skin in a default package.

posted at 03:14 pm on September 2, 2004 by rADo

25 Another approach

Perhaps we need something like Markdown:

http://www.gadgetopia.com/2004/09/02/Markdown.html

Rather than process the text into HTML, just serve it as it is to handhelds.

posted at 07:49 am on September 3, 2004 by Chris Hester

26 Good article

Good article. Would be great to see some screen-shots though….

posted at 08:48 am on September 3, 2004 by Amit

27 Why bother?

Great article, but is it really worthwhile to go through all that work for the small number of people that will use it?
I just specify a stylesheet for screen, and a stylesheet for print. Anyone else gets no stylesheet. This gives a very basic, no-frills, page to other devices, which is what I assume a handheld user is looking for.

posted at 10:58 pm on September 3, 2004 by Michael Newton

28 Replies

In response to the various posts saying that handheld style sheets are not worth it:

If you code your HTML cleanly and with proper semantics, your page will display just fine in a handheld browser. It will know how to interpret the markup and can display the content in a way that reflects those semantics. This is why standards-compliant sites render better: they’re marked up properly.

Most pages out there are designed for desktops only and/or still use tag-soup coding methods. (Think table layouts with spacer gifs and text marked up with only <font> tags and
.) Opera has special modes like SSR (“Small Screen Rendering”) that use heuristics to make sense of the tag soup and display something reasonable. This involves collapsing columns, shrinking images, dropping images, overriding font sizes and colors, ignoring fixed widths and heights, and using other tricks to adapt screen-targetted web page designs for a handheld device. It’s a good educational tool: you can compare SSR’s version to your own work and see what makes a design easy to read on a handheld. However, although Opera’s SSR usually does a good job of making the page comfortable to read, it won’t preserve the original page design elements. As a designer, you can leave the job of doing the small-screen adaptation to the handheld browser, which is often sufficient to make it browsable — or you can take control yourself by writing a handheld style sheet.

Opera’s site has a some tips on coding for web designers who don’t want to spend the effort to design a handheld style sheet. (Much of that advice is just common sense for ALA’s readers.) Instead, we thought it would be more interesting for this audience to include tips on how to design a good handheld style sheet. If you want to put in the extra effort to make a handheld style sheet, this article explains how to do it right. If you don’t, you can skip the sections on CSS and take a few pointers on other things.

<blockquote cite=“http://www.alistapart.com/discuss/pocket/1/#c9210”>
The CSS rule to linearize layout tables is a good one but,what about complex data tables? Using that rule would be disastrous for comprehension of the table.
</blockquote>

The CSS rule in the article would indeed be inappropriate to use straight out of the text; it should be adapted to select only the table elements used in layout tables.

<blockquote cite=“http://www.alistapart.com/discuss/pocket/2/#c9216”>
http://www.zeldman.com/daily/0203c.shtml#pocket
</blockquote>

That post is inaccurate. The ‘name’ attribute can also be used on anchor elements that have no ‘href’ attribute and thus are not links. (The ‘A’ in the element name stands for “anchor”, not “hyperlink”.) This is how HTML defined target anchors before ‘id’ was introduced or well-supported,
and it is still common practice. ( See Tantek’s post “Anorexic Anchors” for notes on good practice: http://tantek.com/log/2002/11.html#L20021128t1352 )

Furthermore, the ‘name’ attribute is defined only on a handful of HTML elements, and only as a link target on <a>. <div name=“foo” id=“foo”> is no less invalid in HTML than in XHTML. The id+name trick Zeldman was probably trying to explain to is to place the two attributes on an <a> element, not a <div>. It’s somewhat redundant to do both, though, so I’d just stick with ‘name’ only.

<blockquote cite=“http://www.alistapart.com/discuss/pocket/3/#c9239”>
Rather than process the text into HTML, just serve it as it is to handhelds.
</blockquote>

The problem with that is you lose all the semantic information and interactive behavior coded in the HTML. Think of headings (especially on a voice browser), hyperlinks, form controls, etc. If it’s coded right, HTML is an excellent format for handhelds. You may want to drop any non-critical navigational and decorative content if you’re serving a separate handheld version, but don’t drop the markup.

wrt screenshots:

I had brought a few screenshots with me, but I can’t find the disk atm… I’ll ask Jorunn to take a few more if it seems I’ve lost them them. Give it a shot with Opera 7 in Small Screen mode meanwhile. (It’s under the View menu.)

posted at 01:18 am on September 4, 2004 by fantasai

29 Phone Memory

Nice Article.

One thing I have to say though – I spent many hours about 12 months back creating a handheld css profile for my site. Once Igot it looking OK I started testing it on various phones. What i found is that a lot of phones won’t even load the page as the combination of the CSS, XHTML and images was too large.

The display:none tag is useless as all the XHTML and images load into the phone anyway. So, I have to go back to a server based option, which requires me to keep on updating user browser strings – painful.

And then there the IE version on the Smartphone 2002 O/S…

posted at 07:30 pm on September 5, 2004 by Anthony

30 No CSS?

Hi Dan

“Does anyone know if there’s a way of serving up an unstyled version of a site to handheld devices? It seems to me that if a site is semantically coded, it should look and work just fine without ANY style sheet at all.”

PHP is one way – I am sure there are many other server based solutions…

posted at 07:37 pm on September 5, 2004 by Anthony