Tag Archives: responsive

Servant of many masters – how do you create content for all digital devices?

I’m fascinated by how we use our different devices these days.

I was in a café the other day with a friend of mine and her phone rang. She pulled it out of her bag to answer it, but didn’t put it to her ear. She just plugged in her hands free.

And no wonder, her phone was huge.

I asked her about this and she told me that she mainly used her phone for reading and sending emails and texts and scanning online articles.

Her phone isn’t really a phone, it’s a mini tablet that just happens to take phone calls.

More recently, I was out and about with Mr Man and we were discussing an email he needed to send. He said he didn’t want to do it until we got home, as he hated the tiny keyboard on his phone. His phone is much smaller than my friend’s one and he mainly uses it as, well, a phone.

He does like to scan Facebook and read his various hobby sites on his phone, he just doesn’t like typing on it.

My phone is about half way between Mr Man’s and my friend’s in size and I know I bounce from it to other devices depending on what I’m doing:

Phone for quick scans – emails, Facebook, LinkedIn, the Weather App, etc – and oddly enough phone calls and texts

Tablet for surfing the InterGoogle, checking IMDB and reading things that interest me.

Laptop (with separate large screen) for doing serious stuff – like writing this blog.

I haven’t turned the TV into a web device, yet, but I am sure it is only a matter of time. Not sure what I’ll use it for, but I’m guessing on-demand movies.

Of course I’m an amateur compared to my step-children. The munchkins would be crippled without their iDevices. Particularly the girls! Low hanging fruit when it comes to disciplining them.

Snapchat, Instagram, Facebook, You Tube…you name it and they are glued to it as often as we let them.

OK, so they’re on iPads, so it’s all about Apps, but they do stray onto the InterGoogle now and then. They discovered the website version of Facebook the other day and couldn’t believe the amount of information on the page!

And that is the thing that got me thinking about this post. If people constantly jump from phones to tablets to laptops or even desktops, how do we build our websites to make sure they get a satisfying experience across the board?

We know that phone screens are small, unless you’re my friend in the café, so we can’t pack all the widgets and functionality into a phone screen that we might on a 1920 x 1080 desktop screen.

We also know that mobile phones are slowly taking over as the device of choice for online stuff – this year 33% of all web pages served globally were viewed on mobile phones (thank you Statsita.com).

So what do we do?

One approach is to design the whole web experience – desktop, laptop, tablet and mobile phone – to suit the smaller phone screen. I looked at some examples of this approach in my June post Banner-style home pages – beautiful design or annoying barriers and I wasn’t all that keen.

It’s the easiest solution – one site design, one set of content to maintain, but does it meet your site visitor’s needs?

I think of how delighted my step-daughters were when they discovered the Facebook website, having previously only used the App. It was a bit like Christmas, they kept discovering new things they’d never seen before.

Imagine your customers having the same reaction when they view your website on a computer and a screen larger than their phone or tablet. You could reward them for coming to your ‘full’ website by giving them useful tools or information.

Of course that’s a bit of a two edged sword, you don’t want your mobile customers to miss out on great content and functionality, just because they’re using a different device.

Many of the studies I’ve read suggest that the smaller the device, the more simple and task oriented the site should be. Having started using an iWatch recently, I can understand the logic in that argument.

As Jakob Nielsen and his team have pointed out in many articles, the small screen and large ‘click area’ of mobile phones do lend themselves to simpler designs and streamlined tasks. A point they also make, that resonates with me, is that the mobile phone has a major role as a time waster – giving you something to do while waiting for that bus or business meeting.

Recent studies are showing mobile phones stacking up the numbers as the device of choice when making online purchases. My query there is how much research do customers do on other devices before they make that purchase on their phone. I’m also curious to know what kinds of items we purchase our phones vs other online devices? Do we make smaller, trivial purchase on our phones, but keep the bigger ones on our laptops or even take them offline?

It pays to do a bit of research to find out what people are more likely to want to do on each type of device and then tailor your different web offerings to match.

A daunting task? Yes, but didn’t we get into digital because we like a challenge?

Of course you could always use a responsive design.

One set of content, with <div> tags reformatting it to display nicely on each device. This is very ‘in’ right now. I do it myself on my site.  It works quite nicely if your content is simple and renders nicely on a mobile – i.e. it doesn’t create a page takes up 20-30 ‘screens’ on the phone.

But I don’t think it solves the whole problem, it addresses how to lay out the content but I’m not convinced that it deals with the questions of how much complexity – tools, widgets, and more detailed content – is easily digested on a mobile device vs a PC.

I think we need to put thought, research and usability testing into identifying the different tasks, and the different content and functionality to satisfy those tasks, customers want to perform on each type of device.

Mobile devices haven’t been around very long, and they are constantly changing. I believe we have quite a way to go before we can confidently know what to serve to a phone vs what to send to a larger screen.

