Responsive web design necessitates a whole new approach to architecture that is both demanding and thrilling. The art of layout was still complicated enough for centuries when it was characterized by set elements; now, as formats become more adaptive, things are getting exponentially more complicated.
We’ll look at some intriguing functional design trends that are being applied by creative designers all over the web to help retrain the brain to think about templates in different ways.
Mondrian
Our first responsive web design pattern was one that Piet Mondrian would’ve appreciated. It uses three wide and clear content areas separated by thick lines. The initial state is extremely adaptable and can withstand a significant reduction in distance.
The widescreen interface adapts and becomes a vertical layout until it becomes too narrow for the initial state. The two smaller boxes on the right are moved under the big, featured box to do this. The interface then collapses to a single column mobile view, with each piece of material clearly stacked underneath the previous.
Basic Gallery
Thumbnail galleries are a common design style that dates back almost as far as the internet. Designers nowadays normally keep them simple: simple rectangles randomly spaced on a solid backdrop. As the viewport varies, this format is very simple to reflow. Simply minimize the number of columns a couple of times.
Featured Products
This one is similar to the gallery style, but it focuses on showcasing a few objects rather than more. The example here uses four featured objects, but three items are just as common, if not more so, than four.
The layout begins with the four featured pieces side by side with some introductory material above, as you can see. It then jumps down to two columns, then one, as it follows the gallery’s direction. Take note about how the material of the introduction changes as well: Under the key headline or sign, the navigation moves from right to left.
Column Flip
This is the most difficult pattern yet. The top of the page has some very big elements that catch your eye and introduce the web. The next section is divided into three sections, but as the browser window shrinks, the first column flips over and becomes a row above the other two columns.
It’s a difficult transition, but it’s really successful. You could effectively accomplish this by inserting a media question that floats the objects in that column to the left, and clearing the float to keep the other two columns unchanged.
Of course, the final move is to reflow everything into a single large column. It can cause a lot of scrolling, but as long as the content doesn’t overflow the website, it’s not too bad.
Feature Shuffle
This last pattern is a different take on the featured items idea. It appeals to me because it creates a slight curve during the initial reflow. It provides a phased two-column arrangement with parts floated on each side, rather than merely falling to two columns and floating left.
The thumbnail images are removed entirely in the single column style to put more focus on the text content. Of course, this is optional; either of the previous single column formats may be used instead.