Great Responsive Web Design is a Matter of Process
Design for Content not for Devices.
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 for many designers in the past is no longer necessarily the best approach.
What is interesting about RWD is that it has actually brought the world of web design backwards. The web is inherently fluid. 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. With the current focus on producing something that is not fixed width and that works on multiple devices, why do so many designers insist on using a dated process that contradicts these goals?
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.
Adaptive Web = Adaptive Process
When you approach a responsive website design, you cannot approach it in the same way that you would a normal non-responsive design. I believe that web designers today lack a clear process for creating responsive websites. I know how difficult it is to let go of past processes that have worked for so long, but in this new age of adaptive design, it has become imperative that we designers become adaptive as well.
Rethinking process will make your responsive web designs more effective and less time-consuming.
Thinking about a 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.
1. Develop a Design System
Designer Laura Kalbag talks about a creating design system as a way to focus on the seperate components of a responsive design without getting caught up in the details of the layout. Since 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. Kalbag says, “This helps prevent us getting stuck in the rut of the ‘Apple breakpoints’ of mobile, tablet and desktop.”
Kalbag is basically suggesting that we toss out the old notions of layout design and instead focus on designing the particular “feel” of our site as it will translate 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.
Thinking about visual design (or the content) first, you are building on the elements you know versus the unknown variable of device width. RWD is all about providing a seamless user experience across platforms; this can be done effectively with an approach that builds on these elements of a design system.
2. The New Mockup — Content Hierarchy
I definitely think that there is still a place in the web design world for wire framing and static mockups. However, I believe that in the case of responsive web design, it is no longer practical or necessary to create a mock up of how the design will look at certain device sizes.
A few out there have suggested a new approach to mockups (and I love this idea) that is content-based rather than layout based.
By nature, a mobile device is narrow, and it forces the content to be presented in a single column. The linear display caused by this narrowness forces the 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.
A Few Tools
There are hundreds of tools out there than can be used to assist with RWD; here are two resources to help specifically with a new responsive-centric workflow.
1. StyleTil.es
One great tool available to help designers with the design system portion of this new work flow is StileTiles. These are a new type of design deliverable that focuses on the elements of the website like font, color, and sample UI swatches. Style Tiles are a useful way to communicate what a website design will look like without getting bogged down in details about specific layout.
2. Priority Guide
Here is an example of a priority guide developed by Drew Clemens of Spark Box. A priority guide like this is a great way to show how content will be prioritized on a site. No visual design decisions need to be made at this point, because the placement of content on the guide communicates hierarchy rather than aesthetics.
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 responsive web design. 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.
Sources:
Drew Clemens, “Design Process in the Responsive Age”
Laura Kalbag, “Responsive Day Out”
