10 New Inspiring Responsive Designs on the Web

source: www.thenextweb.com - author: Lauren Hockenson

10 New Inspiring Responsive Designs on the Web


Everyone who is anyone is talking about responsive design these days — and everyone certainly has a strong opinion about it. But, whether you love it or hate it, responsive design is bound to go mainstream in 2013. Every business from Harvard to AOL are embracing responsive design as the wave of the future, and more websites are popping up on every device with an internet connection with conforming layouts.

Take a look at these new, smart and stylish responsive layouts and get inspiration for your next website. Spanning across different kinds of companies, strategies and aesthetics, all of these websites have one thing in common: great responsive design.

What’s your favorite responsive design website? Let us know in the comments.

1. BBC

01 promo 29 new inspiring responsive designs on the web

The world’s biggest news outlet hopped on the Internet’s biggest design trend in the summer, and the designers were thrilled  about finally reaching a universal design layout across all platforms. The design’s minimalist look provides a blank canvas for the news outlet to show off beautiful photos — even on a mobile device.


2. Disney

3 up 800x352 29 new inspiring responsive designs on the web

The magic-making family entertainment giant tasked a mammoth responsive design project on a (comparatively) tiny group of 30 developers, and brought it to fruition in October. The design succeeds by preventing major scaling of the content within the website, meaning that big videos and interactive elements don’t lose their size across platforms.


3. Zurb

zurb 520x297 29 new inspiring responsive designs on the web

Some of the companies that show off the best responsive design layouts are also in the business of creating them. That’s the case with Silicon Valley-based web design firm Zurb. The overall layout solves the common problem of too much white space by cleverly switching graphical elements from desktop to mobile. The result is a full and vibrant  look that always sizes perfectly.


4. Design Week Portland

dwp 04 29 new inspiring responsive designs on the web

Facilitated from start to finish by Portland design and typography firmScribble Tone, Design Week Portland’s website defines the meaning of “fully realized.” The whole layout is a crash course in popular web trends — including but not limited to single-page design and customized web typography — but it doesn’t feel wrote or schmaltzy. The overall layout is young, hip and backs up the conference’s credibility as an authority of good design.

5. The Next Web

tnw 520x297 29 new inspiring responsive designs on the web

How can you talk about responsive design without acknowledging the platform that’s presenting the work? The Next Web underwent a change in late 2012 to keep up with the readership — as more and more people continue to use their phones for reading, it becomes more important to keep a consistent layout on any device. That’s why responsive design is becoming so ubiquitous among publishers: it looks good everywhere.


6. A Book Apart

abookapart 520x297 29 new inspiring responsive designs on the web

When a company writes the book on responsive design, it’s a no-brainer that theirs will be amazing. A Book Apart, the educational retail arm of popular web design blog A List Apart,  is easily one of the best examples of an ecommerce website that takes full advantage of responsive design. This is because the layout manages to maintain an orderly product display system that intelligently conforms to devices without remaining cluttered. Add to it the company’s flawless aesthetic eye and branding, and it’s a (fitting) master class in design.



aids 520x297 29 new inspiring responsive designs on the web

Even government websites are hopping on the responsive design train, and the AIDS.gov website manages to balance a strong message with strong design. The group cites awareness in the design’s unveiling this summer: “ Building AIDS.gov responsively allows us to focus on the goal of ensuring any person, anywhere, in any situation and on any device can access basic HIV information.”


8. CSS Grid

cssgrid 520x297 29 new inspiring responsive designs on the web

Unsurprisingly, some of the best examples of responsive design are actually tools to help other developers recreate the same experience. CSS Grid is a free product that allows developers to build websites for the larger, 1280 pixel resolution monitors that are rapidly becoming the new standard — and shrink back down to a mobile layout. It’s just as cute as it is useful.


9. Tattly

tattly 520x297 29 new inspiring responsive designs on the web

Temporary tattoos? Who knew that a responsive design could make a kooky product beautiful. Design-heavy temporary body art company Tattly took advantage of the flexible layout to make their tattoos the start of the show, and it works. And with a bit of hipster typography, the company makes a strong statement without being cliche.


10. Harvard University

harvard 520x297 29 new inspiring responsive designs on the web

Clean and classic Harvard University embraced responsive design without losing decades of online brand-building by incorporating the university’s longstanding aesthetic (Harvard crimson, anyone?). The result is a forward-thinking layout that doesn’t read too modern. This website is the perfect example of the difference between layout and design.

User Rating: 4.9 (2 votes)