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

• Getting started with Responsive Web Design 100 articles and tutorials

1. Newsportal – The Boston Globe

Small screen monitors

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

iPad

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

iPhone

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

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

iPad

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

iPhone

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

3. Online portfolio – Spigot Design

Small screen monitors

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

iPad

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

iPhone

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

4. Event website  – Earth Hour

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

iPad

• 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

iPhone

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

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

iPhone

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

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

iPad

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

iPhone

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

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

iPhone

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

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

iPad

• smaller images
• reduce of gutter width between menu items

iPhone

• 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

iPhone

• 3 columns instead of 4
• changes in menu

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

iPad

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

iPhone

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

Some fresh examples

1. Performance Marketing Awards

2. Heathlife

3. Atommica

4. Fray

5. LogOut

6. Treehouse

7. Matt Spiro

8.  Orestis Webdevelopment

9. Theme Loom

10. Macdonald Hotels

Check mediaqueri for more fresh and useful examples.