Differences Between 3 Types of Responsive Layouts

Nowadays a significant number of people surf the Web using mobile devices such as tablets or smartphones. Responsive websites have become the standard, not only to provide a higher level of user comfort but also to improve the site's SEO. When it comes to responsive web development, we have basically three layout types to choose from. How to pick the right one for your project? Which one is better? Let's start by outlining the basic differences between them.

Responsive layout

Responsive (also called "adaptive") design is built from static blocks with fixed width, expressed in pixels. Let’s assume that we have a two-column layout consisting of the article (blue) and the sidebar (yellow).

Click and drag the handle below to change the preview's size.

The article column is 200px wide, and the sidebar column is 150px wide. The basic responsive layout will adapt to specific screen widths called breakpoints. If the browser window is narrower than 500px (grey background), we can use additional styles. In this case, we put the sidebar above the article. Note that the layout changes at a certain point when we cross the 500px breakpoint.

Fluid layout

A fluid website usually fills the whole width of a browser. It uses relative units to fluidly adapt its layout to any browser/device. Let’s make our columns fluid:

In the vast majority of cases, fluid layouts are more time-consuming both for a designer and a developer. It needs to be determined how elements inside a fluid block should behave, for example, whether they should expand or align in any direction, which generates additional issues. The fluid layout can be very tricky in more complex projects, so usually a more practical way to go is fluid-responsive.

Fluid-responsive layout

Quite often we need to mix adaptive and fluid techniques. Let’s say we need the article and the sidebar columns to take 100% of the browser’s width, but on mobile devices, the sidebar is set below the article (breakpoint 500px):

Generally speaking, the idea behind a fluid-responsive layout is that it uses fixed widths in pixels for defined breakpoints and fluid relative units (for example percents) between these breakpoints.

Examples

The most common layout is a responsive or adaptive layout. It’s the easiest one for a web designer to create and usually, it’s the most readable for the user. We can use the whole width of the screen, but the content is always wrapped in a container which has fixed width – 620px in this case:

If you reduce the window’s width, you will notice that the layout has its breakpoint at 620px. Below this resolution, every section is fluid, which means that it’s always 100% wide. The title in the article block is situated above the content. So even if below the 620px breakpoint everything is fluid, we still call the whole website responsive (adaptive) layout. This is because it’s a standard technique to make the mobile layout fluid (and by “mobile” we usually mean everything below 767px). With so many handheld device types around it’s the safest way to ensure that the design will look good on any smartphone screen.

Many designers claim that fluid layout looks generally more original and modern, attracting the eye by using unusual solutions. However, sometimes a simple basic layout is a better way to communicate with the customer. It’s a huge simplification, but usually, fluid layout has a stronger impact on a user in the first moment. Still, if we want to focus on the content, very often a basic responsive layout is more comfortable.

Let’s take this layout:

You can notice that here we also have a breakpoint at 620px. The layout changes below this breakpoint, so there are some adaptive techniques here, but in general, the page uses a fluid layout. Another interesting example could be a vertical fluid layout, where we have to stretch the website to 100% height of a device’s window:

As you can see, there are many ways to build responsive websites and sometimes it’s hard to tell at first glance what kind of responsive layout we should use. Moreover, there are many other issues related to responsiveness: should we build mobile-first or desktop-first views? What breakpoints should we use? Should we use vector format graphics? Is it necessary to use retina bitmaps? All of these questions need to be answered individually. And, of course, our developers are always happy to provide assistance if you are not sure what is the best approach for your project.

Need help with your design? Contact us!