Adapting content to your users device

By

I know what you’re thinking: Whatchu talkin bout fool? What I’m talking about is changing content based on the device of your user. What I’m not talking about is moving stuff around with css and using display: none a bunch. I’m talking about never showing the content or showing different versions of content to mobile devices or tablets. I have seen this idea mentioned very briefly in many posts, but nobody seems to tell you how or why to actually do it. So that’s what I’m going to try to answer here.

Why does nobody talk about this?

Why is it that you never hear anything about this idea in detail? In every article about responsive and adaptive webdesign this area is always mentioned, but never with more than a few sentence. I actually see this as more important than many of the other elements of adaptive design and it is actually not all that complicated to do. But let’s first define what it is.

What is it

When I’m saying changing your content, I’m not talking about changing ALL your content and replacing it with something else. I’m talking about adapting your site to be the best it can be for your visitors device. This might be by changing the content of your footer and sidebar or removing a video for devices that can’t play that video (If you are visiting this post from a mobile you will right now not be presented with a sidebar at all). Or have you ever been on a ecommerce website where they had that silly hover zoom plugin on their product pictures, that is really not needed on a mobile phone at all. And unless they do something, that javascript file is still being loaded, and wasting your time.

How to do it

Changing your content can be done in two ways, either by using client-side scripting(This would often be javascript) or by using serverside scripting(php, ruby, asp and so on). While I love coding in javascript I do find that finding a serverside solution to this problem is the best approach, time-wise, because it gives me the best chances of not loading in any unneeded content on devices where I don’t really have an idea about their connection speed. This solution can be done with ajax and javascript only, but I’m just not as comfortable with coding that, and I would worry about googles ability to understand my desktop version, which would also have to be loaded with ajax. To be honest this is just personal preference and you can absolutely code a great solution i javascript.

Here is my small php example (And no I am not a programmer, so this could be leaner and prettier):

if (!isset($_COOKIE[“state”])){
$useragent = $_SERVER[‘HTTP_USER_AGENT’];
if (preg_match(‘/iPad|kindle|tablet/i’,$useragent)) {
$instate = “tablet”;
}
else if (preg_match(‘/android|avantgo|blackberry|blazer|compal|elaine|fennec|
hiptop|iemobile|ip(hone|od)|iris|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i’,$useragent)){
$instate = “mobile”;
}
else {
$instate = “desktop”;
}
setcookie(“state”, $instate, time()+3600);
$state = $instate;
}
else {
$state = $_COOKIE[“state”];
}

(This is of course a very limited list and it doesn’t take android tablets into account, but there are many lists around on the internet which you can use. I’ve scaled mine back a bit for this example).

With the code above you get a variable which you can easily use to limit the content delivered to a particular device type.

if ($state != “mobile”) {
// you can add content that doesn’t get loaded on mobile devices.
}

And really that’s all you need to change around your content. Of course if you want to show some new content you will need to be able to save that data in your CMS, if you are using wordpress there are countless amounts of plugins that will let you save new data.

When to do it

So how much should you use this? If I’m on a mobile surfing around I’m looking for short and specific information often. So you can choose to load in a box with the contact details prominently on the page. You can also change your copy to suit a mobile experience, give me a new headline, a shorter description and smaller images if you like. You can also remove most of the stuff in your footer and sidebars. In short remove the secondary elements and optimise the rest. Personally I think it’s great for disabling loading of some heavy javascript files and maybe using it to display smaller or bigger images.

So there it is, a small intro to the world of device-specific content. I am by no means a specialist on this subject so please give me some feedback. Would you use this or not? Are you doing it a different way? Please share 🙂




3 Responses to “Adapting content to your users device”

  1. Terry Van Horne Says:

    Great points Thomas and sometimes it does make a lot of sense to put some thought into what actually works in what device. Responsive design is cool in it makes things more useable across a wider audience so therefore is less work, but, I agree often that just isn’t enough if you are focused on total user experience.

  2. Doc Sheldon Says:

    Great stuff, Thomas! I like the server side solution, especially, but I’m considerable less able than you when it comes to coding.
    Anything that eliminates unnecessary file-loads is a plus.

  3. Thomas Fjordside Says:

    I like, the server side solution too. But what I like more is the idea of thinking and testing conversion rates on a device basis.

    That’s also one of the reasons why I chose to make a cookie in my example, that makes it quite easy to make sure that someone gets the same headline on their second visit. Granted I don’t have much experience with the way cookies work on mobile devices.

    But I’m really glad you liked it and thanks for the comments.

Respond!