Design | December 2, 2016

20 Best Responsive Website Design Examples of 2016

20 Best Responsive Website Design Examples of 2016

It is this time of the year again! We are back with the list of our favorite responsive websites. This year, we found some innovative, inspiring, and creative websites that will encourage you to discover new solutions, adopt out-of-the-box techniques, and test the limits of current technologies.

Need a little refresher on responsive design? Check out the two part series on the benefits and basics of responsive design.

DATA VISUALIZATION

AF&PA

In 2016, The American Forest and Paper Association (AF&PA) was presented with a challenge: to make their Sustainability Report innovative and fresh. AF&PA partnered with Social Driver to develop a digital publication that combined microsite development, UX, SEO, analytics, video, and design.

In order to make this report more engaging, we created a video that was easily shareable across social platforms as well as including social media links at every key points. The report sections all have unique bit.ly links, shareable social graphics, and optimized content to make sure their messages were shared to the right people in the right ways. On the web development side, each story could be shared as it’s own on social media, enticing users to see what else was part of the report. As a result, AF&PA nearly tripled report traffic and the AF&PA digital report was recognized by the Public Affairs Council as an industry leading example of digital publication.

responsive website design

Seeing Data

This beautifully-designed research project aims to show the place of data visualizations. Seeing Data is a dynamic infographic that breaks up typical statistics to users. Through the use of beautiful infographics, you can get top-line information or dig a bit deeper. It also includes resources to help non-experts develop their ability to make sense of the data.

responsive website design

How Big is Snapchat?

Ever wondered how many images are shared on Snapchat every second relative to WhatsApp, Facebook, and Instagram? This simply-designed interactive project allows you to get the scope of content creation on each platform. As the timer ticks up, the total number of images shared per social media grows.

responsive website design

San Biagio Relais

This award-winning website is not just stunning, but also amazingly responsive. San Biagio Relais is a charming hotel in the centre of Orbetello, a beautiful medieval city in Tuscany. Secret Key, a digital agency based in Rome, had a vision for this website. Along with Enrico Ferretti, they launched a digital strategy to enhance the hotel’s visibility in search engines. They ensured that sanbiagiorelais.com was fully responsive, optimized for SEO, and beautifully designed featuring the original animations. The website was developed on customized CMS Open Source WordPress and won multiple awards for its amazing design.

responsive website design

USABILITY

Virgin America

Unlike most airline websites that are known for their usability issues, Virgin America is a great example of usability and accessibility done right. Developed by Work&Co agency, this website allows a clean approach to airplane booking that’s mobile-first and strikingly pain free. The site’s responsive design keeps everything compact and easy to navigate from whatever device you use. Work&Co used minimalistic redesign approach by getting rid of photos and dropdowns and consolidating all content into a single page with generously-spaced buttons. Virginamerica.com has been named the first truly responsive airline website. Kudos to Virgin Airlines for providing great user experience online and offline!

responsive website design

Data Quality Campaign

This spring, Collaborative Communications partnered with Data Quality Campaign and Social Driver to lead the redesign of Data Quality Campaign’s website. Together we developed a friendly, vibrant new site design that is user-friendly, mobile-responsive, and easily maintained by DQC’s staff. The primary goal was to make the information about the policies, best practices, and current use of education data available and understandable to people at all levels of familiarity. The resource library was reorganized so that all types of advocates, from parents to policymakers, could find the information they needed to make education data work for their students.

responsive website design

Big Cartel

Big Cartel’s simple tools and resources allow creative people from around the world to build unique online stores, manage and sell their work, delight fans and customers, and run businesses their own way. This website creates a very simple, straightforward, and compelling experience by leading with a creative headline and a video. Simple navigation and nice examples of sites created with their platform helps to serve as supporting content that tells the rest of the story.

Fig Catering

In order to better capture digital leads, FIG Catering partnered up with Killian Branding to update their 10-year old website. Killian Branding created a new, responsive (3-screen) site that Fig Catering could maintain and edit themselves. Website users can enjoy the quirky humor and service-driven personality of this one-of-a-kind team. The copy was updated throughout FIG’s site to highlight their team’s personality and flexibility. Killian Branding also created a separate simple a one-page website to market FIG’s bar service offerings, FIG Drinks. Cheers!

responsive website design

The Guardian

One of the world’s most widely read newspaper websites, the Guardian attracts millions of unique visitors each year. Guardian’s in-house team was tasked with rebuilding the site to improve user experience on mobile devices. During their initial research, they discovered that time was the main factor that impacts user interactions with content. They also divided their user personas into 3 categories: Commute, users that need a quick update on current events; Work, users that spend significant amount of time on site reading the stories; and Home, users that want to discover something new about the topics they are interested in. With time spent for each of these user types being different, they used this as alongside density of page content to drive their responsive designs. The Guardian put the old design adage “form follows function” to the test to ensure their users experience news as it fits into their day-to-day lives.

responsive website design

CONTENT ORGANIZATION

Benefit Cosmetics

To rebuild their website, Benefit Cosmetics teamed up with Third and Grove agency. The result of this collaboration was a beautifully responsive and seamlessly designed site. Benefit Cosmetics is known for its radiant personality and unique shopping experience, but the back end of its site was due for a makeover. Benefit wanted a platform that would enable its marketing team to manage content easily, handle the peak traffic load of a major cosmetics brand, and allow for heavy integration with an enterprise back end system. From the front-end, website needed to be responsive, flexible, and interactive, and, most importantly, provide a seamless shopping experience. Benefit’s marketing and content teams were finally able to maintain the brand’s unique design aesthetic and voice while customizing content for user needs. Launched in January 2016, the new site was a beautiful blend of content and e-commerce. Drupal handles the content and rendering, while Hybris takes care of the e-commerce and back office integration.

