Rethinking Usability forResponsive Web Design

Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion.This is web design.

- Brad Frost

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.

by Jacey GuldenWeb Designer / Brand Journalist

Get Social With Jacey

Rethinking Usability forResponsive Web Design

Contents

Introduction to RWDResponsive Web DesignDesigning for Humans Not Devices“Don’t Make Me Think”How To Make RWD Usable I. Navigation is Key II. Design For Touch III. Don’t Worry About “The Fold” IV. Mobile First = Content FirstConclusionSources

12345

1213

Introduction to RWDResponsive Web Design, or as they call it in the designer & developer circles, RWD, is without a doubt one of the biggest trends to hit the web design world in 2013. With the proliferation of mobile devices, it has become a necessity for designers and developers to create websites accessible from devices of any size.

Responsive web design solves a number of issues for brands. Designing responsively eliminates the need to create a separate mobile site, saving time and money. It also provides users with a seamless experience across devices, and gives them access to the same information no matter how they access your site. Finally, it keeps brand messaging consistent for any web user.

However, as the RWD trend continues to gain momentum, there are a number of issues that are becoming increasingly prevalent. Many designers have become so obsessed with the trend itself they have forgotten to give critical thought to the effect of their designs on the humans interacting with them. Responsive web design is certainly the future of web design, but it must be approached with the end user experience in mind.

re spon sive de signweb\ri-’spän(t)-siv\ \di-’zīn\\’web\

The approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Designing for Humans Not DevicesA major issue with the RWD trend is that many designers have started creating responsive websites simply because they can. Flaunting ones superb design and coding skills has become a way to show off to others in the community. In such a competitive environment, it’s all too easy to forget about the aspect of web design that really matters, namely the user experience. After all, your website exists for the purpose of a human interaction; it’s not being accessed by a mobile device- it’s being accessed by a real person holding that mobile device.

The visitors who come to your site from their mobile device will generally never know your site is responsive. They won’t have the ability to pull corners and resize windows to watch the content shift at varying screen sizes. All they will know and care about is whether or not it works. If your navigation is difficult to find, if your links are too hard to click on, or if your site takes more than 20 seconds to load, you can say farewell to those visitors.

“Don’t Make Me Think”Just because you’re utilizing the flexibility that RWD offers doesn’t give you the freedom to forget about the basics of web usability that have been governing designers for years. When making the decision to move to responsive design, you have to remember that the best user experience is one in which the user doesn’t notice the experience at all. Anyone considering building a responsive website has an obligation to follow the first basic law of web usability: “Don’t Make Me Think.”

In 2000, Steve Krug introduced this concept in his book, “Don’t Make Me Think: A Common Sense Approach to Web Usability.” His premise was simple: don’t make your users think about your website, and don’t ever let them

question how to find their way around. However, many responsive websites seem to ignore

this sound advice. More often than not a mobile user is forced to ask, “What do I

do next?” RWD is supposed to solve problems, not create them.

So how do designers combat this issue of web usability?

How To Make RWD Usable

I. Navigation is Key

A great navigation system is the foundation of any good user experience. Well-structured navigation helps users get where they’re going and allows them to see where they are at any given moment. But as important as navigation is, many designers struggle with how to approach it on a mobile device because so much about navigating on mobile is different than it is on a desktop.

Here is what you often see when looking at a responsive website on a mobile device measuring 400 pixels wide or less.

While in theory this layout may seem to improve usability, it’s not a great way to approach website navigation. Your visitors aren’t coming to your site to admire the navigation menu; they’re coming to check out the (quality) content. Yes, they’ll need to use the navigation at some point, but it shouldn’t be the only thing they see. Get the navigation out of the way and let users focus on the information they came for.

So what is the solution? When it comes to mobile screen sizes, a great navigation system is one that is there when you need it and hidden when you don’t. There are two good ways to approach this.

Drop Down or Select Menu

Many responsive web designs incorporate the use of a drop down or “select” menu once the screen become mobile sized. This is a very elegant solution because it incorporates the actual interface of the mobile device making it easy to see and click.

Menu Icon or “The Hint and Reveal”

As people interact more with mobile, the “menu navigation” symbol is becoming increasingly familiar. When users click on the icon, a full navigation menu is revealed. Another click and the menu will hide.

Sticky Navigation

Don’t use sticky navigation or a sticky header on the mobile view of a responsive site. It looks great on desktop, but it’s annoying on a phone because it takes up too much space and limits the user’s ability to see the rest of the content.

Some Things NOT to Do:

The fish hook image on this site starts to block the content and make it difficult to read.

The sticky header here takes up a huge portion of mobile screen real estate

that could be filled with content.

Don’t Just Shrink It

There is nothing more annoying than trying to touch a tiny navigation link with your finger. It is impossible for a human hand to click a link with the precision of a cursor. When you cram links too close together, it can easily result in unwanted proximity clicks.

The navigation lists on these sites are huge! And the individual links are so tiny it’s hard to control what you click on.

II. Design for Touch

Touch design really wasn’t something Krug had to worry too much about in his description of usability given that, at the time of his writing, web users were primarily stationed at a desk with a mouse or touchpad. The web used to be controlled by the click of a mouse and directed by a cursor; however, in today’s world of smartphones and tablets, touch is now king.

Building a website that allows users to interact through touch requires special attention and creates a great challenge for designers. They can no longer rely on the precision of cursors or on special functions like “hover” that inform the user when links are present.

Moreover, the idea of a link as an underlined word or phrase has become less useful because it is harder to click. Buttons, forms, and all other elements need to be large enough to interact with, and need to be spaced properly so there is no chance of the user accidentally tapping or swiping an element.

III. Don’t Worry About “The Fold”

The concept of designing “above the fold” is something that was originally developed for newspaper layouts, where the important headlines were placed above the actual fold of the paper, the side most often displayed at newspaper stands.

Many web designers, however, feel that it is something that should also apply to the web. This idea makes some sense on a large desktop or laptop monitor, but the mobile web has no true “fold.” There are too many device sizes out there to try and determine how to fit ones content into the first square the user sees.

Users have no problem scrolling down the page to find the content they want. In fact, it’s one of the first things a person is prone to do when looking at a website on a mobile device. People intuitively know there is always more content to be had by scrolling.

The inverted pyramid of hierarchy still has a place in mobile design, so the most important content should still be placed first. However, whether or not that content is visible the minute the page loads matters much less on a mobile device.

IV. Mobile First = Content First

If you take nothing else away from this eBook, understand this: great responsive web design is born from a mobile-first approach. Mobile first is just what it sounds like- it is the process of designing backwards from the smallest-sized device to the largest. Doing so will ensure your content

properly scales. The big mistake web designers make is designing the desktop site first and then crunching, rearranging, and hiding content as the screen size shrinks. Don’t penalize users for visiting your website on a mobile device rather than a desktop.

Your user has decided to come to your website for a reason. They want information, and they want it fast. They expect relevant and easily accessible content. Too many designers out there are taking content from their desktop sites and whittling it down to the bare bones for someone accessing it on a mobile device. In doing so, they are essentially saying, “this is all the information a mobile user would need to see.”

Responsive web design was developed for the purpose of creating one singular website that can be available to any user on any device. RWD creates a sense of consistency in both content and brand message across multiple platforms - a feat which simply cannot be replicated with the use of a separate mobile site.

It is a good idea to consider a responsive web design for your website, but you must approach this task with caution. RWD is a powerful tool, not an overarching strategy. Take the time to give careful thought to how you want users to interact with your website; think about navigation, content, and overall experience.

In the end, people don’t care whether or not your website utilizes the latest technologies or follows the most popular design trends. What they do care about, though, is whether or not your website works and brings them to the information they desire. Give them a great user experience, and they’ll keep coming back for more.

Conclusion

SourcesEnd User Centric Responsive Web Design, Jon Arne Sæterås https://www.youtube.com/watch?v=32UYNa-Fdgk

Hint and Reveal: Mobile Design Tip to Extend Small Screens, Mobify Blog http://www.mobify.com/blog/mobile-design-tip-hint-reveal/

Responsive Web Design: Missing the Point, Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Responsive Web Design: What It Is and How To Use It, Kayla Knight http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Your Content, Now Mobile, Karen McGrane http://alistapart.com/article/your-content-now-mobile

We Help Brands Form Connections That Matter

At SyneCore, we believe the seamless integration of digital marketing channels fosters deeper and more meaningful connections with the people who matter most: those who find value in your brand.

SyneCore incorporates proven inbound marketing methods into our Integrated Digital Marketing process, which is customized to the meet the needs of each client.

GET SOCIAL WITH US