As the coinage of responsive design (a.k.a. RWD) approaches its three year anniversary, many of us find ourselves reflecting what we’ve experimented with and learned within these few years. Well, for starters we’ve learned that the definition of responsive design is not monolithic, and vis-à-vis adaptive design layouts, we find the crux of responsive design: web design that flexibly accommodates size discrepancies with fluid grids and is not limited to discrete devices. Responsive design challenges us to think flexibly, incorporate our inspiration, and allow for the unforeseen.
Are you considering creating or improving your site’s responsive design? If so, consider these ten simple things…
10. Targeting vital content
What needs to rise to the top of your site? Prioritizing the most pertinent information and fields (a.k.a. vital content for both site owner and visitor) is key, especially for strategic responsive design. Boil your website back down to basics.
A good example of a site that sticks to its priorities is President Obama’s (at least since the last election). Let’s take a look at his current site.
As the width narrows, the “DONATE” button jumps front-and-center with crucial “Log in” and “Create Account” buttons, and “Email” and “ZIP” forms remaining the focal point. Enticingly placed, “The VERY LATEST” heads up a list of easy-to-tap links. Notice how Obama’s site refuses to skimp on emotional design as it condenses: the photo is prominent, the central calls to action are unchanged, the enthusiastic “I’M IN!” is a succinct one-size-fits-all. Above all, Obama’s site stays true to the grassroots organizing and onboarding efforts that have made his campaigns historic.
9. Reining in a brainstorm’s downpour
When brainstorming for a responsive website, you can make vital content your bullseye, strategize for increased conversions, and pinpoint creative solutions. However, when a brainstorm turns into a monsoon, anyone can get overwhelmed. So plan a strategy session that’s destined for success.
While it’s fun (and potentially useful) to speculate on future technologies and media queries your site may encounter, stay focused on the current framework and fluidity you’re working in. Figure out where you’ll start (consider using mobile-first, like Smashing did) and keep track as you organize the site.
Don’t forget to cordially challenge any mobile myths your teammates espouse. Remember, for instance: “Mobile is not lite. Mobile is not less.” Provide the same beloved features as the site’s desktop version while you also spotlight vital content.
8. Sketching in time
“A stitch in time saves nine,” and a sketch (and wireframe) in time may save nine headaches–especially when choreographing a responsive site. Leave your strategy session with concrete plans and group sketches to show for it, putting everyone on the same page. Keep content choreography creative, practical, and cognizant of its logistics and limitations.You’ll also need to decide whether your responsive site will feature a long scroll (which lifts some navigation burdens and certainly can be done right, but also can hazard hellish load times) or a more traditional organization (which runs the risk of mind-numbing navigation). Check out your options and review their pro’s and con’s before you start your responsive navigation route.
7. Designing for digits (and beyond)
Besides fingers, the existing array of keyboards, mice, and styluses (not to mention up-and-coming eye and hand gesture interfaces) provide many modes of input. During brainstorming and sketching, don’t forget to consider current (and some potential) input modalities. For the current concern of touch interfaces, check out this tap-friendly menu.
Float Design’s neat tri-bar toggle menu triggers the user’s intuition to tap. Users with a mouse can precisely select menu items, but why not make selection easier? While a cursor hovering on any length of the menu item’s bar smoothly transforms the text from grey to white, the mobile version (tested on my iPhone) easily accommodates a tap since it also allows selection anywhere along the king-sized bar. A simple — but very effective — consideration.
6. Testing, testing, 1-2-3…
A cutting-edge responsive website needs intensive testing. And in contrast to an “adaptive” layout geared to specific platforms, testing responsive layouts is more challenging. That said, you can still round up all the devices you can get your hands on, perform routine checks in a checklist of browsers and devices, try responsive-specific testing tools, and employ the usual slew of usability testing at your disposal.
As Brad Frost demonstrates in the following screenshot, cross-device issues can lead to unglamorous results. Here we see navigation splitting into various lines on small screens, even though the text may fit an iPhone to a T.
5. Not testing user patience
Regrettable as reality may be, the internet is not as swift or infallible as we’d like, and users need support for outdated browsers and systems. In his Smashing post, Jordan Moore recommends FlexBox, conditional loading, and lazy loading, plus Modernizr for user feature detection.
User patience is also tested by clumsy navigation tools, critical content buried at the bottom of a long scroll, and text overlapping as the screen shrinks (just to name a few of my pet peeves). Don’t forget that a content-heavy long scroll will affect load times, too. Performance optimization for your responsive site counts — and pays off in conversions, profits, and, as Fresh Tilled Soil found out, longer site visits and a decreased bounce rate.
4. Condensing cleverly
Sure, a responsive website needs to be practical. But why can’t it also be fun? Resizing responsive websites in a normal browser can produce mini easter eggs that inspire ooo’s and ahhh’s. Loyal visitors who view your site from multiple devices may also notice your thoughtful nuances. Even super subtle shifts in text and image can be rewarding.
On Smashing, the simple “SEARCH” text condenses to “GO!”, which adds a touch of pizazz and keeps the button legible. (Note: The “!” fits more neatly on my iPhone Safari browser than on my MacBook’s.)
True to its page title’s claim, Stuff & Nonsense’s responsive flow is “fashionably flexible.” While wider sizes of their homepage feature a moving background and a larger cast of characters, as the size shrinks, the cartoons disappear until only one is left standing on a motionless background. Not only is gradually reducing the number of characters practical since it reduces the user’s odds of squinting at a tiny illustration, but it’s also practical for showcasing the artist’s detailed work. Consider creative ways to make a user say, “Hey, that was smart!” and even call a friend over to look.
3. Safeguarding emotions
Fitting a website to variable screen sizes doesn’t mean you have to sacrifice your website’s personality. Obama’s site maintains its touching photo, engaging text, and recognizable style regardless of its size. Other websites, like Float Design, also keep the human element (in their case, a photo) present. Smashing’s transition from a “SEARCH” to “GO!” button even adds some flair as the site shrinks. Stuff & Nonsense maintains its central image (and even the image’s size) while creatively cutting out cartoon characters as the site’s size is reduced.
In the screenshot below, MailChimp’s Freddie is (sadly) banished from the login screen as it gets smaller. However (thankfully), the tiny (and lovable) monkey visage is still visible as the favicon.
Considering emotional design leads us to a key component of your website’s personality: its font.
2. Finessing your fonts
Carefully chosen, expressive fonts can work wonders for your site. Besides considering a mobile-first approach, try out a typography-first/typography-out approach and responsive typography on your responsive site.
As Eliot Jay Stocks emphasizes, content is king, so design your text for easy reading on various viewports. When Smashing’s site was redesigned, they took a typography-out approach, testing tons of fonts and zeroing in on what Stocks calls a “perfect measure: a good average between 45 and 90 characters per line — on all screen resolutions.” Stocks also recommends testing your font in Windows and ensuring that the font hinting is adequate.
1. Forging a flexible future
We can’t plan for all innovations headed our way. But when flexibility is at the forefront of our design strategy, there isn’t much that can faze us. With a clear vision of our site’s purpose and priorities, we can approach new developments with confidence and enthusiasm. Ben Gremillion’s Smashing article puts it nicely:
“It’s impossible to predict what tech revolution will make mobile design feel antiquated, but we can take reasonable steps to ease the transition. Remember that the goal is not just to reinvent what you have, but to see it with new eyes.”
Responding to Responsive Design
With these considerations in mind, take on the challenge of starting or improving your responsive site. Get a global view of your site, its vital content, and its obstacles. Once you’ve taken stock of your responsive site, you can streamline it to improve your bottom line.
Whether it’s summarizing your site’s pages to elevator pitches or no longer making the user hunt for “Contact Us” through a seven-swipe scroll, there are ample opportunities for betterment. Let passion for improvement fuel your responsive design adventure!
How have you responded to responsive design? What are your favorite responsive design tools? Where do you see responsive website design headed? (And say why in your reply!)