Making your website responsive ≠ great usability!





Aah – responsive web design – that great technique that allows the layout of a web site to adapt to the viewing environment.



If you view the site on a normal large screen, it looks good.
On a tablet, still looks good.
On a smartphone – still looking good.


None of the page elements are lost, they just get moved, or stacked, without becoming teenie tiny, to fit the screen they are displayed on.

It’s promoted as “providing an optimal viewing experience” and as being “a must for tablets and mobile devices”.

It’s all wrong

Well, my friend, I am here to tell you that as good as “responsive web design” might be, you still need to think about what people use your site for before you make it an “optimal viewing experience”.

Case in point (or “let me give you a real-world example”)

I live in the wops (also known as “middle of nowhere”, “the other side of the black stump”, “the back of beyond”).

That, combined with the fact that the house I live in has no telephone lines, means that I need to get my phone, and Internet, through a wireless broadband connection.

The homepage, of the company that provides this service, is a wonderful thing, and the top of the page displays pictures and promotional messages. If you scroll down the page, there’s more information on the products the company offers, along with a list of FAQs on the right side of the screen.

browser -1429703304606 - full - fade

Under the FAQ’s, the “network status” is displayed. This shows if there are any problem with the networks. It’s tucked down on the bottom right of the page, and you have to scroll down to it. No big deal. If I can view the web site, then I know that the network status is all OK.

If I can view the web site, then I know that the network status is all OK.

The site uses responsive web design. This means that all these page elements “stack” in a way that allows for that “optimal viewing experience”. On a smartphone, all the information is sill accessible. This is a wonderous thing, and butterflies and doves take to flight…

However, consider this…

When there is no problem with network, I work happily away online, and the company’s website is the last place I tend to go – I already have their product.

I want to check on the status of the networks. And do you know where I can find this? At the bottom of the responsive “optimal viewing experience” site.

When there is a problem with the network, I can’t get to anywhere on the network.

So I switch to my smartphone, and use the mobile network to open up their site. Do you think that I am interested in their products and services. No! I want to check on the status of the networks. And do you know where I can find this? Three quarters of the way down the responsive “optimal viewing experience” site. And to get there takes time… Not a lot I admit (when compared to a tree growing), but it still takes time, and makes that user experience a very poor one.

Here’s a image of the web site when viewed on my phone…

When viewing on a smartphone

Does it give me the sensation of an “optimised viewing experience“. No.

Several smart people at this communication company have clearly sat around a table, and decided that responsive web design is what they need. Or a web design company (in this case a “web design, app development and online marketing” company), convinced the them that “a responsive web would be really cool and if they didn’t have one, small puppies would start dying“.

This is where responsive web design is a Fail

Having one web site that is displayed nicely on all devices sounds like a great idea. There is only one set of code that needs to be maintained, and when content is changed, it only has to happen in one place.

The big thing, however, that promoters of responsive web design miss is that people have different needs when they view information on different devices. As shown in the example above.

What should be done.

The number one thing that should be done when redesigning a company website is …

Talk with the customer!

Find out what the user of the site are actually looking for when they view your site.

This can be done through a number of ways:

  • focus groups – talk with the customer
  • personas – create “categories” of users, each with its own reason for visiting the site.
  • surveys – talk with the customer
  • actual historic data – server logs, site statistics, etc. – see what the needs and uses of a customers have done in the past

Note – talking with the customers doesn’t necessarily apply to the “design” of the site, but more to the content used/information required. (Check this article out) 

Other useful articles

  • Meet Content – Web Focus Groups: Know Your Users, Know Your Content
  • Digital Current – Focus Groups: Marketing’s Oldest Technique Adapts To the Digital Age
  • WebPageFX – Website Focus Group Studies
  • Smart Insights – Web design personas
  • Step Two Designs – An introduction to personas and how to create them
  • – How To Create User Personas for Your Website
  • Google – Google Analytics

Create a separate site that is especially designed for a mobile device

Yes, yes, I know that his is going against the current glassy-eyed trend. However, if you consider that needs and uses of smart device users is different from PC users, then it makes sense to have separate sites.

There is no need to make the entire site portable.

Responsive sites are, in the vast majority of cases, thin long versions of the desktop website, with the same amount and type of content and functionality that is optimized for the computer experience, not the mobile device and connection. There is no need to make the entire site portable. In the example given above, as a smart device user, I don’t care about the companies products.

Make a specific app.

Creating an app has its benefits. An app is generally dedicated. Because it is something installed on the device, it can take advantage of the phones hardware. As a result, better functionality.

And its something that the user wants (otherwise it wouldn’t be there).

