Which is better: Mobile-specific site vs. selective stylesheets for iPhone

[Makosuke]

Trying to do an iPhone/smartphone-optimized version of a site to improve the experience with it vs. the desktop version.

But I'm torn between whether I should create an entire mobile version (m.domain.com or whatever), such that anyone who wants can select the mobile version and those who don't can use the full one, even on handhelds, or if I should go the @media rules route to serve CSS to just those browsers with a device width of 480 or whatever.

What do y'all do? Recommendations?


Also, while one can currently specify max-device-width: 480px or something similar, isn't that going to fail on a Nexus One or Droid, both of which have over 800px max device width? Obviously I'd want android-based devices to get the mobile stylesheet, but I don't think want to go and give people with tiny netbook/ancient desktop screens (and modern browsers that recognize media selectors) the mobile version. And once, presumably, uber-rez phones start shipping it's only going to get worse using max-device-width.

If max-device-width in inches is supported that'd be a nice workaround, but I don't know if that's supported at all, and I don't have an android device to test with. Anyone tried?

 

[CavemanUK]

well my approach for my site was to detect whether it was being viewed on iphone/ipod touch or normal site and include a relevent page template.. etc

note: i did this with php.. pretty sure you could do something similar with javascript or .htaccess

function mobilecheck() {
	$found = false;
	$checkforipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
	$checkforiphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
	
	if ($checkforiphone == true) {
		$found = true;
	}
	
	if ($checkforipod == true) {
		$found = true;
	}
	
	return $found;
}


if(mobilecheck() == true) {
     include "../index-iphone-layout.php";
} else {
     include "../index-web-layout.php";
}

i did this for every page.. time consuming but worked so much better and easy to read.. also, any code that could be used by both pages (calculations or mysql queries) where done in index.php before calling the page layout.

 

[Makosuke]

Yeah, explicit browser sniffing is something I really, really want to avoid--it's just too fragile when it comes to supporting other mobile platforms that you didn't plan for (Android, Symbian, DS, etc).

I did discover something interesting after some experimentation: Safari, Firefox, and Opera 10 do accept widths in inches for @media queries. Which would, in theory, allow one to specify a minimum physical device size to get the full stylesheet, which would prevent you from getting the wrong stylesheet on a small device with a very high-resolution screen.

In actual testing, what I got was that all three browsers assume that any desktop Mac screen is 96 ppi. Meaning that on my old-school Studio Display the measurements are exactly correct. On my MBP, which has a 116 ppi screen, the measured sizes are off by that proportion.

As for the iPod Touch, based on how it responds to max-device-width, it appears to believe it has a screen 3 1/3 inches wide at maximum. Which is kind of a weird number; that works out to exactly 144 ppi, which doesn't appear to have anything to do with the actual size of the screen (163 ppi) or a desktop.

Which is interesting--anybody have any idea where that number might have come from?

I haven't yet experimented with setting an explicit viewport scale via a meta tag, although in theory that shouldn't have any effect on the device-width property.

So now I'm wondering if Android browsers respect this... seems likely, and if they accurately report an approximately correct device size, then this seems like a realistic way to create a selector that'll get both an iPhone/iPod and a higher-resolution Nexus One without sucking in the iPad or netbooks/small monitors.

Anybody with an Android phone care to test this? My initial Google searches come up with zilch.


Of course, I'm still left wondering if an auto-sniffer is even the way to go; some people might want the mobile version for whatever reason (for example, the Wii browser, so it's easier to read on a TV, or people who just prefer a stripped-down interface), while others might want the desktop version even on a tiny screen. No type of browser sniffing or clever @media query is going to deal with that case...

 

[kkat69]

I do specific sniffing in my WebAppFramework template but I'm using a viewengine class that runs without the need to specifically call the check on every page.

The only drawback is maintaining several sets of files that are almost identical to functionality... BUT that is also the best part of it.

If it's an iPhone it uses my iphone template and specific pages.
If it's an iPad it'll use different pages and also more rich pages since I can fit more on the screen so they're laid out differently
any other POS smart phone gets the default mobile template.

I'm looking into a more generic format where as all versions use the same style/class names but the css files are different. That will eliminate most of the redundancy and unique pages will be kept separate per device.