Web design
Raiting:
2

5 really useful design patterns of adaptive layout


image

The adaptive layout requires a completely different way of thinking when planning its structure that is both the challenging and the interesting. In order to reprogram your brain to look at these layouts differently, we're going to take a look at some interesting patterns of adaptive layout, which were created by talented designers around the web.


Starting small

One of the most popular ways to create the adaptive web design is to assign the rubber width to the columns of the content on the page that becomes narrower and narrower as the page width decreases until the one major jump to a single column mobile layout. This technique can be seen at work on the luxury hotel site 137 Pillars House.
image
As you can see, the pattern only goes through one serious transformation. The rest of the adaptation is only in the narrowing of the initial layout.

A lot of designers use this technique. This is the perfect solution to begin with, because it requires much less time and effort to develop than a few major transformations. In addition, the website looks good at any window size.

Instead of simply flirting with adaptability, I encourage you to take a decisive step forward and explore the vast possibilities that are now available for you in terms of layout design. Do not get me wrong, there is nothing wrong in the way presented above, but it is always good to improve the skills a step further.

Mondrian

image
Our first pattern of adaptive layout has already been evaluated previously by Pete Mondrian. It uses 3 simple and large areas of content that are separated by thick lines. The initial state itself is quite universal, and it can reduce its width.

When it becomes too narrow for the initial state the widescreen layout adapts and becomes the vertical. This is achieved by moving the two small boxes on the right under the big box. Then it takes a standard mobile view where each part of the content is placed below the previous one.

Here are some web examples

We found this pattern on the website of Andersson-Wise that is an architectural company. It is evident that it is ideal for displaying large and beautiful photos. In addition to the main content there are the photo and 2 side boxes that are simple and filled with a solid background. A strong and clean font gives the site a very elegant and nice feel.
image
Considering that the layout is box-driven here should be used this type of pattern. If you have a minimal amount of the content to work with, you should give it a chance.

Base gallery

image
The thumbnail galleries are a very popular pattern for design that exists as long as the web itself. Today the designers usually keep them minimal, they are simple rectangles evenly spaced on a solid background. This format is very easy to adapt for change of the screen width. You just have to reduce the number of columns a few times.

This process is described step by step in our other article on building a responsive thumbnail gallery, so I will not describe it in detail here.

Here are some web examples

To see this model on a real website, you can visit the site portfolio of Brad Sawicki. There is a simple three column gallery on his homepage that falls down, turning into a two column, and then in one column layout. The advantage here is that the screenshots of his works take the maximum possible size to fill the free space on the screen, so that the viewer can always see them in a good, large format.
image

Highlighted items

image
This layout is similar to the pattern of gallery, but it is more directed at highlighting a greater number of items. The example here uses four separate items, but it can be used for three as well.

As you can see, the layout begins with the four items arranged next to each other, with some introductory content from the top. Then it follows the path of the gallery layout, jumping down to the two columns and, finally, turning into one. Notice how the introductory content is transformed: the navigation originally is located on the right, then it moves to the left side just under the header or logo.

Here are some web examples

The web development Splendid company makes perfect use of this model on the website. They even make animation transitions. This was done specifically for design nerds who deliberately alter the size of their browser just to see the transformation of the layout.
image
This website is an example of a really good implementation of the adaptive layout. It always looks good at any window size with its pixel perfect artfulness.

Mirror column

image
This is one of the most complex patterns. At the top of the layout are placed really big items that attract your attention and introduce the website. The next part is divided into three columns, but if you reduce the size of the browser window, the first column is turned on its side and becomes the line that is higher than the other two columns.

It's complicated, but it is quite effective transformation. You can achieve this using the media query, making the items of a column floating with the flows around to the left side, and then clean it up afterwards, so the other two columns stay intact.

The last step is of course straightening these items to one wide column. It can lead to quite a long scroll, but as long as the items do not overflow the page, it's not so bad.

Here are some web examples

The inspiration for this layout comes from the website of Palantir development firm. Pay attention to the fact that first the web developers experimented with adaptive layout on their own sites that can serve as a great experience for learning and an example for the clients.
image
Palantir is a striking example of how intensive can be the transformation of adaptive layout. This is more than just reducing the width of a column or eliminating it completely, it represents a significant adaptation of content that are constantly taking the maximum available width.

Mixing

image
This last pattern is different from all others. I really like it because it generates a small curve in the first transformation. Instead of simply shrinking to two columns and floating left it creates a two column layout, where sections are placed in a checkerboard pattern on both sides.

For a single column layout, images are removed entirely to provide a greater emphasis on the textual content. This is optional, of course. You can make the formation of a single column as it is shown in the previous patterns.

Here are some web examples

Orestis uses this model on their website. 3 selected items are services that they offer, each of which is represented by a colorful illustration.
image
When you resize the browser window, the services shrink and their images are being placed either left or right. It's a fascinating and unusual website that you should check out yourself to feel how everything works.

More patters

image
In my research for this article, I run into an existing article of Luke Wroblewski on the same topic. Instead of looking at the specific patterns, as I did here, Luke is doing a terrific job, breaking down the stereotypes of regular layouts and showing you how they work. This is a very big piece of work and I really like the way as he shows the behavior of layout from the inside.

Conclusion

I hope that your mind now is reconsidering a new look at the adaptive layout. The web design community has spent a lot of time discussing the technical aspects of how to implement the adaptive layout using CSS and media queries. It's time to start thinking more deeply about the important aspects of design using this new and exciting technology.
0
Killer 18 april 2012, 13:18
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute