"The design is not the website." Learn that. Repeat it. Say it to yourself over and over until it's ingrained in everything you produce as a web developer, designer, copy writer or producer. "The design is not the website." "The design is not the website." "The design is not the website."
Got it? Say it again.
"The design is not the website."
Now think about a responsive website. What should change in a responsive site when the user is viewing it on a desktop PC compared to a mobile phone? Is it just the design?
Rememeber our mantra?
As a technology-driven solution to getting page elements to work better on mobile devices responsive design is absolutely brilliant. A responsive mobile website is usually a much nicer experience than a desktop website rendered by a mobile device. Simple things like text sized more appropiately for a smaller screen makes a huge difference to the usability of a site.
The problem with responsive is that it fails to respond to the needs of the user. It only responds to the needs of the device.
The design is how the user discovers and users content. The design is the actions that the user can take. The design is how it works.
User scenarios are a best practise way to explore how a website ought to work for each of the different types of typical user it's likely to attract. By imagining how people will want to interact with the site, mapping their individual needs, and looking at the points where each user is congruent with the others we can easily see what is important. But further than that, we can also build a heirarachy of which features are most critical to building a delightful experience for each type, and promote that particular content to that user.
It's important to remember that the aim of a website is to give every user the best possible experience - even if that isn't the same experience for every user.
To explore this idea let's look at an example, the website of a major supermarket:
- Alice uses the website for our supermarket from a desktop computer.
- Bob uses the website from his mobile device.
- Chas is a worker in one of the stores.
- Diana is a website administrator.
- Edward is the developer.
- And so on...
In this example we're interested in the difference between how Alice and Bob might use the website.
When Alice visits the website she is likely to be doing some online shopping, perhaps checking her rewards account, or finding the opening hours of her local store.
When Bob visits the supermarket website from his mobile phone it's rather more likely that he's either looking for up-to-date information on special offers or looking up a store he hasn't visited before. The likelihood that Bob is doing any shopping is much less likely, although, obviously, this is something that would need to be tested using analytics on the website access log.
In an ideal world the responsive website for the supermarket wouldn't just switch from three columns to one when viewed on a phone, but it would change the front-end content from a promotions for the online shop to details of in-store offers and a map of the user's nearest stores. It would also rearrange the navigation to put in-store information and the store finder first, and make other small functional changes to improve the user experience to more closely match the user scenario of a mobile user.
In this simple example it's obvious that the design of the website, it's look and feel, and all elements would be the same across all platforms, but that their positions in the website hierarchy would necessarily change to reflect their relative importance to the different users.
Responsive design can go much further. A website that responds to the the device and to the user's most typical scenario is just the beginning. Using front-end scripting we can do much more. Modern smartphones give developers access to programming interfaces that can detect the user's time, location, the ambient light level of the environment, even the device battery level. Imagine a website for a coffee shop that responds to a user who's nearby during opening hours and using a device that's almost out of power. We could pop up a message suggesting "You're just around the corner! Why not pop in to the shop and charge your phone while you grab a coffee?" Who could resist?
The notion that the design of a website responds to the device that's being used to access it works very well, but using responsive design to only change the aesthetic look and feel of the site isn't enough. Design is more than how something looks. The way the website works also needs to change.