The contents of this Discover More piece were adapted from the ebook, “Rethinking Usability for Responsive Web Design,” by Jacey Gulden of Synecore Technologies
A successful web design is one that comes from a carefully planned approach. But when it comes to creating a great responsive web design (RWD), the tried-and-true process of web design that has worked in the past is no longer necessarily the best approach.
Before RWD, web design was all fixed-width layouts and containers; it was a flexible grid system. Then someone got the idea to add tables and boxes, and we ended up with an internet full of completely inflexible web pages. Website designers need to retrain their brains to stop focusing on widths and start focusing on fluid elements.
Hanging on to older processes that include creating static wireframes and pixel-perfect mockups for design is counter-productive to creating a great RWD. Instead of spending time designing for specific device widths and getting hung up on the precise elements of a web design, designers now have to focus on designing for content. When you approach a responsive website design, you cannot approach it in the same way that you would a normal non-responsive design. Rethinking process will make your responsive web designs more effective and less time-consuming.
RWD Workflow
Now that I have you thinking about making your design process more adaptive, let’s take a look at what a new workflow approach to RWD might look like.
Develop a Design System
Because responsive design is so fluid, it doesn’t make as much sense to worry about layout as it does to worry about single design elements. When designing for a multiple-screen environment, it’s important to divorce yourself from the old notions of layout design and instead focus on designing the particular “feel” of the site as it translates across devices. Visual design is made up of typography, color, shapes and other imagery. When used consistently throughout a design, these elements create a natural cohesive feel even if the width of the device changes the overall layout of the site.
Mockups: Take a Content-Based Approach
A place still exists in the web design world for wire framing and static mockups; although with RWD it is no longer practical or necessary to create a mockup of how the design will look at certain device sizes.
It is instead better to take a content-based rather than layout based approach to mockups.
A mobile device is typically narrow by nature, which often forces the content to be presented in a single column. The linear display caused by this narrowness in turn forces the web designer to give priority and hierarchy to certain pieces of content that is much less apparent when a site is viewed on a wider screen. Because of this, many designers have started experimenting with a new kind of mockup that involves content hierarchy rather than design layout. Designers give numerical values to elements of content that correlate to where those items might appear in a stacked column layout. This way, design is less constrained, but the content is always presented in the best way possible.
How To Make RWD Usable
Navigation is Critical
An intuitive navigation system is the foundation of any pleasant 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.
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 becomes 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 on.
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.
Some things NOT to do:
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.
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.
Design for Touch
The Internet 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 presents a 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 on. 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.
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 think above the fold 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.
The Bottom Line
Responsive web design is a new, uncertain territory for everyone, so don’t be afraid to try new things – curiosity is essential to RWD. Teach yourself a few new tricks, and keep experimenting. Whatever you do, remember to adjust your process to account for adaptive design. After all, if you hope to solve new problems and create great designs, you’re going to need a new approach.