Responsive Web Design: 50 Examples and Best Practices

  •  16 Comments

Do Lectures

Do Lectures is a regular blog that makes use of a 3-column format layout that effectively copes with lots of news and posts populated with images. The website has an old-timey feeling because of its conventional markup and lack of any dynamic elements.

Coming with the retina support, the website looks fantastic on huge desktop and notebook screens, whereas on small tablet and mobile screens everything is not so rosy. The responsiveness, unfortunately, is not fully thought-out here, leaving users of mobile web with ill-suited horizontal scroll bars.

St Paul’s School

Nowadays, a great deal of educational institutions has their own websites. Even the official page of the St Paul’s School is not lagging behind others, having a website with

  • an appropriate discreet appearance;
  • highly informative home page;
  • comprehensive navigation;
  • and of course, mobile and tablet friendliness.

And concerning schools, it is really something. Having a fully adaptive well-crafted website that not only reveals necessary information but also has a pleasant design supported by flexible grid looks like a jump above its head.

Naomi Atkinson Design

Naomi Atkinson Design is a small passionate UK-based design studio that has a tightly-packed together website. The team employs a boxed-style layout with centered content diluted with minimalism that is aimed to:

  • briefly but efficiently display data;
  • instantly catch the viewers’ focus and draw attention to portfolio items;
  • provide users with a handy instrument for quick feedbacks.

Moreover, such layout is really easy to turn into responsive one, so it’s quite beneficial solution.

Ben Handzo Photography

After casting a mere glance at the website, it becomes clear that the artist is simply obsessed with photos. The home page of his online portfolio is packed with images; there is absolutely no text, with the exception of navigation and small panel placed on footer. Moreover, being bolstered by a responsive grid that handle all the inconsistencies occurring during adaptation to smaller screens, the website brings benefits not only to the owner but also to online visitors by giving them a chance to enjoy spectacular works no matter where they are.

Stunning CSS3 Media Queries Example

As you have already noticed this is another website in our collection that is dedicated to responsive solutions called media queries that are highly popular among developers nowadays.

Of course, the design, styling and semantics are quite primitive here, however they are not highlights; the flexible grid that plays a role of a solid foundation for this project is a true star here. The website serves as a mere example that graphically formulates the rules of graceful degradation for a standard 4-column layout.

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.

Newsletter

16 Comments
  1. 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.

  2. 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?

  3. 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.

  4. 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.

  5. 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

  6. 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?

  7. 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” :)

  8. 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?

  9. 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.

  10. 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.

    • Patzilla Apr 15, 5:58 am

      Exactly. I had just altered my own and my clients’ sites to accommodate larger resolution screens and now find myself doing the opposite or compromising eye quality for “thumbster” quality. I also am finding coding for this difficult to implement since I’ve done my own html for so many years. [shrug]

  11. Tony Porto Apr 20, 6:35 am

    Awesome examples that go beyond the usual grid layouts

  12. 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.

  13. 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.

  14. Reseau Mar 21, 12:27 pm

    Little curious about AMP beside responsive design.

  15. kamal mondal Mar 28, 6:59 am

    very helpful guide for responsive website design.

Leave a Reply

*
* Minimum length: 20 characters