Responsive Web Design: 50 Examples and Best Practices

Nordic Ruby Conference

Nordic Ruby Conference’s official website conveys a distinct sense of something really interesting should happen. Such features as:

  • clean overall design;
  • textured solid color backdrops;
  • well-formatted layout;
  • informative home page;

allows a pleasant, and at the same time, professional atmosphere prevail on the website. The responsive grid that is used as a base makes the presentation of the event available for a wide range of internet users.

Halifax Game Jam

Halifax Game Jam has a powerful artistic vibe due to its ingenious flyer-inspired home page that features a mind-blowing illustration and highly original backdrop.

Of course, the creative design helps to make your website to stand out from the crowd, but how about basic web requirements that need to be complied? The team has also thought this through, and supplied the website with:

  • solid surface;
  • responsive layout;
  • proper optimization for browsers.

even despite of having only one page.

Diablo Media

The team has obviously built the website with current trends in mind. There you can find

  • a hero area that greets newcomers;
  • smooth effects;
  • slide out highly comprehensive navigation;
  • flat-style graphics.

They also did not miss an opportunity to add flexibility as well as supply it with some extra features that are necessary for website’s well-being in a competitive internet.

ASU Online

ASU Online is not reliant on an incredible design to be memorable. Being a website dedicated to a local university, it has a quite modest design that, by the way, goes perfectly well with a site’s mission. The front page depicts everything that is needed to effectively familiarize visitors with an establishment.

As far as functionality is concerned, the website sticks to such core features as:

  • responsiveness;
  • seo optimization;
  • cross-browser compatibility.

3200 Tigres

When your task is to inform about the acute problem and draw as many attention as it possible, establishing a proper online foundation is a must have. The WWF like no other knows the rule of the game, so it’s not surprising that 3200 Tigres (one of its child websites) is pulled by such essential features as:

  • modern flat style design;
  • optimal information hierarchy;
  • responsive layout.

Kings Hill Cars

Kings Hill Cars is an official website of a company that provides taxi services. The landing page tries to cover everything that can be of use for potential clients.

Despite the fact that the website design is outdated and quite unremarkable, it is fully adaptive. And the last feature is more than enough to increase the conversion rates for company whose targeted audience, as a rule, comes from a mobile web.

8 Faces

8 Faces is a printed magazine that forces its readers to speculate about typography, asking only one but tricky question:” If you could use just eight typefaces, which would you choose?”

The official website as befits is aimed to achieve a maximum exposure for its product with a help of

  • clean elegant design;
  • wide-screen image slider;
  • ability to gracefully fit the content into smaller screens.

Asbury Agile

Asbury Agile is a conference for web professionals. As we have grown accustomed, when the event concerns web technologies and includes some high-end professionals, the official website not only has to look modern and up-to-date but also stick to some strict specifications such as

  • seo friendliness;
  • responsiveness;
  • browser optimization.

like Asbury Agile official website do.

Alsacréations

Alsacréations is a French-based web agency that has a regular online portfolio.

Though it seems that the website craves for some kind of a “facelift” since the design definitely comes from the past with its glossy icons and boxes with shadows, however, it has one huge advantage over some others; it is based on an adaptive grid that slightly changes the attitude to it, making us (I mean potential customers) believe that at least the base of your project will meet current requirements.

Sleepstreet

Sleepstreet is a fully responsive website that is really pleasing to the eye, even when it is displayed on your cell-phone. Moreover, it can boast of such features as

  • a grid-style layout for showcasing various rent options;
  • a retro appearance for creating a warm and cozy home-like atmosphere;
  • a multi-language support for covering a wide range of potential customers.

The responsive behavior embraces lots of aspects. Being fully adaptive doesn’t mean solely being mobile and tablet friendly, it also involves proper display on huge desktop and notebook screens. Moreover, this feature is no longer optional; every website, whether it is an online portfolio of an artist or a regular school web page, has to quickly and efficiently react on changes related to the screen sizes. There are different ways of sorting out this issue, however we are here not to shed a light upon these techniques; we just want to demonstrate how ordinary websites, which flood the internet, are capable of gaining benefits from being responsive.

Page 1 Page 2

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

