It’s been four years since web designer, Ethan Marcotte, first coined the term Responsive Web Design (RWD) a concept that not only dramatically changed the direction of web design but has become a buzzword of sorts. To this day, many designers are still squabbling about what we mean when we say “responsive” and how responsiveness should be defined.
It’s easy to get distracted and hung-up with terminology. We’ve seen It happen with many terms, Cloud, Web 2.0, HTML 5, to name a few. Designers have been well-versed in the concepts of responsive web design—three technical requirements, fluid grids, flexible images and media queries—but when it gets right down to it, what does responsive mean for designers and business websites?
Sometimes we need to back-up a minute and take a good hard look, where we can see the forest through the trees. In other words, perhaps we should be asking ourselves, what are the goals of responsive web design? Why should we be doing it in the first place?
And, should we be disappointed or encouraged when we read statistics like the recent ones presented by Guy Podjarny—in 2014, only 12 percent of the top 10,000 sites are responsively designed.
In this article, we’ll take a look at four goals of responsive web design:
1. Anticipate and respond to users’ needs as they view websites on multiple devices—regardless of whether they’re looking at their PC/laptop, tablet or smartphone.
Google’s study on the multi-screen world a few years back explained cross-platform behavior— whereby the device a person chooses is often driven by context: the amount of time they have or need, the goal they want to accomplish, their location, their attitude and state of mind.
In the last few years, mobile devices have out-performed PC/laptops taking their place as Google suggests as the “backbone of daily media interactions, serving as the most common starting point for activities across multiple screens.” The range of users’ activities includes searching for info, browsing the Internet, shopping online, planning a trip, social networking, and watching an online video.
While web designers can’t be mind-readers about where or what a user is doing at any given time, responsive design makes it possible for users to move seamlessly from one device to the next—on their schedule. As great as that is, it’s likely that still may not be enough.
Fluid grids, flexible images and media queries may be the three technical ingredients for responsive web design, but ultimately it will also require a different way of thinking.
2. Create websites that provide positive user experiences.
Websites should provide positive experiences for the end user. Some important things to keep in mind:
Users’ Time
While there are many ways to look at what constitutes positive user experiences, web designer, Paul Boag puts it simply, “websites shouldn’t waste users’ time.” Time wasters according to Boag include: poor website performance, not paying close enough attention to the details of the design, and content that isn’t optimized for fast consumption.
Focus on What Users are There to View
Shaw, a commenter on Boag’s article nicely sums up positive experiences via responsive design this way:
A responsive view of the website tailored to make it easier to read that article on a small screen and hiding content that isn’t the primary purpose of my visit (navigation, search box, sidebar ads, basically anything that’s NOT the article) provide a better experience for me. Having that extra content available via a toggle or link keeps the page focused on what most users are there to view.
At the risk of throwing another buzzword into the ring, we need to consider adopting amobile first strategy that keeps the focus on: Accessibility, speed, context, clarity, simplicity, video, readability, action-ability, thumb-friendly, local, conversion-simple, and objectivity.
As Ethan Marcotte stated last year:
When we’re forced to work with a screen that’s 80% smaller than our usual canvas, nonessential content and craft quickly fall away, allowing us to focus on the truly critical aspects of our designs. In other words, designing for mobile devices first can enrich the experience for all users by providing the element often missing from modern web design: focus.
3. Reap the Benefits that Responsive Design Provides to Designers and Businesses
A responsive direction provides benefits to both designers and businesses alike. Five benefits of responsive websites identified by Peter Saunders provide a compelling case for responsive design:
· Retain existing site traffic
· Increase your mobile visitors and desktop visitors
· Save time, effort and money by creating a single version of your website
· Increase conversions rates leading to an increase in business profits
· Widen your competitive advantage
4. Keep Up with the Ever-Changing Trends in Technology
Reminiscent of the ways that it was difficult for many print designers years back to make the transition from a print-only design world to creating pages for online audiences, designers today will need to continue to adapt to the rapidly growing mobile landscape.
Key Take-Aways
Ethan Marcotte’s concept of responsive web design revolutionized a whole new generation of websites when he encouraged designers to think beyond the desktop, and showed designers how to craft beautiful site layouts that anticipate and respond to your users’ needs.
If you’ve never seen“A Dao of Flexibility,” Marcotte’s game-changing presentation, the video will be well worth your time.
Ethan Marcotte: A Dao of Flexibility – An Event Apart from Jeffrey Zeldman on Vimeo.
End users have become multi-screeners with mobile devices serving as the backbone of daily media interactions, and the most common starting point for online activities.
In addition to fluid grids, flexible images and media queries, websites should provide positive user experiences with attention to respecting users’ time, keeping the focus of what they’ve come to view.
Responsive web sites are a win-win-win for designers, end users and businesses.
As impressive as 12 percent of the top 10,000 sites being designed responsively in under four years, we still have 88 percent to go. So, keep designing, responsively!
Designers shouldn’t get complacent. Responsive design may meet today’s objectives but if we’ve learned anything over time it’s this—the only constant is change. As designers we need to keep our skill sets up-to-date and be ready to embrace new design directions as they unfold.
Tell us about your experiences. If you’re a designer, what have your experiences been like with responsive web design? Business owners, does your company have a site that is responsibly designed?