Web Design Inspiration: Responsive Web Design


Since adaptive website design is a talk of the office for more than just a year I also want to contribute and make small collection of websites that have perfectly implemented this trend or should I say “must have”.

Today I`ve collected 10 special and 10 fresh examples of responsiveness in website design.

Further reading

1. Newsportal – The Boston Globe

Small screen monitors

  • smaller thumbnails on home page
  • still 3 but rather narrow columns


  • 2 small columns
  • sidebar is on the bottom
  • images smaller than on small screen monitors


  • only 1 narrow column
  • image is about the same size of images on ipad screen

The Boston Globe

2. Gallery – Andersson-Wise Architects

Small screen monitors

  • instead of two only one big column
  • fixed menu without any changes in size
  • smaller blocks of content


  • the same structure but smaller sizes of all essential elements: images and blocks
  • only menu without changes


  • as usual only one column with image and content placed in vertical tandem
  • images much smaller than images on ipad

Andersson-Wise Architects

3. Online portfolio – Spigot Design

Small screen monitors

  • the same amount of columns
  • smaller gutter width
  • the same size of menu


  • the same size of menu items but less gutter width between them
  • only 2 columns
  • the same size of images


  • menu items in 2 columns
  • only 1 column for content
  • smaller size of images

Spigot Design

4. Event website  – Earth Hour

  • Small screen monitors
  • the same structure but no outside gutters


  • smaller menu
  • smaller gutter width between main parts of header in slider section
  • instead of 2 columns only 1 but with the same image size


  • all elements (menu items, parts of welcome message and content section) are accommodated into one column by means of reducing size

Earth Hour

5. Great example of using grid in responsive web design – Simon Collison

Since grid is fundamental element of any website design, first of all you should decide how properly manipulate with it while creating responsive layout.  Simon Collison elegantly solve this problem.

On wide screen you`ll see all 4 columns with proper image sizes, further the smaller size of screen the less number of columns will appear. One of the greatest things on this design is that most of images don`t cahnge their size dramatically since Simon choose to change amount of columns not quality of visual data.

Small screen monitors = iPad (Landscape)

  • still 4 collumns

iPad (Portrait)

  • only 2 columns
  • the same size of the headline
  • the same size of the images


  • 1 column
  • images and block of posts slightly smaller than on ipad

Simon Collison

6. Blog – Smashing Magazine

Responsive design for this type of websites is must have since a great deal of people that everyday visit blogs should have opportunity to surf them easily by means of any device.

One of the greatest things in this design is that you can always find so helpful and so demanded search field at the top of the site.

Small screen monitors

  • visible transformation with left sidebar and menu section
  • the same images
  • the same adv section, essential for those who use blog for alternative income


  • another transformation with menu and left sidebar
  • disappearance of optional right sidebar


  • one compact column with recent posts
  • smaller images
  • special dropdown menu for categories

Smashing Magazine

7. Great example of using textures and patterns – Halifax Game Jam

As you can see any website design even so heavy and rich in textures, patterns and designer`s elements can be responsive.

Small screen monitors = iPad

  • the same structure
  • less outside gutter width


  • one column in which you`ll find the same elements even textures
  • some text`s blocks become even bigger

Halifax Game Jam

8. Great example of gradual transformations – Jchebly

Small screen monitors

  • bigger images
  • 4 columns have been transformed into 2
  • transformations with menu items
  • appearance of additional logo in the center


  • smaller images
  • reduce of gutter width between menu items


  • circles into ovals
  • menu items into rectangles


9. Beyond Tellerrand Conference

In this design you can see gradual reducing of main element`s size. Images, logo, content section – all of them change their size according to screen size. Only in iPhone version you can see changes in menu. Even column amount hasn`t changed until iPhone and small tablet versions.

Small screen monitors = iPad

  • the same amount of columns
  • the same size of images
  • only reducing of outer space


  • 3 columns instead of 4
  • changes in menu

Beyond Tellerrand Conference

10. CSS-Tricks – Another great example of responsive blog design.

Small screen monitors

  • 2 columns instead of 3
  • the same size of logo and mascote


  • 1 big column instead of 2
  • transformation with menu items
  • the same size of logo and mascote


  • one column
  • menu items one after another
  • the same size of logo and mascote


Some fresh examples

1. Performance Marketing AwardsPerformance Marketing Awards

2. HeathlifeHeathlife

3. AtommicaAtommica

4. Fray Fray

5. LogOutLogOut

6. TreehouseTreehouse

7. Matt SpiroMatt Spiro

8.  Orestis Webdevelopment Orestis Webdevelopment

9. Theme LoomTheme Loom

10. Macdonald HotelsMacdonald Hotels

Check mediaqueri for more fresh and useful examples.

  1. Why do you refer to the designs served to phones as iPhone? Why not phone? All browser statistics are showing Android leading iOS not to mention the huge percentage on Opera Mobile….

    1. I’ve written ipad and iphone since majority of people understand sizes of theirs screens. That`s all.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

Exquisite Type-Inspired Packaging Designs

The modern packaging design always draw attention, since designers effectively show how to create quite memorable and unique cover for the rather small goods. Today we are going to showcase…

Inspiration Findings #13

We didn’t issue Inspiration fundings rubric last week due to several problems, so this week we will be in the role of catch-up and definitely publish more then 1 creative…

Awesome Bicolor Website Designs

Generally the choice of the colors determines future succes and attractivness of the website design. So it’s  imperative to pick up the right color palette. Of course, you can experiment…

Collection of Free Mobile Device PSD Templates

As mobile industry conquers the world more and more designers are lacking for good high-quality mobile device psd mockups in order to provide themselves with helpful tools that are intended…