WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Mobile Devices

for

Number of posts in this thread: 14 (In chronological order)

From: Geof Collis
Date: Thu, Nov 19 2009 1:25PM
Subject: Mobile Devices
No previous message | Next message →

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

From: Randi
Date: Thu, Nov 19 2009 1:35PM
Subject: Re: Mobile Devices
← Previous message | Next message →

This might be naive, but shouldn't it look the same on an internet
browser? For example, I use the mobile Facebook, and I use it in
Safari not my mobile, and I'm pretty sure its exactly the same. Just
curius.

*Randi

Doggy Diaries and other ramblings at:
http://raynaadi.blogspot.com/

From: Dean Hamack
Date: Thu, Nov 19 2009 1:50PM
Subject: Re: Mobile Devices
← Previous message | Next message →

There are two Firefox plugins that will allow you to do this: The Web
Developer Toolbar, and the User Agent Switcher.

Using the Web Dev toolbar, you can use the "CSS" tab to render pages using
mobile stylesheets.

Using the User Agent Switcher, you can render pages as seen on an iPhone.

Between those two, you should be fairly well covered.

In answer to Randi's question, the answer is "no". Facebook has set up a
completely separate site for mobile users, so it looks the same on a browser
as it does on a mobile device. But that's not the case with most sites.


On 11/19/09 1:23 PM, "Geof Collis" < = EMAIL ADDRESS REMOVED = > wrote:

> 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
>

From: Randi
Date: Thu, Nov 19 2009 2:10PM
Subject: Re: Mobile Devices
← Previous message | Next message →

Right, I think I misunderstood the original post then, I thought he
had created a mobile version of the site that a user could turn on.
Makes sense now, thanks!
*Randi

Doggy Diaries and other ramblings at:
http://raynaadi.blogspot.com/

From: John E. Brandt
Date: Thu, Nov 19 2009 2:30PM
Subject: Re: Mobile Devices
← Previous message | Next message →

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 ADDRESS REMOVED =
www.jebswebs.com


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Geof Collis
Sent: Thursday, November 19, 2009 3:23 PM
To: = EMAIL ADDRESS 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

From: John E. Brandt
Date: Thu, Nov 19 2009 2:35PM
Subject: Re: Mobile Devices
← Previous message | Next message →

You would THINK this was the case, but it is often not. And there are lots
of reasons why. It has been fascinating to browse the web with my iPod Touch
because it really points out the poorly designed and built websites of the
world.

...and then there can be a whole chapter about the use of Flash on websites
and how that doesn't even work on the iPod...!

~j

John E. Brandt
jebswebs.com
Augusta, ME USA
= EMAIL ADDRESS REMOVED =
www.jebswebs.com


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Randi
Sent: Thursday, November 19, 2009 3:35 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Mobile Devices

This might be naive, but shouldn't it look the same on an internet
browser? For example, I use the mobile Facebook, and I use it in
Safari not my mobile, and I'm pretty sure its exactly the same. Just
curius.

*Randi

Doggy Diaries and other ramblings at:
http://raynaadi.blogspot.com/

From: Geof Collis
Date: Thu, Nov 19 2009 4:15PM
Subject: Re: Mobile Devices
← Previous message | Next message →

Hi Dean

Thanks, will look into them.

cheers

Geof

At 02:50 PM 11/19/2009, you wrote:
>There are two Firefox plugins that will allow you to do this: The Web
>Developer Toolbar, and the User Agent Switcher.
>
>Using the Web Dev toolbar, you can use the "CSS" tab to render pages using
>mobile stylesheets.
>
>Using the User Agent Switcher, you can render pages as seen on an iPhone.
>
>Between those two, you should be fairly well covered.
>
>In answer to Randi's question, the answer is "no". Facebook has set up a
>completely separate site for mobile users, so it looks the same on a browser
>as it does on a mobile device. But that's not the case with most sites.
>
>
>On 11/19/09 1:23 PM, "Geof Collis" < = EMAIL ADDRESS REMOVED = > wrote:
>
> > 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
> >

From: Geof Collis
Date: Thu, Nov 19 2009 4:25PM
Subject: Re: Mobile Devices
← Previous message | Next message →

Hi Randi

I'm no expert but they look different, one has to fit into a smaller
window, I use a single colukmn layout with everything moved to the
left using a liquid layout and remove images, thus the need for
proper alt text.

cheers

Geof


At 03:34 PM 11/19/2009, you wrote:
>This might be naive, but shouldn't it look the same on an internet
>browser? For example, I use the mobile Facebook, and I use it in
>Safari not my mobile, and I'm pretty sure its exactly the same. Just
>curius.
>
>*Randi
>
>Doggy Diaries and other ramblings at:
>http://raynaadi.blogspot.com/
>
>

From: Nancy Johnson
Date: Fri, Nov 20 2009 6:45AM
Subject: Re: Mobile Devices
← Previous message | Next message →

I have a palm centro using a little used browser called Blazar.
Visually, and I am sited, the content appeared below the nav. It
looked broken.

Nancy

