WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mobile Devices

for

From: Henny Swan
Date: Nov 20, 2009 6:55AM

Hi,

These are all good resources however I'd be cautious about basing your
mobile web development on testing for just one platform / browser.

There are a lot of browsers out there and contrary to perception we
aren't all using iPhones. In fact Statcounter logs Opera as the most
popular browser worldwide for October 2008 to November 2009 http://gs.statcounter.com/#mobile_browser-ww-monthly-200810-200911
and in Asia iPhone fall well behind Opera and Nokia http://gs.statcounter.com/#mobile_browser-as-monthly-200810-200911
(Disclaimer: I wok for Opera).

There are many, many handsets and many platforms and browsers out
there we need to think about and as such many tools. This makes for a
slight headache for the designer as it's hard to know what the
baseline set of capabilities are for any given mobile browser. If you
throw into the mix that the platform they operate on may impact on
their baseline capabilities (how they render fonts, colour etc) this
can start to look complex.

I always l keep in mind the following when designing for the mobile web:

* Aim for one website (avoid .mobi or iPhone only sites) where possible
* Build using web standards (build once works anywhere)
* Use CSS 2.1 media types and consider CSS3 media queries
* Use progressive enhancement. Build for low end handset and browser
combinations and add in more robust capabilities, layout, design over
the top

Some additional testing tools and resources are:

* Mobile web development articles from Dev Opera http://dev.opera.com/articles/mobile/
* Opera Dragonfly http://www.opera.com/dragonfly/ This allows you to
remote debug web pages for mobile from the comfort of your desktop
browser.
* MicroEmulator http://www.microemu.org/
* Opera Mini Emulator http://www.opera.com/mini/demo/

Hope that helps.

Henny


On 19 Nov 2009, at 21:29, John E. Brandt wrote:

> There are lots found by Googling "safari iphone emulator." Here are a
> couple:
>
> http://www.testiphone.com/
>
> http://iphonetester.com/
>
> BTW, I think they both require Safari.
>
> Before I had an iPod Touch (which I recommend purchasing for testing
> anyway), I used a Safari plugin called iPhoney
> http://www.marketcircle.com/iphoney/ on one of my Macs.
>
>
> I suspect you will start to see a trend where folks will be installing
> adaptive themes to their CMS which will convert your website into a
> "mobile
> ready" theme which looks and behaves like a real iPhone/iPod app.
> Read my
> discussion and review of a WordPress theme-like plugin called WPtouch
> http://jebswebs.net/blog/2009/11/very-cool-wp-plug-in/ Very cool
> indeed.
>
> BTW, I did not address other smartphones and mobile browsers, but I
> suspect
> that they will start to converge in the not too distant future and
> will
> probably look more and more like the Safari iPhone/iPod browser
> since they
> own a large share of the market and have become the standard to
> which all
> the mobile phone makers seem to want to meet or beat.
>
> ~j
>
> John E. Brandt
> jebswebs.com
> Augusta, ME USA
> <EMAIL REMOVED>
> www.jebswebs.com
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Geof Collis
> Sent: Thursday, November 19, 2009 3:23 PM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Mobile Devices
>
> Hi All
>
> Does anyone know of a website or application where I can view my
> website as if I was using a mobile device? I dont mean screen shots,
> I mena an actual experience.
>
> Currently I have a style sheet that a user can click on to render it
> for mobile devices but I'm checking into a WordPress plugin that will
> automatically detect mobile devices and serve up an appropriate style
> sheet, I want to see how it renders as I dont use any.
>
> Also, If anyone with a mobile device has time can you go to
> www.badeyes.com and click on the "mobile" link at the top of the page
> and see how it looks? It's based on a Joe Clark tutorial.
>
> cheers
>
> Geof
>
> Editor
> Accessibility News
> www.accessibilitynews.ca
> Accessibility News International
> www.accessibilitynewsinternational.com
>