Targetting Small Screens - The Status Quo of Mobile Browsing

6 comments
Thread Title:
Targeting Small Screens
Thread Description:

Douglas Bowman's essay threadlinked above is a wonderful primer on the state of mobile browsing and how we, as web developers might be able to accomadate the small screen whilst the medium is in flux.

By in flux i mean that as Bowman points out, the HandHeld CSS type is not supported on most mobile devices and all manner of solutions and suggestions are cropping up on an almost weekly basis as to how to handle mobile content, even down to top level hosted domains that detect mobile devices for you and handle rendering! It just ain't easy...

It's a technical article for those comfy with CSS but everyone interested in mobile should at least have a skim, it'll be interesting even if you're still designing your sites with tables...

Clearly, this mobile browsing thing isn’t another flash in the pan. It’s here to stay and it’s only getting more popular. We need to account for the millions of mobile devices attempting to hit our sites. And we need to be designing and building our sites to work everywhere. This includes devices for people with disabilities as well as mobile and all other forms of utility browsers we haven’t even seen come to market yet.

We don’t want to go back to 1997, where we had to build different versions of our sites for each new browser that entered the market. True, in some cases, sites may need to be customized for the best mobile experience, and this may mean a completely different architecture, let alone HTML structure. But when we have the chance, we want to optimize the design or presentation of content based on what type of device is used to view that content.

Things needs to change. It requires action from both browser makers and the designers and developers creating the leading-edge sites. Those sites set examples for everyone else. Neither side needs to think whether or not to go first, they just need to go.

So, a question for Threadwatchers: Have you tried accomadating mobile? and if so, what are your experiences?

link via mobileread with special thanks to Brad for tuning me into that forum :)

Comments

Over this past weekend I was

Over this past weekend I was given a demo of the Samsung i600. It Includes Pocket Outlook®, Pocket Internet Explorer, Microsoft® Windows® Media Player, ActiveSync®

I surfed the www and came way thinking that there must be a low tech way to provide the surfer with a better experience. Pocket Internet Explorer naturally left justifies the page so the user will see left hand navigation. Graphics take FOREVER to load. Horizontal scrolling is a pain.

Being a low tech guy I thought the following:

At the very top of the sites left hand navigation I could put a link to
Mobile / Cellphone
Users click here

I could then deliver a text only site with maybe just the logo.
The site would be justified to the left in a width that would fit the cellphone screens eliminating the need for horizontal scrolling.

Is that a stupid idea?

Sounds good

>>Is that a stupid idea?

I think that should work. I hope the setup also gives the visitor a mobile URL they can bookmark so they can access the mobile site directly.

It is interesting, up until this summer, Hotbot.com was the only search engine that had a really mobile friendly version available (the text only skin) I think a few others now have mobile versions available. That seems to be similar to what you are proposing MrMackin.

Small Sites

This is a good starting point http://209.221.153.18/smallsites/

small site tags ???

meta name - "palmcomputingplatform" content" equal sTrue
meta name - "HandheldFriendly" content" equal sTrue

hmmmmmmm

WML site

On my site, I test the http header for HTTP_ACCEPT's value and deliver a WML page to requests whose mime type is WML. I imagine I could further refine this structure for non-WML mime's and test the USER_AGENT string to deliver custom CSS to small browsers like PocketPC. The trick would be creating a reliable list of small browser user_agent strings and corresponding CSS capabilities.

no

Quote:
At the very top of the sites left hand navigation I could put a link to
Mobile / Cellphone
Users click here

I could then deliver a text only site with maybe just the logo.
The site would be justified to the left in a width that would fit the cellphone screens eliminating the need for horizontal scrolling.

Is that a stupid idea?

No, i dont think so MrMakin, but then im feeling my way along this path like you so im hardly qualified to give 100% accurate answers :)

The ideal is that your page is pure xhtml/css - according to Russell Beattie now of Yahoo Mobile XHTML Basic would be a good way to go, but we're not talking just getting it to validate. Any monkey can do that. What's ideal is that your page is true to the ideal of a web doc. That it's written so that it would make perfect sense if read linearly (is that a word?) - so it might, without any css at all look like this:

title
masthead h1-title
top nav
body
left nav
righ nav
footer

It's actually not that hard to do, but it's not so common an occurance unfortunately.

Now, as Bowman points out, if mobile devices all supported the handheld media type then you'd be able to say "for handhelds, use these styles" and get your content to display in that order (or mix them around, buy one element after another is the point) with the styling you desire.

That cant be done though, there is a vicious circle in that virtually no devices support it so virtually no-one provides for it, so no devices support it... pathetic eh?

So without that ideal, you'd still (IMO) want to fall back on a solid, no-tables-except-for-tab-data layout in strict XHTML and either use his javascript techniques for determining mobile devices or just hit and hope.

Your solution is inelegant, but then so is the whole damn thing so it's no reflection on you. It may well be the best solution at present barring something i've not thought of - what we need is an open-source project in PHP to detect mobile devices - one that can be added to as they emerge so that web-devs can redirect users with mobiles to a different template for the DB driven data..

did that make sense?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.