On Thu, Nov 19, 2009 at 6:21 PM, Geof Collis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Randi
>
> I'm no expert but they look different, one has to fit into a smaller
> window, I use a single colukmn layout with everything moved to the
> left using a liquid layout and remove images, thus the need for
> proper alt text.
>
> cheers
>
> Geof
>
>
> At 03:34 PM 11/19/2009, you wrote:
>>This might be naive, but shouldn't it look the same on an internet
>>browser? For example, I use the mobile Facebook, and I use it in
>>Safari not my mobile, and I'm pretty sure its exactly the same. Just
>>curius.
>>
>>*Randi
>>
>>Doggy Diaries and other ramblings at:
>>http://raynaadi.blogspot.com/
>>
>>

From: Henny Swan
Date: Fri, Nov 20 2009 6:55AM
Subject: Re: Mobile Devices
← Previous message | Next message →

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 ADDRESS REMOVED =
> www.jebswebs.com
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Geof Collis
> Sent: Thursday, November 19, 2009 3:23 PM
> To: = EMAIL ADDRESS 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
>

From: Geof Collis
Date: Fri, Nov 20 2009 9:40AM
Subject: Re: Mobile Devices
← Previous message | Next message →

Hi John

Wow those are great!!

My wife looked at my site www.badeyes.com on the testyphone and said
it fit ok and when I clicked my "mobile" style sheet it looked even
better, the other one had sideways scrolling.

I've downloaded that WordPress plugin and will test it out, but if
you have time can you check www.badeyes.com with your Iphone and give
me some feedback, private if you like.

cheers

Geof
At 04:29 PM 11/19/2009, you 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 ADDRESS REMOVED =
>www.jebswebs.com
>
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Geof Collis
>Sent: Thursday, November 19, 2009 3:23 PM
>To: = EMAIL ADDRESS 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
>

From: Geof Collis
Date: Fri, Nov 20 2009 2:05PM
Subject: Re: Mobile Devices
← Previous message | Next message →

Hi Henny

Thanks! Now my head hurts. :O)

cheers

Geof

At 08:51 AM 11/20/2009, you wrote:
>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 ADDRESS REMOVED =
> > www.jebswebs.com
> >
> >
> > -----Original Message-----
> > From: = EMAIL ADDRESS REMOVED =
> > [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Geof Collis
> > Sent: Thursday, November 19, 2009 3:23 PM
> > To: = EMAIL ADDRESS 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
> >

From: Geof Collis
Date: Sat, Nov 21 2009 7:30AM
Subject: Re: Mobile Devices
← Previous message | Next message →

Hi Nancy

That is the way I have it set up, is that a problem? I have skip
links to get to the main parts of the site.

I'm just researching this so if there are any good tutes on a proper
layout I'd appreciate them.

cheers

Geof

At 08:45 AM 11/20/2009, you wrote:
>I have a palm centro using a little used browser called Blazar.
>Visually, and I am sited, the content appeared below the nav. It
>looked broken.
>
>Nancy
>
>On Thu, Nov 19, 2009 at 6:21 PM, Geof Collis < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi Randi
> >
> > I'm no expert but they look different, one has to fit into a smaller
> > window, I use a single colukmn layout with everything moved to the
> > left using a liquid layout and remove images, thus the need for
> > proper alt text.
> >
> > cheers
> >
> > Geof
> >
> >
> > At 03:34 PM 11/19/2009, you wrote:
> >>This might be naive, but shouldn't it look the same on an internet
> >>browser? For example, I use the mobile Facebook, and I use it in
> >>Safari not my mobile, and I'm pretty sure its exactly the same. Just
> >>curius.
> >>
> >>*Randi
> >>
> >>Doggy Diaries and other ramblings at:
> >>http://raynaadi.blogspot.com/
> >>
> >>

From: Linda Nieuwenhuijsen
Date: Mon, Nov 23 2009 7:20AM
Subject: Re: Mobile Devices
← Previous message | No next message

Hi Randy,
Not really sure if this is what you need, but maybe you can use this:

http://www.google.com/m


Linda Nieuwenhuijsen
Helpdesk | aandachtsgebied: digitale toegankelijkheid + ict-hulpmiddelen

handicap + studie, expertisecentrum
tel: 030-275 33 00 | email: = EMAIL ADDRESS REMOVED =
woensdag afwezig


-----Oorspronkelijk bericht-----
Van: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] Namens Geof Collis
Verzonden: vrijdag 20 november 2009 0:21
Aan: WebAIM Discussion List
Onderwerp: Re: [WebAIM] Mobile Devices

Hi Randi

I'm no expert but they look different, one has to fit into a smaller
window, I use a single colukmn layout with everything moved to the
left using a liquid layout and remove images, thus the need for
proper alt text.

cheers

Geof


At 03:34 PM 11/19/2009, you wrote:
>This might be naive, but shouldn't it look the same on an internet
>browser? For example, I use the mobile Facebook, and I use it in
>Safari not my mobile, and I'm pretty sure its exactly the same. Just
>curius.
>
>*Randi
>
>Doggy Diaries and other ramblings at:
>http://raynaadi.blogspot.com/
>
>