May 29 2013

10 Things to Consider When Designing a Responsive Website

shutterstock_132322802-01

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 10 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.

Obama_example_new

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_example_right

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.

BradFrost_example_notfullycropped

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.

Take, for example, the following change in text from Smashing Magazine’s site, and the change in image from Stuff & Nonsense.

Smashing_example_right

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.)

StuffandNonsense_example

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.

MailChimp_example

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 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!)

About the Author:

Julia Larson is a freelance copywriter & copyeditor at digital-telepathy. When not on a quadrilateral device, she’s on her yoga mat, a hike, or a cooking spree. Connect with her on Google+ and Twitter.

Leave a Response

5 Responses

  1. Jun 07 2013
    Anne Leah

    These are really cool things to consider and very helpful. A website with fancy but unresponsive design is still useless and a waste of money. That’s what Website Design Companies should know and always remember.

    • Jun 11 2013
      Julia Larson

      Hi Anne, Thanks for your comment! I agree that responsiveness is certainly key to a useful and a well-worth-the-money website :)

    • Apr 10 2014
      Afzal

      I am a website designer, i used to designed many websites with separate mobile website version… But now responsive grids make my task easy and more efficient because one responsive website can mane all screen resolutions simultaneously..

  2. Mar 05 2014
    konrad

    ive just lost my cold eye apparrently after viewing all the amazing visuals

  3. Apr 10 2014
    Afzal

    Adoptive layout has been buried, and Responsive Grids have took place of Adoptive Fixed width layouts…