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.
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).
Copy & paste the code below to embed this comment.
Kolano
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.
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.
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.
Copy & paste the code below to embed this comment.
fantasai
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.
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.)
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…
“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…
Copy & paste the code below to embed this comment.
Derrick Crowe
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.
Bernd
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.
Micah Swabb
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.
Copy & paste the code below to embed this comment.
Corin
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.
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” ;-)
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.
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.
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).
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 DELLAXIM 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.
Reggie Higgin
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.
Stephan
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…
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.
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.
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.
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.
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
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
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.
56 Reader Comments
Back to the ArticleBrian Alvey
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.
Andreas Bovens
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).
Kolano
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.
rADo
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.
Chris Hester
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.
Amit
Good article. Would be great to see some screen-shots though….
Michael Newton
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.
fantasai
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.)
Anthony
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…
Anthony
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…
Seth Thomas Rasmussen
That’s a nifty idea, but how accurate is that? It’d be nice to have some accurate cell phone emulators as well.
Seth Thomas Rasmussen
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.
Derrick Crowe
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.
Bernd
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
Micah Swabb
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. :)
Corin
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.
Daniel Glazman
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” ;-)
Faridur Rahman Choudhury
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.
Kai Hendry
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.
Bracnoria
Good and interesting article.
Nice work
Maksim Rossomachin
Great write up.
2_ALA: What about the ALA’s stylesheet?
It will be useful, IMHO.
Jens Wedin
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.
shane diffily
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?
Reggie Higgin
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.
porneL
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]
Stephan
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…
Dante
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.
Snecx
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.
Bogeyman
tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Mr Ming
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.
diseño web
congratulations for the article.
diseño web
congratulations for the article.
Mindaugas
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.
Coos
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 ]
Faridur Rahman Choudhury
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
Edgard Durand
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.