It’s hard to believe, but ArleyM.com is over eight years old, and on its ninth iteration. Since using this CMS I haven’t actually worked on the site itself until recently when I decided to make my foray into mobile web.
Mobile web surfing is on the rise, even my analytics show that 5 – 10% of my site traffic is on itty bitty screens! My job as a web designer and my trusty Android phone have thrust me deep into mobile web consciousness. Naturally I was soon in a quest to make a mobile friendly version of my own site.
WordPress has a lot of plugins to help you switch your theme with mobile detection, but I wanted to give the user a completely different experience with different content than my “desktop” site. I imagined networking with someone in person; and exchanging URLs. When someone looks up my site on a device, I would think it would often be to complete a simple task: to jog their memory, to network or find my contact info. It just seems less likely that the majority of my mobile audience are going to dig deep into my seemingly endless blog. I wanted to give that mobile user the succinct user experience that would be most convenient. A lot of this inspiration about the context of my traffic came from Cameron Moll’s book Mobile Web Design.
As with anything I’m sure device detection can be done in several different ways. After doing some research and some trial and error with other scripts and plugins I found Andy Moore’s Detect Mobile Browsers PHP script. It will detect the device type and can do some simple redirect and cookies. It wasn’t perfect though.
The site said the script can handle the “View Desktop” logic and overwrite the cookie, but it wasn’t working for me! I wanted redirected users on mobile to be able to still visit my desktop site; but the detection and redirection was too good! Using a little PHP before my doctype in the header.php include I was able to add this functionality myself. I never write code off the top of my head, so this is a rare moment indeed:
<?php
if(isset($_GET['switch'])){
setcookie('switch',$_GET['switch']); // set a cookie
}
if(!isset($_GET['switch']) && !isset($_COOKIE['switch'])){
require_once('/server/path/arleym.com/mobile_device_detect.php'); //Andy Moore's script
mobile_device_detect(true,false,true,true,true,true,true,'
http://arley.me',false);
}
?>
The only thing to add now to make it work is adding the link to the mobile site. On Arley.me I added the “View Desktop” link and I appended a ?switch=0 to the end of the href. When the link is followed the above code looks at the URL; if “switch” has a value it sets a cookie, otherwise if there’s no cookie and no switch value, it runs the device detection and redirects if applicable. Cinchy!
This is just one of many ways to deal with this. I hope my little code finagling helps someone out there.
Incidentally http://arley.me gets almost three times the traffic of ArleyM.com (from people going there directly). It’s featured in a couple galleries for small vcard type sites.
It was built with newer devices in mind like iPhone and Android, but I’m slowly trying to make it more accessible in my mythical “free time”
Arley – you’re a doll! Thank you!! Works great! It was impossible to find a solution anywhere to override/ignore Andy’s script when linking to the desktop version of a site. I was just about to give up when I came across your blog.
Thanks again!
Nicole
I seaerchd a bunch of sites and this was the best.
This method works great – I use it for http://www.digisolved.com and it works great!
Hi There,
I cant get the code to work on my site can you help?
Send me an email
I can take a look. Please post your link / the code you’re using. If you’re more comfortable with electronic mail use (one word) my friend arley at arley em dot com.
I’m having the same problem with the redirect loop from our .mobi site. I’ve added both the Moore script to my WordPress theme directory, and added your code to the header locations, but it still loops back to the mobile site.
Almost forgot, the mobile site is: http://cannonsatellite2u.mobi
Can you email me the PHP you have on the desktop site? One word email address of my friend Arley at the domain of this site!
Brilliant solution; love it! The redirect loop that cursed me is now vanquished. Thanx for your insight and effort!
Looks like really great code. I am just not sure where to put the ‘?switch=0′ code.
Like this?
mobile_device_detect(true,false,true,true,true,true,true,’
http://arley.me?switch=0‘,false);
Can you point me in the right direction?
Thanks so much for your help!
Nope! That variable is passed through the link from your mobile site to desktop like so:
View Desktop Site
The expertise shnies through. Thanks for taking the time to answer.
TroZwI dsnxfziqzort
Arley,
An interesting area indeed and one that I’ve played around with in my “weekend projects”.
I used WURFL first and then the more reliable DeviceAtlas service for device detection for that key redirection purpose as well as extracting some lovely extras around device attributes.
For instance, you read a lot about advice to store different sizes of images up front for the various uses but I’ve always thought that’s a little like too much like hard work. With PHP’s GD library, you can dynamically resize optimally based on the device resolution and cache the resultant image for similar requests from similarly grouped devices. This has allowed me to reuse the ‘desktop’ assets that a web author/editor has already uploaded but have those assets more optimally delivered on mobile devices.
I’m very interested in how there will be solutions to this challenge and others in the mobile space.
Dan
Dan! Awesome stuff here. I’m just starting to read about those two UA detection services… As a skimmer I wish they were a little more up front with cost. I guess I’ll have to hunker down and actually read.
Do you have a link you can share for your PHP GD Library method?
Things may of changed since I was playing with it but WURFL didn’t seem reliable with its detections and burnt me a couple of times. The basic license from DeviceAtlas seemed much more reliable and the cost was ‘ok’.
Regarding the image manipulation, the inspiration and credit goes to the guys at concrete5.org (Open Source CMS that is miles better than using WordPress as a CMS in my opinion). Within the core product, is an image helper class that is used to generate thumbnails that uses the GD library methods. I simply re-purposed this for my ‘bigger boy’ task beyond thumbnails and tweaked a few things on the way.
To summarise though, there are various GD library methods in use within the helper depending on image type etc. so I would encouraging downloading the code and looking at the ‘create’ method in the core /concrete/helpers/image.php file as opposed to me pasting the lot here.
http://www.concrete5.org/developers/downloads/
Regards,
Dan