Not All Responsive Web Design Is Created Equal

Jacey Gulden
Jacey Gulden Web Designer, SyneCore Tech

Posted on February 22nd 2013

Not All Responsive Web Design Is Created Equal

responsive-web-designIf 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: 

 

         synecore select menu        smashingmag select menu

 

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... 

 

           microsoft icon before          microsoft icon after

 

...and so has Starbucks:

 

          starbucks icon before          starbucks icon after

 

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: 

 

           fork-button          editorial button

 

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. 

 

thenextweb-full  thenextweb-after 

 

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!

Jacey Gulden

Jacey Gulden

Web Designer, SyneCore Tech

Representing the new breed of uber-brand journalist, Jacey recently graduated from Indiana University with a BA in Journalism which included a focus on web and graphic design; she also earned two minors in Theater and Psychology. She uses this unique mix of communications experience and web development skill to design functional websites for SyneCore’s clients. Constantly seeking new sources of inspiration, in her free time Jacey can be found perusing Pinterest and interpreting life through Instagram.

See Full Profile >

Comments

Kent Ong
Posted on February 22nd 2013 at 10:37PM

Hi Jacey, I agree. It is about human rather than machine. Most web designers build responsive website from techical point of view to suite multiple devices rather than human perspective.

oldfox004
Posted on February 23rd 2013 at 1:14PM

Thanks Jacey for this very informative post. I was looking to understand about this new design that has taken the content sites by storm. And your illustrative examples will certainly help me to look for the right new design for my site.