Blog

Where we discuss our work, thoughts, and process

Three Ways to Target Mobile Devices

Webkit Mobile Site

We recently launched a beta version of a New Media Campaigns mobile Webkit site.  If you're reading this post from an iPhone, iTouch, Palm Pre or Android based phone you're seeing it right now.  Josh Lockhart did the design and frontend code for the site, a topic he will be covering in a post later this week.

This post discusses how to target mobile devices and show them either different content, different stylesheets or even redirect to a mobile URL. Ideally, the check would be done for ALL mobile webkit platforms, not just the iPhone.  It would be a shame to leave those Android/Palm out after developing a pretty mobile site. So without further ado, here are the methods:

1. Checking User Agent Serverside

When a browser visits a site, it sends a string describing who it is called the user-agent string.  It varies depending on the browser and platform.  The user-agent string for key mobile webkit browsers are:

iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iTouch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3 
Android - Mozilla/5.0 (Linux; U; Android 0.5; en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3
Palm Pre - Mozilla/5.0 (webOS/1.0; U; en-US) AppleWebKit/525.27.1 (KHTML, like Gecko) Version/1.0 Safari/525.27.1 Pre/1.0

Unfortunately there is not a good way to check for mobile webkit in general.  So each of these needs to be checked for in a case by case manner.  Here is some rough php to do that:

if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
	){
	// Send Mobile Site
}

We did this type detection since we wanted to send completely new templates for pages at the same URL.  This worked nicely with our CMS since both the normal frontend and the mobile fronend were updated from the same database.  We could also use this technique to redirect to a mobile URL if that is how we wanted to present our mobile site.

2. Checking User Agent Clientside

This method simply uses javascript to check the User Agent after the page has loaded.  The obvious downside is that it first requires mobile visitors to load your standard site which might be fairly heavy.  It is fine to use in a pinch where you are not able to modify server-side code.

Here is some javascript to detect the mobile webkit browsers:

if( navigator.userAgent.match(/Android/i) ||
	navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	){
 // Send Mobile Site
}

You can use this method to either redirect to a different site, send a different stylesheet or whatever else you may need to do for a mobile site.

3. Use CSS Media Type

If your HTML doesn't need to change between your mobile site and standard site, it may make more sense to send a different stylesheet just to mobile browsers.  There are a couple of ways to do this, but using the media type capabilities of CSS may be the way to go.

To load an entirely different stylesheet, use the media attribute when loading the stylesheet:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Alternatively you can just add some declarations into your existing stylesheet:

@media screen and (max-device-width: 480px) {
    /* mobile declarations */
}

This method is a little dangerous since it depends on the screen resolution to send the stylesheet. A mobile site is generally not different from a typical site because of resolution alone; it is also different because of the physical screen size of the device.  For instance, the new Verizon Droid has roughly the same screen dimensions of the iPhone but a resolution of 854px by 440px!  Serving a mobile site to this device makes sense even though it has such high resolution.

If you've done a mobile site and have a perferred method be sure to share the site and the method in the comments.

Comments

's avatar
clippingimages

Very nice article. Very informative . Thanks to sharing this nice post.

's avatar
Brent Morris

My favorite method for targetting multiple mobile sites is:

- a foundation of solid HTML for simple browsers that dont support javascript and css (older phones, browsers and devices)
- a simple stylesheet for the browsers with basic css support
- progressive enhancement as described in this article (http://www.alistapart.com/articles/testdriven) to determine if the user is viewing on a desktop and serve a hifi version with javascript enhancements and a complex css layout
- if worth the effort, do a iphone/touch-centric specific css sheet

's avatar
Chapel Hill Web Design

The "only" keyword in your link declaration is meant to block out older browsers, but in fact it blocks out current versions of Opera Mobile and Safari Mobile.

This is my current declaration, modified from David Storey's at Opera:
<link href="/mobile.css" media="handheld, handheld and (max-device-width: 480px), screen and (max-device-width: 480px)" rel="stylesheet">

The trouble is that you must reset all your widths, floats, and padding, because many mobile browsers read screen stylesheets as well. Of course you can help by avoiding using px for width and padding in your screen stylesheet but that's another story.

src: http://my.opera.com/dstorey/blog/media-queries-and-handheld-stylesheets

's avatar
Stephen
This works for many mobile devices... you can serve different versions of your css file with mod rewrite

in this example we are just redirecting matched css requests to a blank file but it could be a different version of your css


RewriteCond %{REQUEST_URI} ^/css/addon(.*)$
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteRule ^css/addon(.*)$ /disabled [NC]
's avatar
Alex Kloss
Sorry, but not every android phone has "android" in navigator.userAgent.

Touch luck!

Greetings, Alex
's avatar
chris
The syntax for the clientside is wrong. There's an extra || operator after the last operand.
's avatar
Adeniyi Moses Adetola
Help just when I needed it. Thanks
's avatar
Almedia
I'm using php code below - it works good!

<?php<br /> if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Android') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Blackberry') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'OperaMobi') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'IEMobile') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Jasmine') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Fennec') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Blazer') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Minimo') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'MOT-') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Nokia') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'SAMSUNG') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Polaris') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'LG-') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'SonyEricsson') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'SIE-') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'AUDIOVOX') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'mobile') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'webOS'))
{
header('Location: http://m.almedia.com.ua/');
}
?>
's avatar
mauritius web design
Great article learn something new today thanks to you bookmarked and share this post
's avatar
Hannah
Hey, great post!

I was looking for a solution to adapt special css to devices with different screen dimensions - without having to use javascript.

Thanks a lot!!
's avatar
Gabriel
Thanks a lot for this post, it really helped me a lot!

Greez - Gabriel
's avatar
fry
This php code is simpler:
if (preg_match(/iPhone|iPad|Android|......./, $_SERVER['HTTP_USER_AGENT']))
{
// some code....
}

Leave a comment

Real Time Web Analytics