Posted: June 10th, 2013
Social Driver's list of favorite responsively designed websites has returned! Last year we shared our 20 top responsive design picks and now we are back with even more awesome sites. We've searched high and low to gather our 50 best responsive website designs and why we think they are so great.
It's no secret we think responsively designed websites rock. For those of you wanting to dig a little deeper, check out our take on why responsive web design is an excellent solution for our websites and how responsive design actually works.
The National Society of Collegiate Scholar's website was ingeniously designed for the Millennial generation. The webpage's easily resizable photo spread, mobile-ready layout and clear focus on the organization's membership make for an incredibly inviting find.
This site is awesome! It’s the kind of responsive innovation that makes you go ‘wow’. The Dadaab Stories website actually transports you to the Dadaab African Village through the use of movie-like headers and wildly attractive design features that seamlessly transform over a variety of mediums. Take a quick scroll through the straightforward screen options and you will see for yourself the impressive attention to detail. Now that is design you can feel good about!
I just love this site. More Hazard’s knows music but they also know website design. The awesome turntable and uncomplicated focus make this site just as much about music as it is about user experience. The page exemplifies the group’s ‘quiet is the new loud’ motto with a creative yet understated design that emphasizes the importance of mobile listening. You should definitely check More Hazard out, if for nothing more then to hear their album-which, by the way, is just as wonderful.
Awwwards.com not only creatively displays and assesses innovative websites but it also boasts one of our top choices in responsive design. This company does a great job of simply and clearly promoting well-made sites without taking their own design too seriously.
The funky details and crisp construction of The Haberdash Fox website make it nothing short of well dressed. The collection of menswear finds from Etsy is tactfully laid out and the navigation is intuitive. This site no doubt creates a fantastic shopping experience for its of-the-moment consumers.
The Children’s Museum in Pittsburgh’s website sports an unfussy design, inviting bright colors and readable, multimedia layouts which are extremely accessible for the parent on the go. With just a touch of whimsy, this website is a great fit for the kid inside all of us.
Contents Magazine offers a fantastic example of how responsive design can enhance branding. The logo easily adjusts for any screen and the background imagery is both clear and fresh. Contents Magazine.com is well organized and cleverly designed which makes reading the equally interesting articles easy and inviting.
Sketchin, an international user experience design company, has a website that clearly highlights its area of expertise. With changing background reels detailing different client-technology interactions, this website cleverly communicates with its users.
Nothing makes a Disney fan happier then seeing their favorite character on display. Disney’s site does a fantastic job of showcasing the company’s greatest animated stars across all screen mediums. Go ahead and resize your browser to see how seamlessly Simba and Mickey change with you. Simply magic!
As one of the companies promoting well crafted responsive design, The Next Web does a great job keeping up with the trends. Intuitively designed for multiple mediums, the website is just as easy for me to peruse on my iPhone as it is on my desktop.
After viewing a ton of responsive websites, These Are Things still remains one of my favorite designs. Created by two artists, this site is nothing short of creative. It has imaginative scrolling features that translate well on any screen. Scrolling through the pages made me feel like I was being taken through a day in the life of the two creators. By paying this page a visit, you will not only get a taste of Jen and Omar’s quirky imagination and lovable admiration for their pets, but you also get to experience the expertly responsive site that left me with a big ol’ smile.
A Book Apart demonstrates that website navigation can be a breeze regardless of how you access a page. This organization does a stellar job of maintaining an orderly product display system that smartly conforms to different mediums without clutter. With their sharp aesthetic and clear branding, A Book Apart does a standout job displaying their products.
Now this is a group that understands the importance of multimedia. Design Week Portland offers a warm, personal welcome to its website’s visitors with a video appropriate for all viewing mediums. Add that to the page's clear navigation, fun color scheme, and down to earth messaging and it becomes clear these designers really are experts in their craft.
Given the amount of content that passes through the Boston Globe on a daily basis, this website is extremely well organized! One of the pioneers in responsive news media, it continues to provide an outstanding example of how companies can optimize the webpage viewing experience across a large range of visitors. The ease of news access makes paying the extra subscription charge well worth it.
I so appreciate Rally Interactive’s website design. It does an amazing job of giving its visitors a sense of the company's personality. Their attention to detail is clear and the page's unexpected gadget-like design features made me feel like I was messing around with an outdoor toolkit from REI. Complete with spinning buttons and whirling images this website was both intriguing and, as their name suggests, highly interactive. Rally interactive is the type of company that successfully embodies the analogy that reaching an audience is like climbing an icy mountain; it takes ingenuity, skill and a bit of intuition.
Ableton’s community of musicians, producers and DJs have created a chart topping website design. The company’s focus on exciting color schematics, clear and interesting graphics, and browsing experience keep each page in visual harmony with the next.
An Event Apart’s website design makes a statement. The clean aesthetic and tactfully placed bold imagery effortlessly entices visitors to inquire more about their unique offerings. With clear descriptions and strong visual directives this site has mastered the art of concise persuasion. There is no doubt that their events are just as well executed and audience friendly as their responsive site.
The Café Evoke’s website is visually tasty in every sense. With yummy offerings prominently displayed and a downright cheery aesthetic, this website shows Café Evoke knows their customers and is attentive to detail. I especially love how easy and intuitive the mobile site is. My iPhone screen clearly displays everything I need to know on the go: their logo, social media links, hours and how to get my hands on their delicious offerings…I’m looking at you table side S’mores!
When creative groups and responsive websites effectively sync, it can produce a match made in heaven. The spunky t-shirt design company, Wear You Belong’s, website is a perfect example of the type of harmonious digital marriage this pairing can produce. Scrolling through and resizing the browser of this funky website was both easy and really quite exciting. This site’s cool typography and enticing wordplay shift seamlessly and exemplify why this stellar company is well worth the online visit.
White Lotus Aromatics.com does a phenomenal job at instantly making website visitors feel at ease. The simple and natural aesthetic is as calming as I am willing to bet their scents smell. This no hassle, easy to navigate site wonderfully highlights both White Lotus’s products and the company's values.
This site is a favorite at Social Driver. Trent's iconic style and attention to detail continually provide wonderful reading experiences across devices. His consistently innovating page never stops impressing us and his hallmark designs are definitely something to write home about.
The Creators Project is the brainchild of Intel and VICE. This website clearly embraces multimedia channels with a unique, retractable header visibly listing social media platforms and its prominent introductory video. This site’s interactive design and functional layout skillfully create a platform for visionary art to be displayed and not overpowered.
Change.org, a web-based petition platform, does a fantastic job making online visitor experience outstanding. The screen imaginatively expands horizontally and navigation is easily distributed amongst the headline’s featured images. The website clearly focuses on the causes it supports keeping everything refreshingly simple.
Harvard’s website is well organized, simple and classically designed. You wont find conspicuous logos or loud color schemes here: just tasteful touches of crimson red and concise, thoughtful headlines. The website’s current yet focused approach make it a perfect example of the difference between layout and design.
I’m not sure if its my inner foodie or the wonderfully detailed photo displays that makes me love this website, but I think it is just fantastic. The careful attention to detail and wonderfully displayed deliciousness are enough to make any techie or food enthusiast’s mouth water.
This site may be in German, but the message that they are masters in digital communication is extremely clear. The flawlessly resizing text and bold colors keep the readers focus while the creative formatting easily keeps all visitors engaged.
This site elevates the art of typography. The funky script and psychedelic lettering make Flow Festival seem both electrifying and fun. The website pays specific attention to the accessibility of ticket purchasing across media making it a particularly innovative and useful festival page.
This delightful site oozes southern charm and originality. With the uncomplicated design and prominently pictured cheeriness, the website both advertises Greenville extraordinarily well and entices its visitors to wonder what they have been missing. I especially love the detailed finishes, making the site feel like a giant ray of sunshine, and the multimedia appeal of the dropdown menus.
Some organizations today make mobile scrolling an uphill battle. The Work Cycle, a community of innovative bicycle enthusiasts, is beginning to redefine that. This group makes scrolling on a small screen dreamy. The use of color-coding and clear menu directives extend way beyond desktop innovation allowing The Work Cycle to be easily accessed on the go.
Thrive Solo’s online website does a great shop showcasing its product. Its simple graphics, clever use of colors, and ability to control the reader’s focus keeps this site direct and product-specific. No frills, just clear and thoughtful design that moves with their customers.
Deux Huit Huit was one of the best examples I found of context-aware imagery. The full screen logo flows throughout the multiple breakpoints. Even on the smallest mobile screen you can be sure that you will clearly see the wide collection of creative website innovations. This is truly a design for the future of mobile web surfing.
Our love affair with this site continues once again. If you didn’t pay CSS Tricks a visit the first time we reviewed this site, you ought to check it out now. The company did a revamp of the page replacing the former frog emblem with a new and improved logo. The changing menu title, which cleverly condenses as you shrink the browser, is one of my favorite features. The site’s attention to detail and careful design make it both functional and imaginative.
Zurb.com takes resizing a browser to the next level. Not only do the background image and website text fluidly expand but the backdrop also swaps color and picture as you change your screen size. Go ahead-test it out-it is nothing short of inspirational. The site is extremely well done and embodies the design innovation the company offers.
This site’s unique layout and interactive background designs enhance the distinctive style of the artist, Arman Hostikyan. Arman’s focus on one-of-a kind art creation is clear the moment you open his page. This site offers an extremely unique and artistic interpretation of responsive design.
Hello Monday’s website is a perfect example of the company's innovative and playful design skills. The site creatively draws attention to Hello Monday's past work through exciting color directives and effortlessly resizing imagery. This page seamlessly displays why their work is unique from both my iPhone and my desktop. Well done!
ONY Agency's website is a great example of how moving backgrounds can successfully form company descriptives. Anyone can add video to a website, but only few can do it in a way that is exciting and doesn't loose meaning when taken off a large desktop. This responsive site is exhilarating to visit and shows how website technology can effectively enhance branding.
Designer Magnus Cederholm’s website, Formfett.net, does a great job of being simple and innovative all at the same time. The uncomplicated mobile screen and systematically resizing header utilizes creative, responsive branding and showcases Magnus’s expertise in creating positive user experiences.
With Humaan.com’s clear emphasis on social media and wonderfully fluid resizing features, the engaging website exemplifies the design agency’s ability to craft expert digital experiences. The use of black in place of ‘white’ space provides a monochromatic layout that keeps potential clients focused on the company’s mission and people.
Starbucks is a great example of responsive design done well in a corporate framework. Noticing that more users were accessing the site from mobile devices, the international coffee chain fully delivered on a phone ready design. Appropriately detailed and well branded, this site demonstrates how well Starbucks knows its online audience.
This is not your regular phone advertisement! The HTC One is beautifully displayed throughout every stage of browsing and the stimulating graphics are wildly interactive. Clicking throughout the website will pull you deeper into the phone’s features giving the vibe that this technology is nothing short of cutting edge. The website is forward thinking, responsive and clearly built around HTC’s product, well done!
One of the first questions I always ask before booking a hotel room is “what will my hotel look like?’”. The Hampton Inn: Jackson Hole answers that question beautifully within the first few seconds of visiting its website. They are straight to the point and clearly understand that booking a hotel room is oftentimes done on the go. The company’s straight to the point site is full of client receptivity and exemplifies online customer service.
8 Faces.com was one of the sites that clearly stuck out in my mind as simplistically responsive. This magazine website is a great example of how reactivity can be done without complication. 8 Faces.com demonstrates that you don’t need extreme flashing colors and complex graphics to make for good website design. Awesome job!
Do Lectures.com’s organic design and direct linguistics clearly attract the imaginative workshop attendees they seek. The brand itself focuses on innovation and their website definitely delivers that. Optimizing cross-media spacing and utilizing succinct menu options are a few ways Do Lectures has made responsive design work well for them.
AIDS.gov is one of the most easily navigable and clearly focused government websites out there. The site wonderfully integrates infographics, captive photography and embellished text that transfer extremely well across media. Overall the site is wildly attractive and intuitive for visitors without detracting from the purpose of the organization.
Clouds Over Cuba is a great example of movie making across mediums. This site not only brings you into the time period of the documentary it promotes, but it also maintains a keen sense of detailing throughout its entire aesthetic. With a separate, well executed, feature for mobile access, it knows its users want to browse from multiple mediums. The site, a winner of numerous digital recognition awards, is definitely worth the visit.
Time.com’s recent web redesign was very successful in giving all readers the same viewing experience. The visual displays and responsive approach are consistent with what you would expect from the successful news source: practical, minimal and most importantly extremely readable.
The second you enter this site you are enveloped in user response. From the headline literally reading “This is Responsive” to the fluidly resizing imagery, this site, which provides patterns, resources and news around crafting responsive web experiences, truly has it all. It is direct, uncomplicated and provides its browsers with a one of a kind viewing experience that dabbles in playful.
This site is a temporary tattoo lovers dream. Tattly.com is a bit quirky, design heavy and very fresh. The young audience and cute tattoos are just a touch hipster and equally creative. This site attractively displays Tattly's products across multiple mediums and does a fantastic job appealing to their audience.
The Theme Foundry.com leads by example. As a WordPress template website it is clear that they not only know how to make websites, but they are also really good at it! The website’s features easily shifted around my screen and the blog content was consistently the main focus. Overall this is a great website with a great product to offer technologically progressive bloggers!
Notre Dame is another university doing a great job at adapting with the times. This site looks great in mobile view which emphasizes attractive graphics and a minimalist aesthetic. Fight on, Irish!