Optimising sites for PDA?

[reggy]

Does anyone know how to optimise websites for PDAs?

[PCInk]

Use CSS alternatives. Use media="handheld" on the CSS include file that has the handheld CSS file. Anything you don't want to appear you can use display: none, or over-ride other features with your handheld specific CSS file.

Width varies from machine to machine, about 176px to 240px seem to be standard. Using body { max-width: 240px } helps when developing.

Use Opera and press Shift+F11 - changes it to PDA mode (but search for handheld and not PDA!). Using their site, you can see how they implement their own site to be PDA compatible and have links to others that work well.

Search the Opera site - they have useful information on it.

---

P.S. Opera is better than most PDAs, so if you can get a PDA to test on, it will help.

[mattock]

PCInk:

I'm looking into how a website can tell if you're browsing using a PDA/smartphone or a normal desktop computer...for example if you log onto www.google.com using a PDA it comes up with a simpler page than if you were browsing it with a normal desktop PC. Is this done by using CSS as you described? I have built a few websites and used basic CSS for things like fonts, bg colours etc using Dreamweaver.
I see you gave the code: media="handheld" Do you know how (or point me in a general direction) i would put this code into the CSS?

thanks in advance

[contracosta]

There are a lot of little things you can do.

First of all, if you follow W3 standards (I refer both to syntactical standards and to the web usability initiative guidelines) then you're most of the way there. I find that it's best to think of PDA support in the same orbit as support for people with disabilities, because a lot of the things you do to make sites accessible for screen readers are great for PDAs, and vice versa.

The CCS approach advocated above is good but may not be totally practical, as a lot of PDAS (that is, most of them) don't pay any attention to it. You should do that, but don't consider your task done just because you make a "handheld" stylesheet and set various classes to display: none. For instance, my Palm i705 doesn't seem to read CSS at all. I'm betting that a lot of PDAs don't.

Have you tested your site on a PDA? You should try that first of all. It's fun!

Every day more people are browsing on PDAs.

[mattock]

Hi,

Thanks for the reply. I'm actually doing my final year dissertation on using mobile media to browse the internet, and in essence accessibility is what it’s all about, as you say! Most of my sources so far have actually been from the W3C as you suggested. I have an ipaq 4150 running 2003 which seems to run CSS ok...but like you say older PDAs will not run CSS. I have to build a mobile media friendly website based on my research, and as CSS is not supported on some PDA's I guess this will conclude that I will not use CSS. Do you know any other ways how, for example, the Google website redirects a PDA automatically to www.google.com/palm? I've looked in the source code, but couldn’t really see anything obvious!

Thanks in advance

G Mattock

[contracosta]

A dissertation? Interesting. What discipline.

Please note that you shouldn't discount CSS as a technology to bring to bear on the problem. That's your forward-looking solution and it would be a very bad thing not to include it in such a project.

I'm sure that Google is doing a lot just on the http side before it ever serves a page. For instance, I know that when I have my computer set to another language (Greek, Hebrew, etc.) as a default, Google detects this using Content Negotiation and sends me directly to a search page in that language.

It is far more efficient to look at the User Agent information coming in on the http request than it would be to do something on the client side with Javascripts and redirects.

This brings up another issue, with philosophical implications -- is it best to make one site which is optimized for everyone (W3C preferred vision) or better to come up with some coded solution to funnel handheld traffic to a completely different document set?

What research have you done so far?

[mattock]

Hi,
I’m doing a BSc in Multimedia technology. My dissertation is basically looking into how to optimise a website for use on mobile devices which are connected by 2.5G/3G networks and wi-fi. I've then got to build a suitable version of my university’s website (www.leedsmet.ac.uk) for mobile devices. Like you say, CSS is definitely something I will discuss, even if I will not use it. At the moment i'm looking into image size V's quality and trying to get the best ratio. You made a very good point which I completely overlooked, which is basically language settings, so that’s now been added to the list! My course hasn't really covered much on building websites, more on the ‘aesthetics’, so i'm new to a lot of some of these issues, but "user agent information" as you described looks like, again, something I will be adding to my content. With regards to using one website and using code to filter content for mobile media devices, or creating a whole new document set, this looks like a big dilemma for simple reason that the website I am basing it on (www.leedsmet.ac.uk) has constantly changing content, for example the first page where 'news' articles are changing. With regards to maintaining a constantly changing website, it would be time consuming to also constantly change 2 websites! On the other hand, CSS (i'm presuming this is the only viable method) is not available on all mobile devices! The only way I think I can overcome this dilemma is to weigh up the pros and cons...for example, how many PDA's support and don’t support CSS, coupled with how fast technology is evolving! It would of course be best to build a website for 100% of people to view, but weighing up the advantages and disadvantages, this may not be feasible. I will make sure it is accessible for people with disabilities, but making it accessible for varied mobile hardware specifications seem to be my (major) downfall.

Any help, discussion or criticisms would be much appreciated

Thanks

[mattur]

There's a recent article on Webmonkey which may be of interest: The End-All Guide to Small-Screen Web-Dev [hotwired.lycos.com]. Get it while it's still there...

[mattock]

Thanks Mattur, that article has really helped me! After reading it i find that it is near impossible to get a website that works on all mobile devices, one reason being the proxy servers which apparently vary from network to network filtering out various content on your website! XHTML and CSS seem to be the way to go!

thanks again

[contracosta]

