Diverting to low res page for mobile devices

[audiopro]

I am setting up a page redirect to a low res version of a web page suitable for a mobile device, is this the best way to do it?

<script type="text/javascript">
if(screen.width < 600){
window.location = "[URL unfurl="true"]http://www.lowresversion.co.uk";[/URL]
}
</script>

Keith

http://www.studiosoft.co.uk

 

[feherke]

Hi

No. The best way is to not create separate URLs for the same content. See the Responsive Web Design article on A List Apart about how to use CSS3 Media Queries to change the page design according to the display circumstances.

Note that mobile browsers are pretty new, so they all handle media queries well.


Feherke.

 

[audiopro]

I can't help but think that this 1 size fits all idea is great in theory but not in practice.

I find it interesting that while more and more people are browsing the internet on tiny screens, TV screens are just getting bigger and bigger.
The content of the 2 sites would have to be different. The full size version contains several Flash applications which are over 1000px wide so clearly they could not be used on the mobile version.
The client wants the mobile site to be much smaller with a couple of info pages and a contact form.

Keith

http://www.studiosoft.co.uk

 

[feherke]

Hi

Well, then the use of your script sounds justified. But depending on what exactly you want to detect, it can be weak.

If you want to detect mobile devices, the new iPhones will not be caught by that resolution test :

iPhone 4 and iPhone 4S has a resolution of 640 × 960 at 326 ppi

An alternative is what Google seems to do : if the [tt]Accept[/tt] HTTP request header contains "application/vnd.wap.xhtml+xml", then serves the mobile-specific version. For those using a browser which has that MIME type hard coded ( older Uzbl had it ), this method is quite irritating. Not sure how reliable this test is, just mentioned it.


Feherke.

 

[ChrisHirst]

http://css-tricks.com/6731-css-media-queries/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[spamjim]

That js will not allow you to offer a link on the mobile version to access the full size site. That is a preference that some users may want.

The js will just kick the user back to the mobile version unless you also add a check for a cookie for site preference.

 

[spamjim]

If you want to detect mobile devices, the new iPhones will not be caught by that resolution test :

Quote (Wikipedia article on iPhone):
iPhone 4 and iPhone 4S has a resolution of 640 × 960 at 326 ppi

I have not tested with js but the CSS from this guy works on the higher resolution iPhone 4 by only specifying 480px. I believe the iPhone 4 uses some pixel doubling in its math to accommodate all the web sites already defined at 480px.

http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/

More about pixel doubling for iPhone 4:

http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

 

[feherke]

Hi

Possible. I did not really understood to whom they intend to lie with that fake pixel thing.


Feherke.

 

[darryncooke]

Why not just make a separate site for mobile then mobile.url.com. Redirect to that if the device is mobile?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[audiopro]

I am still no wiser as to which is the best method. JS will ork with most mobiles but not all.

As for

Why not just make a separate site for mobile then mobile.url.com. Redirect to that if the device is mobile?

How do I detect it is a mobile?

Keith

http://www.studiosoft.co.uk

 

[feherke]

Hi

How do I detect it is a mobile?

One way is to use a huge regular expression generated by Detect Mobile Browsers.


Feherke.

 

[darryncooke]

^ What he said.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[audiopro]

Looking at that, the default is the mobile version and it is only redirected if none of the detect statements are true.

Out of interest .......
If I made the default version the mobile one and redirected if the screen res > 1000px, would that work?
This would still fall over if the visitor has JS turned off.

Seems that with every advance of technology there has to be a similar level of jiggery pokery to make it work properly.

Keith

http://www.studiosoft.co.uk

 

[audiopro]

The other problem with these pesky mobile devices is how much they are zoomed. Is there a suggested font size or is that another bit of guesswork?

Keith

http://www.studiosoft.co.uk

 

[feherke]

Hi

No idea if this answers anything, just remembered it while reading your question and it presents normalization solution for text sizes. A Pixel Identity Crisis by Scott Kellum.

Feherke.

 

[audiopro]

Thanks fot that interesting article but as you suggest, it doesn't really answer anything.

I don't really see why this is so complicated, it is surely a matter of being able to read text on screen. From the examples I have seen, the maximum number of characters across the screen at a readable size is about 40.
This does of course look ridiculous when you zoom in but I suppose we have to start somewhere.

Keith

http://www.studiosoft.co.uk

 

[audiopro]

I have been looking for an emulator but none of the ones I have tried so far has actually worked, anyone know of a working one?

Keith

http://www.studiosoft.co.uk