Mobile Devices

[harlequin2k5]

Are there standard dimensions for designing a site for a mobile device? Or does too much of it depend on the particular device?

[NancyJ]

Nope. If you think designing for ie/ff is bad I wouldnt recommend mobile sites.
All mobile devices vary in dimension, resolution and basic rendering principles. And there are about as many variations in mobile browsers are there are phones ;)

[Bill Posters]

Most mobile devices will ignore thing like page widths, so you can design using CSS for layout as you normally would. If you've stuck to using semantic markup and CSS, the device will take just what it needs to render the content of the page.

i.e. My WAP2-enabled mobile phone ignores dimensions, but throws in some support for CSS backgrounds. My own website remains completely usable when browsed using my mobile phone and yet it's served exactly the same markup and CSS as GUI browsers such as FF or IE.

[NancyJ]

Most mobile devices will ignore thing like page widths, so you can design using CSS for layout as you normally would. If you've stuck to using semantic markup and CSS, the device will take just what it needs to render the content of the page.

i.e. My WAP2-enabled mobile phone ignores dimensions, but throws in some support for CSS backgrounds. My own website remains completely usable when browsed using my mobile phone and yet it's served exactly the same markup and CSS as GUI browsers such as FF or IE.
Does your site have select boxes?
The same site is rendered completely differently in every phone/device we've tried. We tested with Opera mini and the nokia emulator but it doesnt display correctly in even some nokia phones, on my dads dell pda or on my psp. Mostly it looks ok but the select boxes behave differently on all the sites. And dont even get my started on javascript.

[Bill Posters]

Does your site have select boxes?
The same site is rendered completely differently in every phone/device we've tried. We tested with Opera mini and the nokia emulator but it doesnt display correctly in even some nokia phones, on my dads dell pda or on my psp. Mostly it looks ok but the select boxes behave differently on all the sites.
Fwiw, my site doesn't use select boxes, but I'll definately check how they appear in those mobile devices I have access to.
My site looked and worked well in the built in browsers of my current (Samsung D500) and last (SE T630) phones. I've since installed Opera Mini in my D500 and the site remains entirely usable in that also, though it appears to strip out all CSS, but throws in basic img element support (which the phone's default browser doesn't).




Just knocked up a basic page with select menu and checked in both the phone's built in browser and Opera Mini.
Both handled the select menu well and without any apparent issues.
Both browsers use a similar approach to display and use the select menu, but neither creates any problems. Both select menus remained entirely usable.


And dont even get my started on javascript.
A well-built site shouldn't use js for anything critical anyway and any js that is used should be pre-empted by some object detection.
That should (presumably) cover a great many unforeseen circumstances.

I don't think we should start bending to the foibles of individual devices - or even worrying about them. Imho, we should stick to standards and make them come to us, so to speak.

[mlseim]

I can steer you in the right direction, but there are very many differences
in width especially. The link below is using a style sheet put together by
Nokia. You can experiment with it and see what you can come up with.
A starting point maybe.

The example site:
http://www.catpin.com/ssr

The style sheet used:
http://www.catpin.com/ssr/ssr_catpin.css

[brothercake]

The most compliant and fully-featured mobile browser is Opera 8.5 for Windows Mobile / Symbian S60 - it supports screen and handheld CSS (depending on view mode) and even AJAX! In fact I think it's the first mobile browser to be useable as a web application client, and I'm well into developing some apps for it to see how far it can go :)

More about opera mobile here: http://www.opera.com/products/mobile/
You might also like to check out this ALA article: http://www.alistapart.com/articles/pocket

And if you're interested in mobile platforms in general, have you considerd the PSP web browser? At 480x272 and 24-bit color, it's not really a small-screen device at all; it's a mid-screen device more like a TV, and it has awesome CSS support (and some, though basic, JS support). I wrote an article about it here: http://www.brothercake.com/site/resources/reference/psp/ and made a couple of JS games for it here: http://www.brothercake.com/site/resources/games/pspgames/ (and one of them - "faces", the picture matching games, works in Opera 8.5 mobile as well :cool: )

And soon there's gonna be a flash player for :)


Oh yeah, and there's Pocket IE ... think IE4 on a small screen - it's just about useable, but it's very basic, does little or nothing to adjust page rendering to your device, and has appaling CSS support and loads of bugs)

[harlequin2k5]

I appreciate all the responses

Maybe given a different project I might pursue it, but I had the feeling that for phones especially there would be too much involved with getting it to render on all phones at least almost all the same way

Thanks!