In this blog post I want to talk a little about alternative content for mobile devices and different solutions for the various display problems that a designer is faced with. Depending on what industry your website is aimed at, you may find that they get a reasonable amount of views on mobile devices such as iPhones & iPads, BlackBerry’s, Androids etc. If you don’t know how to find out what devices your site is being viewed from, get Google Analytics installed on your site. Once you’re set up, login to the account, Open your site’s report, Click visitors on the left hand menu, Then mobile and mobile devices. If you are receiving a high number of visits from mobile devices it may be time to start accommodating for your mobile visitors.
There are many ways you can code a site to appear differently for different devices, some are quickly implemented and more direct, like serving a different site dependant on the mobile device the viewer is using. Others require a lot of thought and a complete website overhaul. This approach would require creating a single fluid design, that scales down perfectly from a high resolution monitor, to a small resolution mobile device, and covers everything in between. To read more on “Responsive webdesign” take a look at THIS blog post by Smashing Magazine.
I’m going to look at 2 of the more simple solutions, serving a completely different site, and serving a different CSS file for mobile users.
How to serve a different CSS file for mobile users
With a few simple functions we can target mobile devices by detecting if the browser window is 480px or less in width. This dimension is the width of an iPhone flipped on its side. Due to the wonders of Internet explorer, it has been reported that versions 6 and 7 can sometimes ignore the following max-width declaration so we need to wrap our css in a little “if not IE” function.
<!--[if !IE]>--> <link media="only screen and (max-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css"/> <!--<![endif]-->
The above code will load the iphone.css file if the browser window is less than or equal to 480px. This statement will also return true if someone resizes their browser window to less than 480px. This isn’t a problem though is it will just re-display the content nicely for the smaller browser window. So to clarify, using the above code after the declaration of your normal CSS files, we can specify a completely new set of styling for the iPhone and other smaller devices. Alternatively you can use “display:none;” to hide any sections that aren’t relevant to mobile viewers or take up to much space on mobile devices.
How to serve a completely different site for mobile users.
The other option we have is to check what device your visitor is using when they enter the site, and re-direct them to a subdomain or different folder containing a site designed specifically for mobile devices.
This method is PHP based and requires a script from http://detectmobilebrowsers.mobi This script is free to use for non-commercial use but has to be payed for if you are using it commercially. There is also a guide on the above link that will tell you how to install the script. Its pretty simple, we just need to upload the mobi-detect.php script to your server either at root level or in a folder we can access.
The first step is to design a new site no larger than 480px wide for your mobile viewers, and put this on a subdomain, or in a folder on your server.
The second step is to include the mobile_device_detect.php script at the top of your homepage, this needs to be before any other PHP.
<? require_once('mobile_device_detect.php'); mobile_device_detect(true,false,true,true,true,true,true,’THE LOCATION OF YOUR MOBILE SITE',false);} ?>
You will need to change “mobile_device_detect.php” to the location of your script. If this is not at the root level but in a folder, it may be something like “includes/mobile_device_detect.php”. You will also need to change “THE LOCATION OF YOUR MOBILE SITE” to the folder or subdomain that you created your new mobile site in. For example http://www.yoursite.co.uk/mobile.
That is it! When a user views your site on a mobile device they will now be redirected to the location of your mobile site.
The above methods are very quick fixes to the many problems of your site not displaying correctly on mobile devices. I feel that this will be a never ending battle as new devices are released with different screen sizes, shapes and resolutions. The long term fix to this problem is to create a fully fluid design that can scale gracefully from your largest browser window to your smallest device. Unfortunately this is very time consuming and may not be necessary if you are getting very low viewing figures from mobile devices. This is why the above methods have been supplied as a short term fix.
If you would like more help on mobile web design please feel free to comment.