Posted: March 5th, 2014
Psst: Thanks for checking out our Responsive Web Design Examples! We’ve created a new list for 2015 we think you’ll love. Check it out!
For the third straight year, Social Driver has returned with our list of favorite responsively designed websites. We’ve grown the list from 20 companies in 2012 to 50 in 2013 and finally gathering 65 companies this year, exemplifying the increasing popularity of this design trend. We’ve researched hundreds of companies from a variety of business sectors, including healthcare, non-profits, travel and more! Interested in a specific category? Click the links below to hop to that section.
Not only is the Lakeland Regional Medical Center website beautifully responsive but it is simple to understand and easy to navigate. The website segments its audience beautifully and the responsive features are expertly executed so a patient on any device can quickly find information. If website design wasn’t enough, the center employs videos and interactive campaigns making their site a fantastic example of how medical centers all over the country can get with the digital future.
SilvertonHealth.org is a great example of a responsive site with well executed, strong visual components. This website boasts expansive imagery across all breakpoints and handy graphics that showcase the most important information first. A great feature is the emergency room wait time widget featured front and center. These well thought out design elements showcase a great understanding of Silverton’s audience. Great job!
One of the best things about this site is the navigation. Too often, sites designed for multiple generations end up taking on complex navigation schemes with multiple drop down menus across numerous areas of the screens and sometimes hidden from view. While this approach is great for certain millennial-focused websites, it can loose larger populations. Health Innovations Ohio.com uses a wonderfully simple navigation bar that even the least tech savvy can understand. The design is clean and focused while showcasing clear calls to action making the site perfect for a broader audience.
Rarely do websites translate scrolling banners into success responsive elements. Legacy Health, a Portland and Vancouver-based hospital clinic, utilized playful colors and minimalistic but powerful content that also read well on your mobile device. Need to request your medical requests, pay your bills or find where a hospital may be located? Legacy Health’s navigation makes it easy for patient’s to find the services they will need the most.
Health information can be hard to digest but the smart folks at the Kaiser Family Foundation have made these digestible for their users. Through the use of beautiful infographics on their homepage, you can get top-line information or dig a bit deeper. We also love the “Trending on KFF” feature which highlights all the popular topics you might want to check out.
This free download for teaches you how to plan measurable social media campaigns. It applies to any organization, but it’s specifically created for nonprofits.
The National Gay and Lesbian Chamber of Commerce has advocated and supported LGBT businesses for over a decade. It recently re-launched its website and I’m a big fan of the newfound combination of visual simplicity and functionality. Not only is the website fully responsive, it allows prospective businesses to complete their entire certification online, streamlining NGLCC’s main service and saving hassle for its members.
Like most Unions and Associations, IATSE has many resources to offer its members throughout its website but its design neatly arranges its news, education, forms and social media feeds for swift navigation. Representing the people that work tirelessly to make live performances happen, it’s fitting that their website has the slick feel of a broadway theater backstage.
As the Solar Energy Industries Association celebrates its 40th year in 2014, it’s amazing to see how far solar energy has come during that time. Our favorite feature is the scrollable timeline on the About page, offering a succinct history of the Association and the Solar power industry in America with sleek design.
Don’t worry, we didn’t know what an endodontist did either. Luckily for all us, the American Association of Endodontists is smart enough to highlight it, “Endodontics: The Root Canal Specialists.” Their site offers a large library of resources to members, patients and anyone who looking for a career in Endodontics. Don’t fret about missing this information offline. The site’s responsive design keeps everything compact and easy to navigate from whatever device you use.
The Food Marketing Institute is a leading advocate for America’s retail food industry, representing nearly 40,000 stores across the country. Looking for information and resources on the food industry? FMI is the go-to site, as a result of the clean, clearly organized content. Quite the feat for both desktop and responsive designs.
The Charities Aid Foundation of America specializes in global grantmaking and international philanthropy but its fresh, vibrantly colored website is remarkable. The site is not only responsive but also reflects the important work CAF America performs around the world by connecting donors with hundreds of worthy causes. By offering detailed information on its ongoing programs and allowing visitors to donate easily to funds established by individuals, families and business across the globe, this website is a one-stop-shop of global giving.
From the logo to the color scheme to the polished site structure, this website embodies the spirit of the Lutheran World Foundation – a global communion of Lutheran churches in 79 countries. The numerous drop down menus allow for quick navigation, while the Responsive design keeps the website looking pretty no matter the size of your screen.
ONE is no ordinary nonprofit, so it makes sense that its website is extraordinary. Cofounded by Bono, ONE is striving to eradicate extreme poverty around the world and particularly in Africa. Our favorite part of the website is the Take Action page, which, besides being beautifully designed, encourages visitors to take real action on AIDS, Food, Energy and a number of other issues in Africa and beyond.
The World Wildlife Fund has been the world’s leading conservation organization and a fantastic resource for anyone looking to learn about the major issues in the field today. By dividing the site into Species, Places and Threats tabs, the site gives visitors freedom to browse the numerous flora, fauna and ecosystems and receive a detailed account of the current situation and efforts to safeguard it. Plus, who doesn’t like to look at animal pictures?
Easter Seals offers services and support to more than a million children and adults living with autism or other disabilities in the US and Australia. Its recently relaunched website is a massive improvement on its predecessor – providing visitors with easy navigation, simple front-end design and, most importantly, detailed descriptions of Easter Seal’s numerous services for needy individuals and families.
Aids.gov is the Federal Government’s main resource on HIV/AIDs education, outreach and prevention. Recognizing that social media’s role in spreading awareness around HIV/AIDS, the Using New Media page offers a live feed of all of AIDS.gov’s social media channels in a sleek interface.
Dadaab Stories is perhaps one of the coolest sites I’ve come across. Simultaneously a website and documentary, Dadaab gives us firsthand look at life in the world’s biggest refugee settlement located in Northern Kenya. The website’s design is remarkable with looped videos as page backgrounds and swift navigation through the hundreds of videos created by journalists, travelers and refugees themselves.
We don’t mean to toot our own horn but we are kind of in love with our latest redesign. From the animated homepage feature to the disruptive content boxes, we really think our design and development teams have helped keep our site looking fresh and clean. Great job, guys!
It should come as no shock that Salesforce.com, currently ranked by Forbes as the most innovative in America, has a great responsive website. The Saleforce website breaks down its multitude of products, services and partnerships into informative blurbs, making the customer experience just that much more enjoyable.
When you’re one of the largest software companies in the world, you had better have a great looking and functioning website. Microsoft’s website ticks all the boxes. As the company pushes into the tablet and mobile markets, it makes sense that they’ve adopted responsive design to better serve their users. We like how their website makes it easy to navigate between their products – such as Windows Phone, Microsoft Office, Skype – learn more about them and even purchase.
The Squarespace platform allows a variety of users to build personalized websites that are quick to setup, easy to customize and look beautiful. Naturally, their website is exceptionally designed. Our favorite element is the Tour interface, which allows potential customers to scroll through the type of website they like to create and watch a well-crafted demo on Squarespace’s offerings.
Mailchimp is the go-to tool for running email newsletter campaigns. Their website is streamlined, polished and intuitive to use, much like Mailchimp itself. We like how they break down every single element of the tool, not to mention how you can get started using it for free immediately.
MRY is a creative and technology agency. Their website is one of the most visually stimulating on our list – but its vibrant design is coupled with great information on the MRY process, case studies and Media Feeds. Come for the colors, stay for their deep knowledge and creative thinking.
Clearleft is a UK-based design agency with crystal clarity on how to create seamless websites and apps. Appropriately, the website neatly exhibits their great past projects and gives an insight into the values and team members that make Clearleft tick.
From the people who brought us Experia smartphones and XBR line of LED TVs, the Sony corporate website lives up to high levels of design set by their products. We love the revolving panel on the homepage and the drop down menus on the top make it easy to learn just about everything you’d want to know about Sony.
Nokia’s website definitely embraces the adage less is more. Its stripped down design is refreshingly simple and the homepage’s tiles organizes all the content and product pages. The injection of vivid red and blue coloring gives the site a nice warm feel.
When your target audience is college students, you had better have a great looking responsive website. The National Society of Collegiate Scholars have answered this challenge with a phenomenal website both in appearance and user experience. The Homepage is jampacked with tons of resources but does not feel overwhelming due to the clean and compact design.
As an actual user of the DC internships website before its makeover, I can tell you their website is remarkably better in every facet. The new design highlights our nation’s capital through stunning photography and incorporates the variety of programs available to prospective interns into a vibrant online brochure. If we weren’t already based in DC, this site would surely convince us to join the DC intern crowd.
Harvard University has arguably one of the best reputations in the world. Not solely relying on their centuries old reputation to obtain the best and brightest, Harvard has embraced responsive design wholeheartedly and its website provides an open door to institution’s academic offerings, student life, research and event hosting. We’re a big fan of the homepage’s channel feeds where you can find just about anything written about, by or at Harvard in the past few days on Social Media, blogs or in the news.
When you are located in a city thought to have the best weather in the world, its perhaps not necessary to have a great website for your prospective students. Yet it seems the good people at UCSD do not share our nonchalance and have put together a slick responsive design with superb resources for prospective students, current students, staff and alumni.
In its 50th year of existence, Lancaster University is extremely young by UK university standards (Oxford was founded over 847 years ago). That has not stopped Lancaster from building a great reputation both domestically and internationally. The university seized the opportunity to further engage students and mobile users by creating an excellent responsive website. The top header menu easily allows users to navigate through the main sections of a site jammed full of great information.
Notre Dame University is often known for its offering of rigorous academics, Division 1 Athletics and an emphasis on faith and tradition. The Notre Dame website exhibits these three assets with a beautifully designed single page layout, with its key information within easy reach and coupled with great visuals. Our favorite feature is the scroll button in the bottom right corner – as if scrolling down was not easy enough.
Drexel University is located in the heart of Philadelphia, the city of Brotherly Love. Drexel’s website is loaded with tons of eye-catching images from around campus and the city. Its smooth responsive layout was so enticing we even took the virtual tour and gained real insight into what going to Drexel would look like. Is it too late for us to be a Dragon?
Without any unnecessary frivolities, the Princeton website offers students, staff, and alumni straightforward resource for academic enlightenment, school news, and research. What’s even more fascinating is their responsive site is better than their desktop site; showing off their deep knowledge of their audience and how they are accessing their site.
From the font choices to the parallax scrolling, we cannot say enough about much we love the &pizza site. The DC-based pizza joint feel modern and fresh compared to many of the local counterpoints. Their responsive site is just as impressive, incorporating the site’s beautiful black, white and red photography along with easy navigation and social sharing buttons. I’m getting hungry just thinking about it!
As one of the largest health food stores, Whole Foods puts people and food right at the fore-front of their website. With their heavy emphasis on social, you actually feel like you are part of their community. Don’t forget to click the slide out menu to find healthy eating tips, read their corporate blog or find some yummy recipes. The “Brunch Basics” collect just makes our stomachs howl!
Like their signature white cup with green logo, the Starbucks website may seem plain, but once you’ve tried what’s inside, it’s nothing short of spectacular. For those looking to explore a “Venti” amount of information, the drop down menu is sure to measure up to your order. The extremely user-friendly and, frankly, cool content management and search features on the website make every user feel like they are brewed from the same blend.
Grey Goose’s website stays true to its sleek, exclusive brand. Head over to their “Vodkas” page where you can scroll through each bottle to find out the nose, palate and finish while also learning how to properly serve the decadent liqueur. The elegant parallax design, from the photos to font choices, is well executed throughout the website and makes it “fly beyond” the rest.
We get giddy just looking at this site! Let’s start with the language Cafe Evoke uses; down to earth, light-hearted, fun and a great partner to their user-friendly layout. Now, let’s talk design. Their use of space and color is perfection along with the gorgeous site photography. Makes me wonder when our next trip to Oklahoma might be!
This free download for teaches you how to plan measurable social media campaigns. It applies to any organization, but it’s specifically created for nonprofits. Get It Now
Food Sense caters specifically to vegetarian food-lovers and home cooks. The design captures the organic lifestyle with many seemingly “raw” elements. For example, the logo and navigation buttons look hand drawn while the bold, bright pictures on throughout the website speak to the gorgeous food being created. “The A-List” section is a must, highlighting all types of vendors whose products are in line with Food Sense and where to find them.
With nine completely different enterprises, the Disney website can best be described as a beauty in design and a beast in regards to content. Aside from the bright colors and playful design, one element we love is the drop-down menu featured in the top-left corner on every page. It is super convenient and easy to use, and makes navigating the massive website a dream come true.
An intimate boutique hotel on South Beach, the Z Ocean Hotel website is enticing. With a modern, simplistic design, the website invites users to experience a taste of the high-end, yet intimate beach atmosphere. From the seductive imagery to the invitation to “Discover Us,” the website feels intimate. Although simplistic in design, clickable content boxes featuring images of their suites, amenities and even a live webcam feed encourages users to delve deep into their potential stay. After all this DC snow, we are definitely itching for a little beach time.
Though Portlandia is helping increase the popularity of the western state, Travel Oregon is surely doing their part as well. Everything from the drop-down menu to the font and color choices emulate the Travel Oregon brand. We love the hand drawn sketches throughout the site and the rustic home-grown experience of Oregon. Interested in visiting? The site has great trip ideas including the Sunshine Mill Winery or Wildlife Images refuge center.
Run by passionate travelers for passionate travelers, Aura Travel enables users to list or search for holiday houses, furnished apartments or short term rentals in Australia. Although not extremely innovative or beautiful in design, its fully responsive unlike many of its competitors including Airbnb and Hipmunk.
One of Nisa Meier’s top principles on Let’s Travel Somewhere’s manifesto, the collaborative travel journal, is high quality photography and man, does it create a beautiful website. Although we could see some improvement to the navigation, the collection of photos and personal experiences from travelers around the world juxtaposed against a simplistic design are captivating. There are hundreds of cities and towns to visually explore but don’t get lost in the gorgeous imagery. As the manifesto says, “never stop exploring!”
With so much content, Time’s content could be easy to get overwhelmed and lost. Time‘s recent redesign is gorgeous. The use of white space and mobile-feel of the design sets it apart from many of it’s magazine counterparts. We are impressed with the separated news feed functionality on the right side of the desktop version and the slide out tray incorporated in the responsive site. Keep up the great work!
From popular neighborhood events to buzzy shareable articles, InTheCapital is worth checking out for all things DC. The digital-only news publication’s fun but smart tonality is conveyed not only in their articles but also in their site design as well. We love the embedded photo galleries featuring everything from House of Cards quotes to quirky tweets. An added bonus: all content is responsive so InTheCapital is as mobile as you are!
Although it is only online, DuJour Magazine’s website design feels like you’re flipping through an actual magazine. The homepage looks like a magazine cover and as you scroll down, you get a glimpse of the intriguing content available. A cool design feature is a menu bar that stays static as you scroll throughout the page. On the responsive site, we love the text overlay on the site’s stand-out photography.
CSS Tricks is pretty much the definition of a homegrown website. Created, written, and maintained by a self proclaimed CSS expert, the website has an original and ‘programmer’ feel to it. The simple and techy designed website is filled with blog posts and community tips about using CSS. With mostly text, the site could get lost but CSS Tricks was smart with their use of color and spacing to make each article really pop.
What a cool website – while all content is of the moment and trendy, quality is rarely sacrificed. The signature blue drop down menu remains static on both the destop and mobile sites as users scroll through the page. Mashable makes sure you will never be bored either with a continuously updating feed of “new stuff” and “the next big thing” all highlighted on their front-page. With accessible content for any reader and attention-grabbing headlines, we dare you to read only one article.
On the homepage, users are greeted by a large, intriguing photograph overlayed with an enticing headline, almost begging you to click to read more. The content of the articles contains numerous platforms, including photos, video, and sound bites. With a sleek design and modern logo, Abelton provides music news from a unique platform.
The new school concept of Contents, an online magazine, along with the minimal website design, sets them apart from other online publishers. Though the tone of the site might seem conversational, the design conveys the articles as extremely personal. Author’s headshots in-line with and are as large as the actual headline. Only the best quotes or summaries are chosen, drawing you in and encouraging you to join the conversation.
Designed in the typical section style of an online news source, the BBC website sets itself apart with the use of photos. Set against a stark white background, the photos of varying size provide an extreme contrast that draws the users eye. With a running montage of photos and articles that users can click through, the BBC website design is tailored our increasingly digital and visual world.
Quite a unique website in purpose and content, A Book Apart publishes short books covering emerging topics in web design and development with style, clarity, and, above all, brevity. With pops of pink throughout the homepage to promote the newest addition to the book collection, the website has a fun, community feel perfect for people who make websites.
Speaking to the soul of a surfer, Salt Surf’s website is simple, yet elegant in design. The use of up close, black and white photography throughout the website truly embodies the ‘salt life’. We could spend hours just examining and absorbing the imagery on the homepage, look book, and blog but then we would miss out on time in the water.
This UK based website is great example of user friendly design. The drop down menu allows users to find just what they are looking for with different categories and subcategories available for viewing right from the homepage. As a result of their great site navigation, users find what they need in a matter of seconds.
If you like your website design a little risque, look no further than the Suisupply webpage. The homepage has a slideshow of pictures featuring well-dressed men and half naked women. However, it doesn’t stop there; Suitsupply takes it a step further with a button in the corner of the desktop webpage that reads “show uncensored.” With the click of a button, the women in the pictures become fully nude, surrounding a fully clothed man (in Suitsupply fashions, of course). Utilizing sex appeal is an age old marketing trick that this website has brought to the digital age. WARNING: NSFW.
The first words that come to mind when describing the Nixon website are modern and fun. The design encompasses blocks of varying sizes that contain different content, including videos, products, and events. They’ve even flawlessly integrated social media into their site design. Showing Nixon is not only focused on retail, but also on telling the personal stories of the real people who use their product everyday in unique ways.
This website is by far one of the most innovative we’ve seen. Hotel Style’s design is tailored to highlight their most recent fashion collection, targeting the gentleman travelers’ journey of style. When entering the website, a video automatically plays featuring a gentleman with bold music being adorned in pieces from the collection. It then welcomes gentlemen and dares them to discover the collection. Exploring the website is intriguing, sexy, and manly, but with a touch of distinguished elegance, mimicked by the pieces in the collection. All in all, Hotel Style does an exceptional job branding, making their page stand out.
When your tagline is “Imagination at Work,” you have a responsibility to live up to the slogan. GE delivers with a beautifully crafted responsive website, which is aesthetically pleasing and intellectually stimulating. Our favorite feature is “Illustrating Imagination,” which takes quotes from the children of GE employees on what they believe their parents do at work and visualizes them into some stunning pictures.
These are Things is a small illustration studio and paper goods brand headquartered in Ohio. They produce awesome cartographic (interactive maps) and infographics. Unsurprisingly for creative professionals, their website is superbly designed with neat little animations and single scroll theme. We really love how the studio’s creativity and sense of humor is on display from the moment you reach their page.
Revolution in Sound is an interactive website hosted by Red Bull that maps out UK’s club and music culture. You can trace back the birth of music genres, famous club nights and classic artists across Britain. With Google + connectivity, users can contribute to the living archive of UK music by checking-in and commenting. Moreover, the sleek responsive interface makes it easy to find info on events, past and present, and all displayed in a extraordinary design.
August is a new online community for artists of all types: photographers, musicians, filmmakers and writers. By allowing artists to create personalized pages, interact with each other, and most significantly, sell their work directly to consumers, August creates a Social Network exclusively driven by artists. Though the project is still in its infancy, the website has all features of its creative audience and its seamless single scroll format is breathtakingly simple and aesthetically pleasing.
This microsite from Greenpeace explores the dangerous potential of Arctic oil drilling. With an interactive map and numerous case stories, Greenpeace confronts the issue of Arctic drilling head on. The stories, background information and calls to action are all housed in a easy-to-use interface that is so well designed that I spent a good 30 minutes exploring the various points on the map.
This website for the Big Lazy Robot studio is sparse; only the bare minimum of content and images are used. This places a huge emphasis on the studio’s work, which are neatly organized into thumbnails linking to videos and case stories. I’m a big believer in less is more and BLR is another great example.
As more and more musicians take the internet to sell their albums directly to consumers, the artist album website is becoming increasingly popular in music. More Hazards, a Nashville-based folk duo, host their album on a great little website. Once the user hits play, the simple animation of a rotating record really adds a nice genuine feel to this website.
Heavy Rockets is billed as “a Cave Shooter game” for iPhone. The game itself looks like a throwback to old school arcade games with retro design and simple gameplay. Meanwhile the website embodies these characteristics with a stripped down design that puts the game’s stills and teaser video at the forefront.
This free download for teaches you how to plan measurable social media campaigns. It applies to any organization, but it’s specifically created for nonprofits.