Designing static, adaptive, and liquid layouts. What you need to know.

In this day and age, responsive web design can be found in every corner of the web. You will stumble upon the occasional outdated design, like the Space Jam website , but almost all new web designs utilize responsive design. With smart phones and tablets showing no sign of disappearing anytime soon, knowledge of responsive designing techniques are a must for any front-end developer. One major subjects when considering what to utilize during the designing process is the pages grid layout.

When researching responsive grid layouts you will more than likely stumble across static, adaptive, and liquid layouts. Understanding these three concepts means that you understand all the different layout changing options your web page potentially has. Each has its pros and cons and one will never be the best choice every time. Knowing what the page should look like given different screen sizes is one thing, but you also have to take into account dynamic material, future advancements, and most importantly, user experience.

Static Layout

Sometimes called a fixed layout, a static layout uses a predetermined page size and does not change based on browser width. This is how websites have been built up until media queries and other responsive techniques hit the scene around 2010. Today there are many sites that only support page width up to 1024px. This will work quite well for an iPad in landscape but that’s as small as they can go without rendering the page in unpredictable ways. Apple.com is a perfect example of a successful static layout.

Liquid Layout

Sometimes called a fluid layout, a liquid design uses percentages of the page instead of pixels to calculate width. This should make the page fully responsive right? It turns out that if the browser window is very wide, the content could stretch causing undesirable effects. The same is true with a very small window width. The page navigation menu items could be bunched together so much that the user can’t click on a link without zooming in, or accidently hitting a different link. User friendliness is a must if you’re going to incorporate smartphones and tablets into your layout design.

Adaptive Layout

Adaptive layouts use CSS media queries to detect the width of the browser and change the layout accordingly. Adaptive layouts use pixels when setting width just like a static layout, but when the screen width changes the media queries take over, and apply a fixed width set for that screens current width.

Using media queries a web site cannot just change the size of elements on the page as the page width changes, but also the design as well. That means that when the screen gets too small for the navigation menu items to be easily clicked, or read, instead you could just have a media query at that window width to change the CSS of the navigation elements completely. For instance, most modern website designs turn the navigation menu into a drop down list for smart phones.

You can start to see why one specific grid design not will fit every situation. The compression of navigation menus when crunching down to the cellphone level has become somewhat of a standard. If you only have three links in the navigation menu it actually become another step for the user, and results in negative user experience. The more negative a user’s experience is  the less likely the user will return. There are more layouts and terms out there that I’ve heard, but that about covers the basics.

James Miller

Written by James Miller