Finding the Best Responsive Design Workflow
It’s often been said that designing responsive websites should take a mobile-first strategy. The basic thinking behind this is that creating a design for the smallest screens forces the designer to prioritize content, and cater to the strengths of touch screen devices. Given the undeniable importance and market share of mobile devices, it seems like a good idea to start with a mobile-centric design, and scale up to designing larger screens afterward.
This workflow is commonly referred to as “progressive enhancement,” which ultimately serves as direct reaction to what’s called “graceful degradation,” which is the desktop-first, mobile-last strategy. So which is the correct solution?
Let’s back up a second. Responsive web design is the process of creating a fully-scalable layout that will look and function perfectly well on any number of devices. In the past, we had “desktop websites,” and “mobile websites,” the latter of which detected your device and served up an abbreviated version of the website optimized for a smaller screen. But with the proliferation of tablets and large phones, creating different sites for each device became unwieldy. Responsiveness addressed this issue by allowing a design to re-flow as necessary, based on the width of the browser.
Naturally, this complicates the workflow of those tasked with creating such websites. It requires everyone involved to consider “how will it scale?”
From the standpoint of the visual designer, who creates the look and feel of the website (or application), creating static designs becomes a significant handicap in the process. Under ideal circumstances, a designer would create responsive prototypes, with the issue of mobile or desktop-first layouts becoming irrelevant. But this assumes your designer is also your front-end developer, and a great deal of coding time could be wasted if the client is unhappy with the visual aesthetic.
So let’s look at a more likely scenario. Let’s say the designer and developer are two separate people, and the designer needs to get client approval before the project moves into development. Should the designer create desktop views first and scale down to smaller screens, or should he or she opt for a mobile-first workflow, starting small and going big?
In truth, it really depends on the project. If this is a website or app that caters to mobile users, start small and go big. Take advantage of touch-screen potential, and get creative with menus and filters.
Having said that, and if the site isn’t catering to any specific device or audience, I would say starting big and scaling down is much, much easier, and yields far more impressive results.
Let me explain. By starting with a larger canvas, it allows the designer to really explore the space, and try interesting things that wouldn’t typically work on a smaller display. As a designer, it’s your job to anticipate scalability, not only in browser size, but in ever-changing content. So when you design a site for a 1280x800 pixel laptop, think:
How will it work without hover states? Where will the filter go? How will the table shrink on an iPhone?
This may be my personal bias, but subtracting design elements, or streamlining them for narrower screens, is much easier than going the opposite way, and adding elements that didn’t exist before.
And to revisit my earlier point, if the website or app is specifically catering to a mobile audience, then mobile-first makes perfect sense. Scaling upward to laptops and desktops, as difficult as that may be, is a necessary step to include a secondary (or tertiary) set of users.
As with any user experience design, know your audience, and address their needs first. And bear in mind that interactive design has to be flexible, so keep your workflow just as fluid.
Originally published at GraftonStudio.com.
