Line25

Showcase of Outstanding Responsive Web Designs

Read the full post

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web designs. These responsive websites not only look great at full-scale monitor resolution but are designed to gracefully scale according to the user’s screen size. Resize your browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well-presented formats.

What is responsive web design?

Screen resolutions responsive web designs

Web sites are no longer viewed only on a computer monitor. Smartphones, tablets, and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Back in the days of table based designs designers either chose the fluid or static route. Today’s responsive websites take a similar approach by using fluid widths in percentages and ems but go a step further by using scalable images and adjustable layouts depending on the browser size.
To achieve this ‘scalability’, CSS media queries are used to apply different page styling according to certain parameters, such as min-width and orientation. The first step is to create a mobile version, but you could go on to customise your design for a range of resolutions.

Showcase of responsive web designs

Ready for some examples? Here’s a roundup of 50 of the most outstanding examples of responsive web designs. Each one is displayed with a preview of both the full-size website and an example of a small resolution, but to get the full experience be sure to visit the live site and play around with it yourself.

Alsacréations

Agence web de qualité _ Alsacréations responsive web designs

Alsacreations focuses on imagining and building ergonomic sites and quality web apps. Have a look on their responsive web designed site.

Sasquatch Festival

Sasquatch responsive web designs

Up for something cool? Check out this music festival’s responsive website! it uses fullscreen images, has a unique layout with different box content elements and makes use of great font combinations!

Earth Hour

EarthHour responsive web designs

Say goodbye to procrastination and check out at any time and on any device Earth Hour’s events. It has a full screen layout and a completely responsive design.

Cognition

Cognition The blog of web design & development firm Happy Cog responsive web designs

This website covers a large range of content. You can read about fighting stage fright or a recent case study for responsive web designs.

Seegno

Seegno responsive web designs

Seegno is made of a creative and straightforward team specialized in building digital products and with a cool and responsive website.

Boorbool

Boorbool responsive web designs

They help conceive and develop brands and they engage in a series of multidisciplinary activities. They like meaningful visual and linguistic signs and their responsive website surely expresses that.

Flambette

Flambette responsive web designs

In the mood for buying some candles? With their responsive site, you can do that any time and from all your devices.

Ribot

ribot — A digital design studio

They focus on digital experience and innovation. If you want to find out more, you can check out their cool and responsive website.

Life in Greenville

Life in Greenville responsive web

Ever thought of visiting Greenville? If yes, then this very responsive website be your guide. It has a large slideshow on the homepage, which perfectly resizes to any screen size.

Laufbild Werkstatt

Laufbild Werkstatt responsive web

They’re an interdisciplinary design office with a simple yet cool responsive website. This site has an interesting layout which was made entirely responsive and mobile-friendly!

Sweet Hat Club

View the responsive website design

Sweet Hat Club, as the name implies, is an online place hat lovers can call home. This site has a responsive design and a simple layout.

Clearairchallenge

Clean Air Communte Challenge responsive web

Find out exactly how clean the air you breathe is and how you can help reduce air pollution with this cool and responsive website.

Andrew Revitt

Andrew Revitt - Freelance design responsive web

This website belongs to a freelance web designer who’s looking for new projects. Check out his responsive website.

Stijlroyal

Stijlroyal Design & Strategie

This website design is a presentation site of a company that focuses on design and strategy. This responsive and creative website fits perfectly on any screen size.

Sleepstreet

View the responsive website design

Wanna rent a house in Ghent? You can easily do that from any device with their responsive website! This mobile-friendly site also has a vintage design and uses retro vector illustrations perfectly.

eend

eend responsive web

Check out eend’s website or their portfolio. They do a great job in online services and they’ll do their best to find the best solutions for their clients, using a website building approach that looks perfect on any screen size and device.

Converge SE

ConvergeSE responsive website

This business card website works fine on any device. It has a simple, dark website design with a fullscreen layout that adapts responsively.

Elje-group

elje - Group responsive website

Eljie-group has a cool mobile friendly animated website that works well on any device.

Joni Korpi

Joni Korpi responsive website

This responsive website presents the portfolio of Joni Korpi. It has a purple layout and a friendly interface.

Jason Weaver

Jason Weaver Interactive Designer - Homepage responsive website

Want your site to be interactive? Check out Jason Weaver’s responsive website and the services he’s offering.

Pentagram

Pentagram responsive website

