A static page layout (sometimes called a “fixed” layout or “fixed width” layout) is the original site design from way back in 1995. It uses a preset page size and does not change based on the browser width. Re-sizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn't look good on tablets or smartphones.
A liquid page layout (sometimes called “fluid” or “fluid width”) uses relative units instead of fixed units, and will often fill the width of the page, no matter what the width of the browser might be. Liquid layouts don’t require as much thought as a responsive design, and there are some major drawbacks at very large or very small browser widths. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.
An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed units such as pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries. The major drawback is that device widths in-between the explicit breakpoints are often less than ideal, with either too much space or not enough space.
A responsive page layout uses a fluid grid and media queries to control the design and its content as it scales down or up with the browser or device, and uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout. As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width.
Typically responsive designs are built using a mobile-first approach. That means the mobile layout is designed first, and then as the browser becomes wider on tablets and desktops, the designer will find ways to expand the mobile layout. This tends to create better experiences overall, because it’s easier to expand a design than to try and simplify a large layout for mobile screens.
So now you know why we design responsive web sites for our clients. Click here to read about the 4 key reasons why you should choose a responsive website.