CSS is an important way to go -- but again I will point out that it is not actually widely implemented. Ideally your whole handheld solution could be easily implemented with a seperate stylesheet for handhelds. And in the future that will work. But it doesn't work now. I haven't tried everything, but so far I've never met a handheld device that obeys the css handheld request.

Does anyone have a list of devices that DO?

Most handheld devices ignore CSS completely. I'm convinced that they don't load in any css file at all, whether for handheld or screen.

What handhelds will you be testing on? It's time for some proof of concept tests. You can't rely on theory. If theory ruled we could have switched to CSS for everything back in 1997 and today we'd be in paradise.

I can't point you to my website (against the forum rules) but maybe if we took the discussion to private mail I could show you what we are doing to make one site which works great for everyone, on a PC, handheld, text-based, fast connection, slow connection, even for those who are blind.

[mattock]

contracosta, i have sent you a 'sticky mail'. Please let me know if you have received it

thanks

[pixelkat]

Microsoft's Pocket Internet Explorer 2003 browser is the first and only mobile version to include CSS.

Flash Player 6 for mobile is the first to include CSS, but I think you also need to be running the latest PocketPC 2003 O/S to even be able to install the Player 6. the older O/S and Sony Clie use an earlier player based on Flash 4.0.

I think the same goes for RealOne player for mobile, but I think that's more attributed to the latest developments in SMIL 2.0 multimedia sequencing markup language.

CSS is a pretty recent development in mobile platforms, and none too soon! may have to wait for the next generation of devices in order to have at least 50% acceptability of CSS across the board. as of now, you'd be developing for probably in my guestimation, 20% of the market. not fact, just my opinion!

for the lowdown on the latest status about CSS adaptation in mobile markup languages, check out w3.org

kr

[pixelkat]

I guess I should clarify my last post, that Pocket IE 2003 is the first version of Pocket IE to use CSS. don't know about the other mobile browsers. Opera probably did a long time ago, but they, are always ahead of the pack in standards-based innovation.

Mozilla just introduced a mobile browser, but I've read it needs a little more work. not quite ready for prime time, but I'm sure it will be on par with Opera when they finally release a stable build.

kr

[mattock]

i cant seem to find opera for my ipaq. I can only see the download for the smartphone/pda devices....not straight pda!
I use opera on my SE p800, and that supports CSS...so if opera do a browser for PDA's im presuming if a smartphone can read CSS, so will a PDA!

[pixelkat]

Alas, I found out today that Opera doesn't support either Palm or Pocket PC! OUCH!

however...

I did a little poking around on my own at google, using various combinations of SSR (small screen rendering), Opera's markup language, CSS and media="handheld" and found some interesting stuff.

note that all the information below only pertains to the Pocket PC 2003 O/S and IE. earlier versions don't recognize style sheets!

I found this scalable web site example, from the css-discuss forum discussion (which is an excellent css mailing list moderated by Stylesheets God, Eric Meyers:

[archivist.incutio.com...] this discussion talked about using an external stylesheet and import it to successfully specify media="handheld" in the Pocket PC. I followed the thread and printed out the entire discussion as well.

*****************************************

[homepage.ntlworld.com...]

I tested it on my Pocket PC and except for a few Pocket IE quirks causing a break in the menu, it scaled beautifully! So, I screen captured both the full size and mobile version for reference and every line of code in the source code so I can study it in detail tonight while watching another evening of mindless television!

********************************************
then, I found this mobile css test site,
[hixie.ch...]

with 30 or 40 different ways of coding for mobile, including xml, xhtml, chtml, xhtml-mp, etc. to test for markup languages or configurations that work on various mobile platforms. alas, Pocket IE only rendered 4 or 5 out of 35+ tests, but hey! sometimes, it's just as valuable to know what DOESN'T work than what does!

*****************************************
well, fellow mobile devs, it's only a tiny bit of info, but every little bit helps, right?!

btw, I've about given up on Real Networks Mobile Player. I've gotten nowhere with them, other than repeated autoresponse emails that never answered any of my questions! I'm either going to convert the slideshow to Flash MX 2004 or try developing in an open-source media player called PocketSmil. I sure will miss all those cool effects using RealPix and RealText scripting languages, but Real Networks is driving me insane with their poor dev support for their mobile player. stay tuned!

[mattock]

Hey Kat

Nice to hear from you again....i managed to get the media="handheld" working a few days ago using the @media rule. I will definatly be looking into those links you put up...thanks for that! My thesis is in for friday and its been hell so far - im even working all today on it...and its my birthday :( - with new things to try and an ever increasing contents page i just have to stop sometime! Im sorry i couldnt help you with your porting....it sounds so interesting, but i just dont know much about it!
Good luck

Graham

[mgm_03]

Hi all,

I am somewhat new here (and new to site development) but was wondering if WML and WML Script is the solution. I have seen only a few titles on the subject.

This topic is of interest to me because I want to build as many relevant skills as needed to competent with my trade.

[digitalv]

I didn't see this suggested before, so I'm throwing it in ... it's not necessarily a bad idea to make a SEPARATE site for PDA's.

This can be accomplished fairly easily if you make the content of your website database driven, or use Stylesheets and base which stylesheet to display on either the useragent or a visitor's personal selection.

While PDA's are "getting there" as far as matching standard browser content, it's not 100% plus you've always got the size issue. Don't rob your majority - computer users - of content just so you can please the minority PDA users. I've set up sites before that featured the exact same content as the main website, but were optimized for the Palm VII (old school) and for WAP by using "wap.domain.com" and "palm.domain.com".

Since the content came from a database this was really easy to do, and didn't "penalize" regular browser users.