Pentagram is a multidisciplinary team that encompasses everything from graphics and identity to exhibitions and installations and they have a very responsive website.

Tree House

Treehouse Blog - Learn to code responsive website

If you want to learn how to code or improve your skills, Treehouse is you go-to with their services and their highly responsive website design.

Anakin

ANAKIN responsive website

With a responsive and sensitive web design, Anakin has a vast experience in design and creative use of digital technology.

3200 Tigres

Tigres responsive website

This responsive website focuses on raising awareness on the number of remaining tigers in the world. It uses large, high-quality images displayed on a fullscreen slider which resizes perfectly on any device.

Prophets

Prophets responsive website

This is another presentation website of a company that focuses on innovative design and that can be seen on their cool and responsive website.

Jeremy Madrid

Jeremy Madrid - Web Developer responsive website

You can scroll through Jeremy Madrid’s portfolio from any device. It has a simple design, divided into different sections, each one of them resizing perfectly depending on the device the site is viewed on.

Zzzach

Zach Miller responsive website

Have you met Zach? If not, you should definitely check out his responsive website. This is a business card website / portfolio website with a super-minimalist responsive design.

Ryan Merrill

Ryan Clark Merrill responsive website

 

This is Ryan Merrill’s personal business card website which can be seen from any device. This ultra-minimalist responsive design is mobile-friendly and has everything needed for a client to know about Ryan before hiring him.

Elitefingers

Architecture Agency responsive website

This website is an architecture portfolio and has a responsive web design. It features a large slider on the homepage, but it resizes perfectly to be viewed on any device.

Electric Pulp

Electric Pulp responsive website

This is the presentation website of Electric Pulp. It has a friendly interface and a very responsive web design. Check it out, it might be the source of inspiration for your next project.

Tee Gallery

View the responsive website design

Check out this responsive website design with a simple, photo grid layout which can also be seen from a mobile or a tablet device. They have some really cool T-shirts on the Tee Gallery.

Appico

Appico

With a responsive and minimalist web design, Appico manages to impress readers through their content. The fonts are also very well chosen and the vector elements blend perfectly with the theme.

Entropiefestival

entropie

If you’re in the mood for some fun, you should check out this festival’s website which works fine on any device. It also has a creative design which may get you inspired.

Sliders

SLIDERS Copenhagen responsive website

This is yet another good example of a responsive web design. It could be a source of inspiration for your next project or your next go-to restaurant.

A Different Design

A Different Design - Kristof Orts responsive website

This is a website for a company which creates beautiful and responsive interfaces and their site proves that they can follow the responsive trend to a T.

This is Texido

THIS IS TEIXIDÓ responsive website

With a friendly interface and a responsive web layout, Texido shows a great experience in branding and ability to do whatever they propose to do.

Edge of my Seat

View the responsive website design

This is a more content-driven website design. The blocks of text were coded very well in order to be responsive and easy to read from any device.

Hardboiled Web Design

Hardboiled Web Design Fifth Anniversary Edition responsive website

If you’re looking for something new to read you should try out this book about web design or simply have a look on this responsive website.

St Paul’s School

St. Paul's School responsive website

St Paul’s School’s website is another example of responsive web design you should check out. It uses large images which can be seen very well from any device, be it mobile or desktop.

Robot… or Not?

Robot…or Not responsive website

Are you a robot or are you not? This is the question asked by this site. Either way, you should have a look at this responsive website example worth checking out.

Handcrafted Pixels

View the responsive website design

‘One website, many devices’ is their motto and their site proves it! This studio is specialized in creating responsive, mobile-friendly web designs and their site is the perfect work example.

Purpose Branding

Purpose Branding responsive website

Looking for branding company? they have a lot of experience in this line of work and they also have a cool and responsive website.

Sparkbox

Sparkbox Web Design and Development

This company’s purpose is making the web a better place and so does their responsive website. Check it out as it is a great source of inspiration.

SimpleBits

SimpleBits responsive website

Check out SimpleBits’ responsive website and maybe have a look through their articles. This is another content-focused website design with perfectly-responsive content blocks.

UX London

UX London responsive website

Book a spot at this unique 3-day event for user experience designers or simply check out their responsive website.

CSS-Tricks

CSS-Tricks responsive website

Last but not least, CSS-Tricks, run by Chris Coyier, is another good example of web responsive design and he constantly posts good content.

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

