mobile friendly

[nagasaki mike]

could someone point me towards any respected sites out there that will
explain (simply) the best ways to make websites mobile friendly?
ie rules i should follow (few images / one column) etc etc etc

thank you very much

 

[Andy Dingley]

could someone point me towards any respected sites out there that will
explain (simply) the best ways to make websites mobile friendly?

Good, fluid, CSS-based design

Reading Joe Clark on accessibility (much of this is good sense for
mobiles too).

Good linearisation and good prioritisation, particularly for
navigation.
Mobiles don't usefully support 2-d navigation, so the user is forced
into 1-d scrolling through lists. Make sure that the nav you use is
workable as 1-d, and that it's accessible (i.e near the top). On the
"desktop web" consistency is important. On the "mobile web",
context-sensitivity becomes more useful. Re-arranging the nav in the
first couple of screenfuls of scrolled content so that it's
task-dependent can be a very powerful technique. Can you identify why a
customer is on your site? Can you offer them useful links that you can
predict they'll find useful? Are they browsing or buying? Is the
search function more useful to them today than the checkout function?

Understand your network. They're not all the same, particularly if
you're writing content for a "walled garden" that isn't the general
web. All the networks have some level of input transcoding (mainly
fixing up broken HTML and resizing images) but some of these have very
strange expectations about what they want to receive (e.g. ideas like
Vodafone's PartnerML).

Test on mobiles or emulators! With a range of desktop emulators you
can do a whole load of usability testing that's quicker and cheaper
than with live devices. With live devices you can test the accuracy of
emulation, and the real effects of speed restrictions. You need to test
with both.

Measure download size / speed after the networks' transcoders. Big
images might not be a problem (the transcoder squashes them anyway),
bloated HTML certainly can be.

Don't assume device charcteristics. Mobile devices are getting bigger
and more powerful all the time. Don't lock next years HoLeeFuk 9000
superphone into a 100x100 window you designed for last year's model.

If you find any other sites with good advice, please post links here.

 

[nagasaki mike]

Good, fluid, CSS-based design

Reading Joe Clark on accessibility (much of this is good sense for
mobiles too).

Good linearisation and good prioritisation, particularly for
navigation.
Mobiles don't usefully support 2-d navigation, so the user is forced
into 1-d scrolling through lists. Make sure that the nav you use is
workable as 1-d, and that it's accessible (i.e near the top). On the
"desktop web" consistency is important. On the "mobile web",
context-sensitivity becomes more useful. Re-arranging the nav in the
first couple of screenfuls of scrolled content so that it's
task-dependent can be a very powerful technique. Can you identify why a
customer is on your site? Can you offer them useful links that you can
predict they'll find useful? Are they browsing or buying? Is the
search function more useful to them today than the checkout function?

Understand your network. They're not all the same, particularly if
you're writing content for a "walled garden" that isn't the general
web. All the networks have some level of input transcoding (mainly
fixing up broken HTML and resizing images) but some of these have very
strange expectations about what they want to receive (e.g. ideas like
Vodafone's PartnerML).

Test on mobiles or emulators! With a range of desktop emulators you
can do a whole load of usability testing that's quicker and cheaper
than with live devices. With live devices you can test the accuracy of
emulation, and the real effects of speed restrictions. You need to test
with both.

Measure download size / speed after the networks' transcoders. Big
images might not be a problem (the transcoder squashes them anyway),
bloated HTML certainly can be.

Don't assume device charcteristics. Mobile devices are getting bigger
and more powerful all the time. Don't lock next years HoLeeFuk 9000
superphone into a 100x100 window you designed for last year's model.

If you find any other sites with good advice, please post links here.

cheers for all that - i'll have to do some emulating because i dont have and
never have had a mobile phone myself. if i find some good links i will
definitely post them here. thanks again.

 

[kdarling]

Good linearisation and good prioritisation, particularly for
navigation.
Mobiles don't usefully support 2-d navigation, so the user is forced
into 1-d scrolling through lists. Make sure that the nav you use is
workable as 1-d, and that it's accessible (i.e near the top).

In addition to the 1-d navigation, people hate to scroll sideways.
Vertical scrolling is expected and fine, just like reading a newspaper
column. Define widths, if needed, by "100%" instead of pixel size, so
they size to fit the device.

See also places like:

http://www.handheldsfordoctors.com/learn/wireless/principles.htm

and go to each device maker's site and download their docs (if any) on
their web browsers. That includes Microsoft, Palm, Blackberry. Get
their simulators as well. Very handy. Also go after browser docs
from Opera, etc.

I don't know if there's an up-to-date comprehensive book as a guide,
but it would sure be handy!

Kev

 

[dorayme]

With a range of desktop emulators you
can do a whole load of usability testing that's quicker and cheaper
than with live devices.

Like with what? Recommend any?

(I know AD, you are on the warpath... I like it. But this is an
innocent question. Trust me.)

 

[Andy Dingley]

Like with what? Recommend any?

Just go to your favourite phone makers' developer sites and download a
few - including the latest and greatest, and the 6 month old model
that's the one ,most people are actually using. Usually if I'm doing
this seriously then I'm being told to pimp a particular hawt new model
and the emulator is the first thing they give me (the last thing they
give me is the real hardware, which of course works nothing like the
same).

 

[X l e c t r i c]

The W3Schools has this information on WAP and WML:

http://www.w3schools.com/wap/default.asp

You can also try a search using WAP, or WML, or WAP tutorial, or WML
tutorial.

Art

 

[kdarling]

could someone point me towards any respected sites out there that will
explain (simply) the best ways to make websites mobile friendly?
ie rules i should follow (few images / one column) etc etc etc

And then of course there's this:

http://www.w3.org/TR/2006/WD-mobile-bp-20060113/

And this interesting comparison of mobile browsers:

http://www.howtocreate.co.uk/operaStuff/devices/

Kev

 

[Andy Dingley]

The W3Schools has this information on WAP and WML:

What does WML have to do with the price of fish?

That is like _so_ last century Dude

 

[X l e c t r i c]

Andy Dingley wrote:

"What does WML have to do with the price of fish?

That is like _so_ last century Dude"

I have no idea Andy, I don't shop for fish. But apparently it has you
hook, line, and sinker.

Art