Forum Moderators: not2easy
How to link to a handheld CSS is easy:
<link rel="stylesheet" type="text/css" href="..." media="handheld" />
problem comes when looking at the different browsers (I don't have them all; and it's going to be a desk clutter if we all need all of them).
And worse while there's some known way people like to have navigation presented to them on the web, this obviously will have to be different on a PDA, but how will it be expected by joe average PDA user?
Bandwidth reduction might also be an added bonus.
Screen size reduction will also be apparent.
Most of us would benefit from some good examples that don't do too much fancy stuff but do work very cross browser and perhaps even more importantly how one would build navigation so that it's intuitive on all the se devices/browsers.
While I did some reaseach on what people wrote about it on the web, I found ideas for bandwidth reduction by people wanting to move images to backgrounds in order to get them in the style instead of on the screen (great idea for logo's, but is it also for content images?)
I also found people telling to basically make it similar to a printer CSS (which for me does not need naviagation, where a PDA would need it IMHO).
Personally I'd expect as a visitor
(in top/down order)
- a *small* icon and a title
- a navigation menu (just the links would be ok)
- content
- extra tools like search
- copyright, and the like
all within the confines of the small screen, scrolling up& down would be acceptable, left-right would not be appreciated unless there's good reason for the content.
While I'd agree I get little to no PDA hits today one cannot prepare early enough that one might need to be able to move the tools liek search out of the title bar and into the footer ...
Bottom line: what's the concensus?
What I do (for myself anyway) is design so that the text version (i.e. without stylesheets) is still logical for accessibility reasons in general, using "skip" links if neccessary to jump over each "section" (nav or content)
Then feed the stylesheet with media="screen", handhelds will then just get the text version anyway, or they should! ~ but I think there is one or two that try to apply CSS :(, even although they're not supposed to. Keeping images as background images should reduce the load factor for them in that case.
As for a small logo, well yes that would be nice and but it's one the cases for using an "image replacement technique" so you can use the logo as a background image then replace with text if CSS not supported.
A community site I do works well using these methods in the few handhelds I've checked it in..
Suzy
I've been trying some samples on an IPAQ and using IE on it, I get extremely disappointing results.
IE doesn't seem to understand css at all, it ignores embedded styles even in an old table layout, and it insists on displaying the starting xml tag of xhtml.
A simple style="test-decoration:none" attribute is ignored in the menus resulting in blue text on blue background (old table layout)
That they don't support css: ok, stupid, but I'll live with it and I guess there's more out there that doesn't or maybe even shoudn't (think SE).
But displaying a xml tag is not ok: browsers should ignore tags they don't understand.
The table layout is too wide to make it readable, so perhaps a css version does make sense as it at least gives something that fits on the screen (abliet extremely bare bones), but
you can't hide anything, or format anything to make it easier to use ...
I tried a.o. to access this forum as well, it behaves like all table based designs: way too wide to be able to read it or find your way around on the tiny screen.
You'd expect the manufacturers of these devices and their software to know the devices exist ... still their homepages have features like blue on blue text, you see only a fifth of the width of the page, areas of whitespace larger than the screen, columns of text so small they are one world wide, making their home pages unusable unless you've seen it on a big screen beforehand.
[I know they have some other pages hidden somewhere that are referenced on the device itself from a starting page, still that will only work for them, not for the rest of us, nor for their customers needs beyond their direct vendor relationship]
I think for now the way ahead would be to make sure the order of the stuff in your html is reasonable, the tags are reasonable to be viewed without css as well.
And if and when css support in handhelds gets going ...
I for one am likly to be going to stick with a CSS layout that does leave the html in a normal order and not switch the core before the navigation.
Anybody got experience with other browsers?
Opera also tries to kick out tables in table based layouts in order to get it smaller, makes it look not all that great. [Looking at this site in another window, ouch]
Using opera as a test tool is good, BUT opera (on a laptop in small screen mode) -in my tests- was _FAR_ more advanced in what it does than what at least some browsers on real handhelds can do (IE on a windows based PDA (Compaq IPAQ 3950 with pocket windows 2002, if it's relevant)).
So from a webmaster point of view, testing with opera (in normal and small screen mode) is just another sanity test if you care about the few percentages of hits that come from outside the MSFT dominated world.
OTOH: Testing with Opera set to small screen mode could be argued to be not very relevant as it is behaving seriously different from some of the bundled browsers on some of the real handhelds.
I know one can download opera for certain handhelds, I just happen not to own one of them, if I were to buy one to browse the web, opera (i.e. symbian) would be very high on my requirements list.
Using Opera in small screen mode is great for testing one's handheld CSS, indeed great suggestion.
Just remember that at least MSIE on some handhelds is utterly CSS unaware, and will display something similar to a rendering without stylesheet (and without style="" attributes on html tags as well ... ).