46 Comments

  1. Ankeeta says:

    These are the best list of responsive web design. I like Stephen caver. Love these.

  2. Vince says:

    Great list of responsive web design! I must say that having a user friendly design helps you build a strong presence online. Mostly visitors don’t like website which do not interact with them.

  3. Raffy says:

    Nice collection of responsive designs.

  4. Shanaya says:

    The showcase of the web designs are really impressive and attractive thanks for sharing the list.

  5. Web Design Sheffield says:

    A very great list. I'm looking forward to the tutorial. I'm excited to learn.

  6. Daveido says:

    Great list, I think this is a necessary feature in every website that wants to be professional! So I agree with everybody else, can we expect a tutorial on this soon? :)

  7. Sumit Khaneja says:

    Great list of designs. Thanks for sharing. For website designing & SEO tips & tricks visit alltechnetworks.com

  8. dan says:

    http://crab-tree.com is now a worldwide web design services website

  9. LKenneth says:

    These websites look fantastic great inspiration here!

  10. Leo Brown says:

    Really Great list….it is very useful for fresh web designers….and also helpful how to create a beautiful templates like this…..Thanks continue your postings…..

  11. Illusion 3D says:

    No doubt this makes an impression on everyone. The fact is that most programmers do not know that 3D modelling software can be applied this way.

  12. Azhar Kamar says:

    Awesome UI designs optimized for browser compatibility. Nice!

  13. web design and development nepal says:

    You have given nice list of website. I got your point .

  14. tdelphi says:

    Wow A huge nice List they inspired me to create new site.

  15. Renan Gomes says:

    Great post man ! Greetings from Brazil :)

  16. Benjamin Christine says:

    Really like them all! 1st one is definitely the best! thanks

  17. Rochelle Dancel says:

    Thank you very much for this post.

    If it isn't already, it's going to be a challenge for designers to move beyond the 960px fixed width grid (though it's still a great system) and design to adapt to a wider spectrum of multiple monitor sizes and platforms.

  18. Manny says:

    Nice one, great list that Sasquach Festival site is brilliant.

  19. Spencer says:

    Lovely list mate!

  20. Jatin says:

    Really great list.

  21. asdasd says:

    ascasc

  22. Karl Craig-West says:

    As a beginner to the world of web design it's obvious that I have much to learn.

    Many thanks for the inspiration.
    Karl

  23. Dave McNally says:

    A nice list! Thanks for featuring Tileabl.es too :)

  24. Matt Simon says:

    Just wondering why my comment is still awaiting moderation? is it something I said?

  25. Design Ipswich says:

    Thanks for this, some really inspiring designs.

  26. office space says:

    I can't believe it – this was one I was thinking 6 months before.

  27. Janna says:

    Awesome and inspiring collection. Thanks!

  28. ABDUL JANOO says:

    Cool collection……….from were u get this all……

  29. Shaun Bent says:

    Awesome showcase! Good work as always Chris!

  30. José Mota says:

    You forgot one of the first (and best) ones. Jon Hicks' website, hicksdesign.co.uk.
    Also, Simon Collison's, colly.com. Both of these are just fantastic work.

    #2cents

  31. Cory says:

    Most of these are the personal pages of designers and developers. Where are the real world examples?

  32. Jatin Hariani says:

    waiting for another great tutorial from chris!!!

  33. website designer uk says:

    Thanks a lot for sharing this nice post!You’ve done really excellent job!

  34. HTML Codes Dude says:

    Great list as always. I just looking into mobile design specifically iPad so these will be a good source of inspiration. thanks.

  35. Michael Caputo says:

    Just wondering if anyone knows of a framework like the 960 grid that supports this type of scalable web design.
    I'm really interested in starting to use HTML5 very soon, and this would be something I could really get into, however, I really love using frameworks to keep development time down.

  36. Mainual says:

    Great tips, fantastic examples

  37. sam - dorset web design says:

    Good for inspiration.
    Thanks chris very helpful

  38. Derek Jensen says:

    I'm with Markus!

    Oh and thanks for the all the time to discover these responsive web designs. That must have taken a good time.

  39. Markus says:

    Does that mean we can expect a responsive design and coding tutorial soon? :)

  40. Kidando says:

    Great post Chris.

  41. Web Design 101 says:

    Idea! I can build these types of sites by using percentages instead of pixels in my CSS!

    Different versions of the same website might cause web ddesigns to complete more work and make more money!

Leave a response