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

Discussion in 'Web Design and Development' started by Makosuke, Apr 2, 2010.

  1. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #1
    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?
     
  2. CavemanUK macrumors 6502

    CavemanUK

    Joined:
    Jun 29, 2006
    Location:
    Rhyl, North Wales
    #2
    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

    Code:
    
    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.
     
  3. Makosuke thread starter macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #3
    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...
     
  4. kkat69 macrumors 68020

    kkat69

    Joined:
    Aug 30, 2007
    Location:
    Atlanta, Ga
    #4
    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.
     

Share This Page