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.
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…
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
- JohnHaydon.com – 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
Conclusion
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?
would follow a path and suddenly find myself in a totally different area, feeling disoriented. Fortunately with the use of a good compass and a ball of string I had been unravelling as I went along, I was able to find my way back.
Note – artist’s rendition