26 Comments
  1. Designrshub Oct 12, 2:10 pm

    I like those thumbnails :) Its really awesome to see a uniformed images.

    Reply
    +2
  2. Jeremy Linskill Oct 19, 4:18 am

    Great article and examples. I think something else that should be mentioned is that in the field of web design and development, we are at a point where it is impractical – financially and otherwise – for any business to attempt to keep up with the seemingly endless amount of new devices coming to market. Understanding and being able to apply responsive design is key to operating in this reality.

    Reply
    +6
  3. Sagar Ranpise Nov 3, 12:49 pm

    Very nice post on responsive design. I have also created a post on creating responsive html5 page using media queries.

    Reply
    +2
  4. Terry Nov 8, 7:11 pm

    This is a great list, I especially liked ASU’s site. I read a good article about workflows that might be helpful to others interested in responsive design.

    Reply
    0
  5. Michael Byers Nov 22, 2:42 pm

    Really good examples. I am trying hard to make sure my future designs are responsive.

    Reply
    0
  6. Tammy Cornett Dec 2, 12:12 am

    After a complete redesign and new content creation in August, this week our site (it.eku.edu) is now responsive. Our goal with the redesign was to be clear, concise, consistent and keep our content correct. The goal with the RWD is for our users (students, faculty, staff) to be able to find the IT support they need on any device.

    Reply
    -1
  7. Boris Kotevski Dec 12, 3:11 pm

    Considering the above example can be a great step in the right direction toward a good website design.

    Reply
    +1
  8. John Jan 17, 10:17 pm

    Would you prefer it to be unpredictable? That’s not good UI design.

    Reply
    0
  9. Paul Eustice Jan 18, 8:35 pm

    Some nice examples here. I recently launched my site (I actually started playing with it in December 2010 but I got lazy) which uses a responsive layout with column-count, which I haven’t seen used on any other sites.

    It’s also fluid between breakpoints, which is something I think many people miss out, to ill effect. What point is a responsive site that isn’t fluid between your set resolutions?

    Reply
    -4
  10. Joe Twumasi Jan 20, 2:31 am

    Nice list on responsive web design and looking forward in getting my new website to this technique in making it easier on different screen resolution.

    Reply
    0
  11. TJ Feb 3, 12:13 am

    This is a great article and some really good examples of responsive design.

    I think we’re really going to start to see a shift from traditional design to responsive design. It makes the most sense for client who are looking to design their website and applying similar themes to a mobile or tablet device without having to create a native app.

    Reply
    0
  12. Ken Feb 5, 1:47 pm

    Great examples of very responsive and fluid design. Really nice for inspiration for any designer willing to level up their skills for flexible work

    Reply
    +1
  13. Sheryl Feb 11, 2:11 am

    Love these examples. Does anybody have any examples or insight on how to apply responsive design to desksites that currently employ mega-dropdown navigation?

    Reply
    -1
  14. Prodyot Feb 18, 8:06 pm

    Unquestionably this is an awesome list.
    Each of them is a great treat to my responsive eyes.
    Now, had the title of this collection read “50 Mind Boggling Responsive Templates Free To Download” then maybe I would have jumped in undefined uncontrollable ecstasy and maybe would have collapsed dead with a sudden heart attack :)
    Thanks for saving my life :)
    And, thanks for sharing the list.

    Reply
    0
  15. Coco Feb 20, 9:35 pm

    Thank you for the article with those great examples. There are so many good inspirations …

    Reply
    0
  16. Sebasitan Mar 9, 4:02 pm

    Great lists that really presents at lot of interesting examples. We are currently trying to educate our clients in Responsive Design, and I will add this to a “must read list” :)

    Reply
    +1
  17. Westleigh Mar 18, 7:05 pm

    How to I brief my designers for a responsive web design layout? or is this purely a developers role where he/she must convert the design into responsive code?. How is responsive handled / done when it’s PSD to HTML/CSS?

    Reply
    +1
  18. Mads Sørensen Mar 20, 2:05 am

    Very nice examples here! RWD is moving along really fast, but I wish there was a better way to do images responsive!

    I found little browser app who’s located in the menubar, it’s really great for when I’m developing my responsive sites.

    Reply
    0
  19. Stein Mar 22, 3:08 pm

    Thanks for these great example websites! Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.

    Reply
    0
  20. Carla Dawson Apr 19, 5:20 pm

    Does anybody know of site that sells responsive design themes? Template monster has some but not enough. I am looking for wordpress themes.
    Thanks
    Carla

    Reply
    0
  21. Tony Porto Apr 20, 6:35 am

    Awesome examples that go beyond the usual grid layouts

    Reply
    0
  22. Timothy Gibson May 22, 3:28 am

    I believe that eventually, there will be more variety of layouts that uses responsive web design given the fact that it is fairly new.

    Reply
    0
  23. Russell Epstein May 23, 5:06 pm

    Great examples; thanks for sharing. We just made our site responsive. It is unique in that the images are not only fluid across screen sizes, but are draggable and droppable as well.

    Reply
    0
  24. Pavel kalivoda Sep 24, 11:45 pm

    Very nice examples. Surpisingly, there is also a new fine art photo gallery and it’s content not only adjusts to your display size and resolution. The slideshows also have real-time response to lanscape / portrait orientation of your mobile device.

    Reply
    0
  25. Virgil Mar 20, 12:31 am

    Great examples indeed!thanks for sharing this with us.Responsive design is still the future!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters