Responsive Web Design: Trends and Examples

You’ve probably heard quite a bit of buzz surrounding Responsive Web Design (RWD). In fact, RWD was the number two top web design trend in 2012, according to .net magazine. So what is responsive web design? And what does it mean for your brand and your customers?

Responsive web design is a new approach to web design. Responsive web design enables web designers to build a single website to serve to all kinds of devices, from desktop computers to smart phones, laptops to tablets. Simply put, a responsive website adapts to whatever size screen it’s being displayed on. This allows you to maintain one theme and provide one consistent look and feel. So, no matter how visitors access your website, “media queries” can be used to figure out what resolution of device it’s being served on.

 Mobile Marketing On the Rise

As more and more people go mobile, having a responsive web design is crucial. According to a Comscore report, the U.S. saw a 55% increase in smartphone subscriptions in 2012. This amounts to 98 million smartphone subscribers. And it represents nearly 42% of all U.S. mobile users. TechCrunch agrees, saying that 2013 is the year that mobile devices will overtake desktops as the dominant global Internet platform.

Still not convinced? Consider some interesting statistics on mobile usage. An April 2012, Pew Research report found that 88% of U.S. adults own a cell phone of some kind. 55% of these cell owners use their phone to go online. And 31% of those cell phone owners use their cell phone as their primary device for accessing the Internet. Bottom line? Cell phone users require all of the same functionality on mobile devices that they would otherwise get on a desktop. If you’re still craving more data, check out this treasure trove of mobile usage stats.

 We Live in a Multiscreen World

Google has come up with some equally interesting research. For example, 90% of people move between devices to accomplish a goal. Whether that’s on smartphones, PCs, tablets or TV. So there’s even more proof that web designers and programmers need to take into account that their clients’ websites need to work equally well on small (cell phones), medium (tablets/computers), and large-sized screens (TVs).

 Responsive Design Affects Content, Too

And it doesn’t end there. When developing your content strategy, you need to consider how you use text, images and videos across these platforms. Further, your content needs to be focused, persuasive and on target. So leave the “fluff” on the editing room floor!

 Ecommerce Sites Benefit Greatly From Responsive Web Design

Online merchants are finding that a responsive web design can help drive mobile results. ShopWiki, an online shopping site that helps users find the best prices and deals, reports that mobile clicks jumped 24 percent following a responsive design revamp of its site. And it’s not just ecommerce and news sites that have taken a responsive web design approach. For WordPress sites, nearly all of the newly released themes come fully mobile-optimized.

10 Examples of Great Responsive Web Design

Time | The goal of Time magazine’s site redesign was to give all readers the same exact experience, so the design is kept clean and minimal to ensure the same experience across all platforms.
Designed to Move | Designed to promote physical activity, this site has a simple yet effective design across all platforms.

Starbucks | Starbucks debuted its responsive design in March 2012, featuring an easy to navigate design and strong brand identity. Starbucks.com is now much easier to use on a wide range of devices and screen sizes.
Disney | The developers hit it out of the park with Disney’s new responsive design, launched last October. They were able to prevent major scaling of Disney’s content, meaning that large videos and other interactive features didn’t lose their size when viewed on tablets and cell phones.

Nearly all of the newly releasedWordPress themes come fully mobile-optimized

A Book Apart | A Book Apart, a website that sells paperbacks and ebooks for web designers and programmers, is a great example of an ecommerce site that takes full advantage of responsive design.
Microsoft | Microsoft was one of the first big tech companies to embrace responsive design. The company has made a huge leap with their contemporary site design.

Crayola | Crayola’s site demonstrates how content and navigation can be simplified on a mobile device, while keeping the important information right at the fingertips of the mobile user.
Build 2012 | BUILD is an event for hardware and software developers. The site is sparsely designed, and resizes in interested ways.

Pediatric Specialty Services for Kids | This pediatric care site is visually appealing across all platforms and makes it easy for parents to access information across all devices.
Tattly | Tattly, a seller of “designy temporary tattoos,” features a simple yet graphic-rich design that showcases the wide range of tattoos for sale on their site.

Want to learn more about Responsive Design? Read Ethan Marcotte’s book, Responsive Design. It’s a must-read for anyone interested in how responsive design will continue to change the web design industry.

Finally, if you’re not sure whether or not your site should be created with responsive web design practices in mind, give us a call.
We love to chat web, and are always happy to discuss your options.

Lori Nelson-King
Copywriter, Savy Agency