Who knows, maybe the whole industry will be overtaken by the ‘next big thing’ and we’ll be creating ‘websites’ that are served directly to a customer’s optic nerve?

Dog with leash in its mouth

Obedience training for your website


Responsive templates – are they really the answer?

There’s been a lot of talk lately about responsive design. Do you know about ‘responsive’? It’s the magic new template style that displays your content beautifully regardless of the device your customer is using.

It works a bit like this:

You have one website and one set of content. No more mobile sites. The templates for your site detect the device your customer is using to view your site and rearrange the content and resize the images to match.


For example

Your site on a desktop might have a three column layout with large images, local navigation in the left column, ads in the right column and content in the middle.

Your site on a tablet could be a two column layout, still with large images but maybe the navigation is now “hamburger menu” style (I’m hoping we all know that a hamburger menu is the wee three-line icon that, when touched, expands out with a site menu).

Your site on a smart phone screen would only have the one column, smaller images and the faithful hamburger menu tucked away as an icon in the top right hand corner of the screen.

Although your site looks quite different on each device, the core content remains the same. So an article that appears in the middle column of your desktop site, is now (unchanged) in the main left hand column of your tablet and is the sole visible content on your smart phone.

Neat isn’t it?

But is that really enough?

Do we really use content on our phones, tablets and computers in the same way?

I’m a bit skeptical about the idea that the same content works equally well on desktops, tablets and smart phones. Like most digital natives these days, I have the trifecta of a laptop, a tablet (totally in love with my new iPad) and a smart phone. And I definitely don’t use them in the same way.

All the usability testing I’ve conducted, or watched, tells me that most other people also use their different devices in different ways.

Using smart phones

If you’re anything like me, your smart phone is never more than a few feet away from you. It’s the first thing you reach for when you want to know something quickly.

“What’s the address of that restaurant we like?” Google it on your phone.

“Are there any ATMs around here?” Check your bank’s app on your phone.

“When is the train due?” Look up the schedule on your phone.

I use my smart phone for quick tasks, requiring very little time or attention from me. Also, my phone is good for location-based searches, using the GPS on my phone


My tablet is usually nearby but I only pull it out if I need a bigger screen or a keyboard (I have one of those covers that doubles as a keyboard, SO cool). The tablet is great for reading on the train, watching movies (good old YouTube) and general web browsing. It is also nice for writing emails, as long as I have a surface to lean on.

I find I spend longer on the tablet than I do the phone. I reading is much easier and I’m prepared to do more of it. The phone is very much get in, do a task, get out. The tablet is a bit more of a leisure time device.

Laptops and desktops

And then there’s the laptop. Now I am lucky. I have a solid state drive on my laptop, so it starts quickly, but it still only comes out when I want to get serious.

When I get the laptop out (and yes, it lives in a laptop bag, in a cupboard, so I really am “getting it out”) I have a specific task in mind and I’m willing to put some time into getting it done.  Recent tasks on the laptop were:

  • planning and booking an overseas trip
  • applying for jobs (I am a contractor, so this is a fairly frequent occurrence)
  • shopping around for car insurance

These were all fairly time-consuming tasks with a high level of commitment on my part. I was fairly determined to see them through, so I sat myself down away from other distractions and focused on each task.

This seems to be one of the distinctions between PC/laptop use and use of tablets. Many people pull out their tablets while watching television, sitting on the bus or train or chatting in a café. PCs and laptops aren’t quite as portable (yes, I know laptops are portable, but not nearly as much as tablets – none of this is exact you know) they usually sit on a desk or other dedicated area.

I find my attention span and concentration on my task is much higher when I’m using my laptop or a computer at work (call me Pavlov’s dog if you will but I am trained to take computers seriously).

So what’s the answer?

So what does all this have to do with responsive templates, I hear you ask? Good question.

I don’t think rearranging content to fit into different sized screens is the be-all and end-all of device-specific usability. I think there is more to making content work well from device to device than just layout.

To make our site content work for our customers, across all devices, we need to understand what tasks they do on each device and what detail they need for those tasks. We need to tailor our content to match those tasks and how they differ depending on the device being used.

Leaning on responsive templates to solve the “device problem” is thinking only about layout. Tailoring the layout of your site, without modifying the content will result in either:

  • smart phones pages that are hideously long, forcing customers to scroll (or swipe) through unending screens of content to find (or try to find) what they’re looking for or
  • desktop pages that are so light on content that they tell the customer nothing.

And when you think about it, I’ve only looked at the three main types of device. I haven’t even looked at smart TVs, game consoles or smart watches. Imagine trying to write the same content to fit on that spectrum of screen size.

Responsive templates are a really nice way of cleanly reorganising the structure of your site so that it displays nicely on the devices our customers use to view our web offerings. But I don’t think they can totally replace m.sites or tailored content.

If you’d like some help shaping your site content for all manner of devices, have a chat with F-Two consulting. We can help you teach your website how to talk your customers’ language.