responsive website design

Woven Magazine

Woven is an online publication that celebrates artists, craftsmen, and makers alike. Not only is their website beautifully responsive but it is simple to understand and easy to navigate. Free of distractions like pop-ups and obtrusive ads, this site all about the experience of the content itself. This website embraces simplicity by eliminating or hiding unnecessary elements. For instance, you won’t see the traditional “About” or “Blog” tabs on their homepage, unless you click on a hamburger menu at the top right. Sometimes less is better!

responsive website design

Whitehouse.gov

Unlike most government-related websites, whitehouse.gov has a clean design and  straight-forward layout. The website is constantly changing in order to reflect top concerns and priorities. By running numerous tests, revising, and optimizing, creators of this website have developed a beautifully responsive easy to navigate site. Clear content organization allows users to easily find what they are looking for. There’s even a handy search box for those more ‘specific’ terms.

responsive website design

Minimums

Minimums features the most interesting possessions of the world’s most interesting people. Their website takes an interesting approach (naturally) to the way that they display their content, leveraging a grid-based website design, big typography, and full-width high-quality images. The menu bar is all the way at the bottom of the screen so users are forced to scroll through all homepage content-a unique way to focus visitors on content. High-quality pictures, videos and creative titles inevitably captivate users’ attention and entice them to interact with the content. Minimums website serves as a really nice example for how to properly execute a grid structure while still maintaining a great visual hierarchy in the design.

responsive website design

INTERACTIVE WEBSITES

1000 Chrome Experiments

Chrome Experiments was launched in 2009 to showcase the work of creative coders. 1000 Chrome Experiments celebrates the 1,000th mark and allows users explore all 1,000 in a variety of ways, including a real-time code editor and a timeline with selectable tags. Not only does the project include some gorgeous animations, but it also is marked by excellent performance and a portion of impressive web technologies. Along with Experiment #1000, Google Creative Lab redesigned ChromeExperiments.com using Polymer. It’s mobile-friendly, so no matter what kind of phone or tablet you have, or how you hold it, the site scales smoothly.

responsive website design

Under Armour Women

Designed by the famous independent advertising agency Droga5, this project really reflects the modern age of social media. It is centered around the idea that one of the most famous supermodels lives in a world of contradicting opinions. This website features a video of Gisele Bündchen’s training routine that is spiced up with some innovative WebGL features and live social commentary. The comments vary from “She is too skinny” to “Gisele is a rockstar.” Online visitors are welcome to explore the critical and positive feedback of other users in an inventive way or leave comments for others to see.

responsive website design

Charity: water

This beautifully-designed website does not give you a vibe of a typical non-profit. Multiple visuals, creative copy, and use of interactive web design make this site more engaging and interesting. The design is clean and focused while showcasing various calls to action making the site perfect for a broader audience. Effective use of video and photography captures emotion that causes action.

Prescribe Wellness

PrescribeWellness is a community of over 15,000 pharmacies and world-class healthcare organizations that uses cloud-based platform to help their members to expand services, reach more patients, and improve Star Ratings. Together with the Ueno agency,  PrescribeWellness worked on their rebranding and new B2B and B2C website. They wanted their new site to both help users find pharmacies and explain why they should prefer them over the big chains. Additionally, in order to reach out to potential new B2B clients, PrescribeWellness wanted to create a separate site showing local pharmacy solutions to expand their services, reach more patients, improve loyalty, and streamline operations. The final result was responsive easy-to-navigate website that reflected brand’s personality and provided excellent user experience thanks to intuitive interface and creative colorful videos and animations.

responsive website design

VIRTUAL REALITY

Inside Abbey Road

Inside Abbey Road invites users on a tour around the legendary Abbey Road Studios where some of the most famous soundtracks like Star Wars and Harry Potter were recorded. This fully interactive experience lets you walk through the rooms, read fascinating stories, enjoy entertaining videos, contemplate iconic images, and even play with some equipment. This amazing 3D experience is beautifully designed for easy navigation and seamless interactions.

responsive website design

Experience Mount Everest

Ever wondered what it feels like to climb Mount Everest? Now you can insert yourself into an amazing 3D experience without leaving your desk. This website takes you on a scenic journey scaling over the entire heights of this beast, so you don’t have to risk your life to enjoy amazing views and learn interesting facts about Mount Everest. Easy responsive navigation, beautiful realistic design, and the sounds of blowing wind will make you feel like you are indeed a part of this challenging journey.

responsive website design

Night Walk with Google

Nightwalk with Google takes you on a virtual tour around Cours Julien, a lively neighborhood of Marseille, famous for its unique atmosphere and amazing art. The Night Walk experience is built on top of a variety of Google products, and integrates with several others, to tell the story of your tour guides, Julie and Christophe, as well as the city of Marseille. It features a customised Google Maps integration, built upon 360-degree panoramic images, that allows you to follow Julie’s route with intuitive navigation. Your journey will be enriched with amazing photographs, videos, and interesting facts about this beautiful neighborhood. Bon voyage!

responsive website design

Looking to take your website to the next level? We can help! Contact MarketingTeam@socialdriver.com.

Social Sharing

Options: Facbeook, Twitter, Linkedin, Pinterest...

AUTHOR DETAILS

Options: Headshot, Bio Excerpt, Link to page with more details

By: Irina Anthony
Irina is an intern on the marketing team at Social Driver and a digital marketing student at Georgetown University.
  • Quite good responsive example. I’ll follow the way they have done.

  • You have discussed an interesting topic that every designer to know. Very well explained with examples.

  • Cudest Web Design

    Thank you for sharing this nice post. I like this post. Explanation very well in detail that helps people.

  • thanks for sharing the list.