However, the same principle applies here, as it does for a web site (be it responsive, or separate) – find out what the company wants. The company mentioned in the example above have an app that still does not provide me with the information that I want…the status of their networks.

More resources that are of value:

  • Worry Free Labs – Should Your Company Build a Responsive Site or a Separate Mobile Site?

Test, test, measure and test

During the process of designing the site/app, constantly run usability tests. Get feedback from “real” users. Make sure that what is getting made is what is actually wanted.

After the site/app goes live, keep testing…is it meeting user’s expectations? Is there room for improvement?

Measure the use of the site…there are several measurable metrics that give you valuable information how the site is being used.

Have a look at these resources for more information:

  • Nielsen Norman Group – Articles on Testing
  • Measuring U – Usability Testing & Analysis
  • Nielsen Norman Group – Articles on Metrics
  • Usability Net – Test & Measure



Whether you decide to have a separate mobile site, a responsive site, or an app….do your homework, and make sure that it is offering value to the user.

Otherwise, it’s just a waste of space, money, and time (yours and the customers). 

Useful Resources:

  • 10 PDF reports to learn about usability
  • The Truth about Responsive Website Design
  • What should I think about when working with a developer?


  • Ten tips for great usability on a business website
  • Looks vs. Function (usability, comfort). Which would you choose?

"Why is no one responding to the poll?" … Cause we don't know where the friggin thing is!


Currently in Auckland, NZ, there is a scandal involving the Mayor. I won’t go into the details, except to say that he suffered from a weakness of the flesh, and misused the privileges that come with his position.

This morning I was listening to the national talkback radio station, where the talkback host was discussing his opinion on the Mayor’s activities, and stating that 96% of people want the mayor to resign. This was based on a poll that was running on the radio station’s web site. The host kept prompting people to go and vote. And then lamenting the fact that hardly anyone was.

poll results

After a commercial break, the host stated that to get to the poll, you had to go to the home page of the site, and click on the video of the mayor. This would open a new page, and the poll was there. Then after another 10 minutes the host said that the poll was actually down at the bottom of the page, on the right, nested between a section on “latest audio”, and an advertisement.

This evening I examined the home page. I couldn’t see any video about the mayor. So I tried to find the poll using the site’s search facility. After grinding away for what seemed like a long time, a list of Google sponsored results (that had nothing to do with the radio’s web site), was displayed, and then, after a pause, pages and pages of results… How the fudge could I find what was relevant?

So I did what most people do…I left the site, went to Google, and searched from there. Using the same query, Google responded in a fraction of the time, with, at the top of the list,  the result that I wanted. Namely the page with the poll. And sure enough, it was way down the bottom still showing the same results from the morning.

Here’s a screen shot of the web site…


See how the poll is way down near the bottom of the page?! The yellow dotted line is where I could see down to on my PC screen (1600×900) without scrolling.

Even on a smartphone, the poll isn’t obvious…

web site on a smart phone

The talkback host was using the poll, and the results from it, as a main talking point in his show. And he got quite annoyed when he noticed how difficult it was to find the poll.

I revisited the home page. In the top right of the page was a carousel, showing a repeating set of 5 captioned images. There was a delay between each image.The fifth image was one that led to the page where the poll was. If you didn’t know that the 5th image was the one that you wanted, and you visited the page at the wrong moment, and decided to move on, you would miss it all together.

This raises some important points with regards to usability…

  • Always check to see what your public will see. The host was probably looking at the raw data from the poll, or a dedicated results screen. He had no idea what was on the public-facing web site.
  • Think about the layout of the elements on the screen. What’s important? What’s not? And don’t just think you know what your public/users/etc want, or how they behave. Go and find out. Don’t just ask your colleagues, or the managers! Go and talk with real people! In the real world.
  • Find out what type of audience you have. Why are they there? Are they just browsing, or are they three for a reason (like trying to find the poll that they were told to participate in). Don’t have a flippin’ carousel that people have to sit and wait to see what’s on there. If you do have a carousel, have one that allows the users to see the main items in a summarised form.
  • Find out the environment. For a talkback show, in the morning, most listeners will be travelling to work,or cleaning the house, or looking after little ones. This means that they will use, most likely, a mobile device to visit the web site. if that’s the case, put the friggin’ poll in an easy to reach location!

Of course, these two points do not even cover what is involved with usability. Having had a look at the station’s whole web site, I could mention a whole slew of things that could be better. However…that would need a whole separate blog post…

  • Nothing builds user rage quite like bad mobile usability (
  • Weekly Web Search: Usability 101 (
  • Usability Testing Analysis (
  • Website Usability Review (
  • On the carousel experience (