This is our second article in our series about the ‘end’ of Responsive Web Design. Also read our first article ‘Responsive Design is a poor man’s Content Strategy’.
[lead]
The hottest phrase used by webdesign agencies in 2013 has been “responsive web design”. When you look at a nicely designed responsive website, regardless of what device you use, it looks good. Then again, out-of-date milk can look OK too – until you try to use it – so let’s remember that appearances can be misleading. Anyhow, responsive web design is still the latest fad and if someone mentions that they are re-designing their website then the first question they’re likely to be asked is “will it be responsive?”. In the event that the answer is “no” then one might even anticipate expressions of surprise, or even shock!
[/lead]
Responsive web design is almost magical – the appearance of a site automatically transforms when you look on it on different devices and/or screen orientations. It looks good (or at least OK) on many different devices and is great to demonstrate to management. So, it should be great for increasing conversion rates or providing the best content experience, shouldn’t it? Sadly, the opposite can be closer to the truth.
What exactly is responsive webdesign?
In itself responsive web design is nothing more than a technique that helps visitors to read a website in a more comfortable way on a smartphone or tablet. Simply because the swiping and pinching on the screen is gone. Isn’t that cool? Well, if that is your goal with what you’re doing on the web, to make things simpler to read, it is.
Responsive web design alters the presentation format in relation to the size of the screen. This is handled based on some logic that dictates how the overall size and format should be changed. It can involve automatically removing or hiding certain content to allow space for the remaining content to be presented in a readable manner.
The dark side is that the alteration of the presentation format is steered by certain (often inflexible for content editors) scaling logic and screen size ‘breakpoints’. Apart from screen size it doesn’t consider other device characteristics (e.g. device functionality), or even what content might actually be most relevant for a user in a certain situation. It therefore doesn’t necessarily result in better conversion rates and happier customers. A further consequence is that the user can be forced to re-learn how to navigate the same site if they first use it in a desktop browser and then on their smartphone. Even if one accepts these negative side effects, there is a limit to the range in which one can realistically scale a site –
Responsive web design is, as I have previously dismissed it, a “poor man’s content strategy“, we now can also add that – thanks to the out-of-the-box solutions as bootstrap – responsive is a cheap solution to get your website to look ok on different screen sizes. That is an achievement, but the most important goal must be that users can find and use the content they need, when they need it. Unfortunately, due to its nature, responsive web design inevitably puts the focus on achieving a layout and design that ‘fits’ rather than on what content needs to be there and how it will be used.
Responsive web design fits like a cheap suit
As always, each cheap solution is limited. Responsive web design looks nice, but in most of the times it does not fit snuggly. It’s like ready-to-wear clothing, it looks great on the mannequin, but not when you wear it. You have to keep in mind that responsive web design only takes into account the presentation side of the website, and not the content side of editors or people who deal with any kind of business logic. And these two groups are becoming increasingly influential.
So adaptive web design then?
Some readers may have heard the term ‘adaptive web design’- how does this differ to responsive web design? The definition of adaptive web design comes from Aaron Gustafson. He wrote the book “Adaptive Web Design”. He describes it as interfaces that adapt themselves to the capabilities of the user’s device (both in form and function). Adaptive web design thus moves the focus away from just modifying the appearance of the design to suit the size of the screen. It’s about creating rich, adaptable experiences that tailor themselves to the particular device that you are working with. While responsive webdesign is all about providing the best reading experience that a browser can display.
An example of adaptive web design is the Google search engine. The moment you use this search engine on your smartphone, it also uses your GPS information. If you are looking for a garage or a pizza delivery, you will get this sorted by nearest location. It even says how many miles you are from the location. In addition, the display of the search results is optimized for smartphones.
Combining adaptive web design with knowledge about the user situation
Karen McGrane argues on A List Apart that website visitors want to see the same content when they visit the website via a mobile, and not a stripped down version. Of course you can create a responsive web design which contains the identical content, but what if the website shows a movie of 200Mb? Will you, as a website visitor, still be so cheerful when you are abroad on a slow 3G network and paying per MB?
So, would it not be great if you could have some sort of intelligent solution that would consider the user’s situation? In fact, I think that some combined form of responsive and adaptive webdesign – which involves layout and function -, but also taking into account the supposed behavior and situation of the recipient, would be essential for an excellent user experience.
- Google does this already with the Gmail-product. Once it detects that the website loads slowly, you get to see GMail without all the bells and whistles. Basically a simplified version, but with the essential parts, so that you can read and send e-mail.
- Facebook chat shows you if the person is using a mobile or desktop. And when you chat with someone, you’ll see the location of the person. If someone chats from a moving train or car, you will see that by the constantly changing location per message. It suggests that someone travels, and not sitting at home or office (or other fixed location).
These are all situations where the need of the user may be different. And of course the screen size and the device have a major role in this, but also to detect what is possible given the situation, helps getting a targeted message to the person.
Situational web design
Now let’s stay in the naming pattern of responsive web design (RWD), adaptive web design (AWD), by calling this situational web design (SWD). Which in fact is, adaptive web design combined with knowledge about the supposed behavior and the situation of the user.
[box icon=”angle-down” style=”simple”]
Behavior + form + function = situational web design.
[/box]
Situational web design is to create web interfaces that adapts to the situation of the user, based on pre-formatted situations, both in form and function, which may be real-time. For instance, the capabilities of the device that the user may be using can be more limited than in the most ideal situation based on the situation where the user is in.
[one_third]
[box]
RWD: design based on screensize/windowsize to focus on content being simpler to read
[/box]
[/one_third]
[one_third]
[box]
AWD: design based on the capabilities of devices to focus on the user experience
[/box]
[/one_third]
[one_third_last]
[box]
SWD: design based on the capabilities of devices and situation of the user to focus on the content provided
[/box]
[/one_third_last]
Situational web design that uses real-time signals from the use of a website – as visitor behavior , screen size, location, loading speed, diverse opendata – to provide the right content. In addition, it also uses diverse data about the possible situation of the user. The fact that a user is using a smartphone via a WiFi network, does not mean that he is at home on the couch watching TV. That may be, but it can also be the WiFi network of a train.
But why should you want to use situational web design?
It has long been known that the more you tune the message – meaning content – to the user, you reach a better conversion. For example, it was found that the sale of products increased with 30% when Augmented Reality was used to make the product more tangible.
In my opinion we have to realize that responsive webdesign just can’t cut it. Just look at the example of Google Gmail on a slow network. Google returns to the essence of providing an email platform without bells and whistles, because that is the user experience the user wants. Without asking for it. But someone at Google thought this through. They thought that there could be a situation that a user could have a slow internet connection, but still wants to use the webmail platform.
The only way is to define sets of possible behavior of your target audience. By developing persona’s of your audience and then subsequently tune versions of your website, you develop a website that is focussed on the delivering the right content at the right situation. Situations not only based on the device – for instance Google Glass, iPhone, or your TV -. And thus reach higher conversions.
So now you have a problem, because most implementations are based on responsive web design concepts or even standard frameworks. Without any intervention of editors. An editor has generally no influence on the distribution of the blocks in one of several breakpoints. Out-of-the-box, most content management systems won’t even provide such a solution. An editor can not define how the text blocks are distributed across a screen on a tablet or a smartphone. But even if you were able to offer such a solution, then responsive web design stays a one-size-fits-all solution.
The only solution that would work is one that provides editors with the ability to edit content based on multiple previews. Basically a thin line between the editing of content and the previewing on content based on earlier designed persona’s. Content editing options and previews that are not only looking at a device or screen size, but to a predetermined situation of the user. In fact one of the many user experiences a user can encounter while visiting the website.
The great thing is that opportunities to develop content like sketched above are coming.
Rasmus Skjoldan – UX lead for the content management system TYPO3 Neos – describes the method from TYPO3 Neos in an article in which he states that “preview is not only about devices“.
Pieter De Clercq wrote in a Twitter message “Drupal 8 with content types and form modes lets you configure content input screens”. Also a way to address the situation of putting content first.
Where are we off to then?
We are heading towards a very challenging situation where there will be many devices that we use for reading and accessing content on the internet. Even device types and dimensions that we have not yet thought about. Our daily lives are gradually being filled with different types of interaction with different devices. Website designers need to understand how the daily lives of their end-customers place demands (and open possibilities) in relation to the design of their websites. Content management systems need to have solutions that makes previewing on the basis of persona’s or situations possible. For instance TYPO3 Neos has that possibility already.
Responsive web design has been a neat solution, maybe even great from some viewpoints, but it’s not a basis for addressing the whole user experience where we place content first. Based on our knowledge of the strengths and weaknesses of responsive web design, we now need to take a step forward and work towards situational web design.
(copyright video Rasmus Skjoldan. music by Nicolai Brøndum Knudsen, Editorial support: Richard Whitehand, Usability Partners)
This is our second article in our series about the ‘end’ of Responsive Web Design. Also read our first article ‘Responsive Design is a poor man’s Content Strategy’.
[divider style=”none”]
Ric van Westhreenen
Ric van Westhreenen is a Netizen, has his academic degrees in social sciences and consumer behavior. He has written numerous articles about online marketing, advertising and open source. He is the Vice President of the TYPO3 Association, a non-profit organisation that represents the interests of organisations using TYPO3 software. He is also a serial entrepreneur. ROODlicht being his third company he founded. Ric lives in the Netherlands. [more about me]
