If you're considering a website redesign or planning to build a website for the first time, it is my hope as a designer that you have some understanding of what Responsive Web Design (RWD) is and why you need it. RWD is an amazing way to design your website that makes it possible for visitors to access your content anywhere, anytime, from virtually any device. Many web designers agree that this is the best method to ensure your website is best suited to the mobile customer.
However, amidst this constant conversation about RWD, it's easy to forget about the basic rules of web usability. Too many web designers out there have become so consumed with responsive design that usability is being sacrificed along the way. It's not enough just to ensure your website is responsive, it also must be easy to navigate on any device.
Let's take a look at some of the basics of web usability techniques for ensuring your site is completely device inter-operable.
Usability Trumps All
First and foremost, you have to always remember that your website exists for the purpose of human interaction. Your website is not being accessed by a mobile device, it's being accessed by a person holding a mobile device - and that person is there for a reason. I see far too many web designers creating über trendy websites that just don't translate well on mobile devices. As a designer in this mobile world, you still have an obligation to to follow the first basic law of web usability: "Don't Make Me Think."
This isn't a new idea; in fact Steve Krug introduced the concept in his book, Don't Make Me Think: A Common Sense Approach to Web Usability, in 2000. Krug warned web designers everywhere that despite the rapidly changing world of web design, one thing would never change: the purpose of websites. Even the most beautiful responsive sites still have an obligation to get the user to the information they desire without making them think. This is the difference between a visitor looking at your website and saying "Oh these are the products" (not thinking) versus "Where do I start? Why do they call it that? Where do I click?" (thinking).
Navigation is Key
In a mobile design, one of the most important aspects of usability is the navigation system. Mobile screens are smaller, and your content will be organized differently than on a desktop, so you need to make sure that your navigation is clear enough to allow your visitor to access the content they came for. Often, simply resizing your navigation links as the screen gets smaller will make your navigation menu far less effective. Small-sized text can be difficult to click and read on mobile devices and will frustrate your visitors.
Designers have found two ways to elegantly deal with this predicament. One method is to introduce a drop down or "select" menu in place of the full navigation menu once the screen size is mobile.
Here are a few examples of this method on a cell phone sized screen:
An additional way to tackle the navigation issue is to place your navigation menu behind a menu icon. As we interact more with mobile, we've come to recognize this symbol as the "menu" symbol.
Microsoft has incorporated this on their responsive site...
...and so has Starbucks:
Both ways can be equally effective, as they make the site easier for your mobile users to navigate.
Another major aspect of web usability and one of Krug's biggest pushes in his book is making things look clickable. On a desktop, this often means having the mouse change from the pointer to the hand when the user brings the mouse over a link. The "hover" function is a huge part of desktop usability, but on a mobile device, we lose this functionality completely! When everything is a touch screen, the user is only able to interact when they physically touch the screen.
To accommodate this huge change, many responsive web designers are making links look much more like buttons. This is also a major trend in App design. If your website requires a great deal of clicks or in this case "touches," you should consider large graphics with wide surfaces and exaggerated shadows that mimic the look and feel of real buttons. This realistic design style will help users easily navigate your responsive website, guaranteeing they never miss a link. These two sites show how giving your links this look can make them appear more clickable:
It's all About UX
Web usability is all about meeting your user's expectations and giving them the ability to find the information they want. One of the main purposes of a responsive website is to mimic the experience of the same website on a desktop. That said, it would be physically impossible to show the user everything they need to know about your site on the first screen of a smartphone.
The notion of designing "above the fold," so-to-speak, is dead. People are accustomed to scrolling on their smartphones and tablets, so it's ok to take advantage of that space. It would be a big mistake as a designer to completely fill the small screen version of your website with micro text and clutter. Notice how the The Next Web has simplified their content on a small mobile screen without sacrificing the look and feel of the website.
Without a doubt, responsive web design is the future, but just because a site is responsive doesn't mean it's good. Too often, designers think about responsive designs merely in terms of the device without considering the way the human using that device is going to interact with it. Your website needs to be both beautiful and useable. Responsive design is the future, but we can't let our infatuation with the design itself sacrifice the integrity and usability of the site.
So go ahead and make your next website a responsive one, but please think about usability - don't make me (or your customers) think!