Web design layouts can be tricky. In an increasing connected, mobile world, web designers need to accommodate a variety of devices, web browsers, and apps. One size doesn’t fit all anymore. Various web development techniques offer a solution to present the same material but in different web design layouts that best fit the viewer’s particular browsing environment. Fixed design, fluid layouts, adaptive layouts, responsive web design (RWD), and mobile-first design are all popular web design layout strategies.
Summary of Web Design Layout Techniques
These web design layout techniques include:
- static or fixed design
- fluid layouts
- adaptive layouts
- responsive design
- mobile-first design
Web Design Layouts for Different Sizes
Devices range from something as small as a smartphone to a desktop computer to a smart TV mounted in the presentation room. There are so many sizes—and sizes aren’t standardized either! Even iPhone version to iPhone version can change its screen size. Even then, within devices, sizes change from landscape to portrait orientation. Mobile devices create the additional challenge of accommodating finger sizes, too.
Web browsers too present yet another challenge, as each one parses the web code differently. (Think: Internet Explorer vs. Chrome.) Some features gain and lose support, affecting layout design.
Emails too! When I designed HTML emails, I also had to consider whether the user opened the email in an email client like Outlook or Thunderbird, or a web app like Gmail or Yahoo!—because even then they handle layout design differently! For example, one ignores borders, another displays borders but ignores border: box to contain them; and a third supported them in an earlier version then dropped them later. (Check out my article on HTML email tricks for a comparison of what each popular email client supports and how to get around what they don’t!)
Static or Fixed Design
“Quick & Dirty.”
Static design is fairly obvious—the element sizes are set in pixels and don’t change no matter what; they are fixed. It is the simplest layout technique to employ, because the web design designs only a single version of the layout. It can be quick. Static design feels familiar to print designers because static design presents a single template.
Static design can also be seen when web design layouts change up until a certain point and then remain the same as the screen size continues to grow. The breakpoint of 800px has been a popular choice because this size used to represent the viewport size of the majority of computers.
Static or fixed design is a great method to consider when a user always uses the same browsing environment, as when it is known for certain a user will access a web design from the same device with the same web browser. Some apps take this approach. Static or fixed design is also great when the budget and timing calls for something quick and dirty, such as website prototypes or “working sketches.”
However, because static layouts don’t change, the user’s browsing experience might be interrupted with unsightly horizontal scroll bars, cropped content, under-or oversized content, and other things upsetting to users.
Wild Examples of Static Design:
The website for Fruita Blanch uses a fixed or static web layout. This is ideal to maintain the mixture of typographic treatments and asymmetrical layout. However, the website lacks appeal and usability on mobile devices, where the web design fails to resize for smaller viewports.
Another example of a static layout is the interactive infographic, “Should I Work for Free?” designed by Jessica Hische. This infographic fails to resize for smaller viewports, but then the infographic would no longer be readable or usable. The static layout is also key to maintaining the positions of the many flowchart boxes, which would otherwise have far, far too many breakpoints to code and slow website performance.
“Everything Is Relative.”
To best way to describe fluid is “everything is relative.” Fluid layouts use percentages (i.e. relative sizes) to change sizes of elements according to their containers, like the viewport size of the device. However, the proportion between elements will always stay the same. A sidebar set to 33% width stays 33% wide on desktop computers as well as mobile devices.
Fluid layouts are great when a layout needs some flexibility. Images, for example, perform very well in fluid layouts, because typically the designer wants the image to remain as large as possible in the viewport without breaking the layout to ensure maximum exposure of the material to the user. Fluid layouts can also be simple to setup like static layouts. Many times a simple unit switch, such as from pixels to ems or percentage points, instantly makes a layout fluid.
Nonetheless, fluid layouts still have one of the same weaknesses as static or fixed layouts—the proportions between content are still fixed and don’t change. Like in the sidebar example above, sometimes fluid layout make the web design no longer usable. Images or text become too small to read on small devices, or alternatively on very large devices, certain elements become oversized and carry more visual weight and emphasis than intended.
Wild Examples of Fluid Design:
Cleverism provides a fluid flowchart to illustrate the career path of an Interaction Designer. The flowchart resizes based on screen size, looking great on larger viewport but nearly impossible to read or manipulate on small viewports.
Another example of fluid design is this photo collage from my Townhouse Landscape Proposal Web App. I have succeeded in coding and positioning each image independently (as three separate images). However, I had to define a ridiculous number of break points to re-position each image any time the screen size changed. In this scenario, saving the collage altogether as a single image and using fluid design to resize the graphic maintains a readable, consistent viewing experience.
“Divide & Conquer.”
Adaptive layouts detect the device the user is using and provides a template suited for that device.
In the past of adaptive styling, the same web page design was converted into completely separate templates for each device. For instance, an index page for a desktop, another index page for a tablet, and a third for a smartphone. As a result, this duplication made it difficult to modify, maintain, and troubleshoot. The same pages would be re-made over and over again.
In modern days, there are no longer separate pages of templates for each device. Instead, adaptive styling can be done by detecting a variety of fixed viewport sizes. This allowed the web designer to work with a single page again, and so removed some of the duplication problems. Adaptive layouts also provide more flexibility over static layouts like fluid layouts, because they rearrange the content neatly to best fit each device. The trend of designing web designs around popular breakpoints for iPhones, Galaxies, etc. stems from this.
Adaptive layouts are great when users use multiple browsing environments, but those environments don’t change much. When smartphones began to sweep the market, adaptive layouts were ideal. Sizes stayed roughly consistent within brands, even different brands used different sizes. Then market competition increased. Smartphone makers began to appeal to users with new competitive features. For instance, bigger screen sizes, and eventually phablets and tablets also swept the market. Consequently, so many different screen sizes flooded the market, that adaptive layouts struggled to address the multitudes of breakpoints. Once again, the web design became difficult to manage.
Responsive Web Design (RWD) and Mobile-First
“That Which Yields Is Not Always Weak.”
Responsive layouts are essentially the culmination of all the trends above. They use @media queries to resize elements of *all* viewport sizes, including those popular break points as well as every pixel in between. Responsive layouts are great for future-proofing, because mobile device sizes are always changing.
Similarities between Responsive Web Design (RWD) & Adaptive Web Design Layouts
Responsive is similar to adaptive in that a single web design changes at various breakpoints. So, responsive layouts are not much more difficult to make than adaptive ones.
In adaptive design, the starting point is popular device screen sizes; then the design must adapt.
In responsive design, the starting point remains in the web design. Basically, it’s impossible to find every device breakpoint out there; there are simply too many and they change all the time! Rather, the responsive web designer instead checks for points when the layout breaks and designs to those breakpoints only. Those breakpoints may or may not match with popular device screen sizes. There might even be less breakpoints for simple layouts, or even more breakpoints for complex layouts. There’s a breakpoint check regardless, but responsive web design approach is more strategic.
Most importantly, responsive web design sets its own custom sizes and doesn’t attempt to retrofit to a specific device.
Similarities between Responsive Web Design (RWD) & Fluid Web Design Layouts
Responsive is similar to fluid in that it’s flexible. However, the main differences are that responsive layouts specifically use
@media queries. Because of that, responsive layouts can change those proportions. For example, responsive layouts might set a sidebar to 100% width when the viewport is less than 500px wide. Then, it might the sidebar to 33% wide at 501px and above.
Responsive web design is great when the web design must fit a variety of unknown or constantly changing web browsing devices—whether smartphone vs. desktop, or finger-friendly vs. mouse-friendly.
Furthermore, responsive web design is particularly advantageous for future-proofing. A responsive web design might only need to be revisited after significant content changes, which don’t occur very often. Also, a responsive web design doesn’t break when a new device or screen size hits market.
Additionally, responsive web design combines with fluid layouts very well. Indeed, many
@media queries in a responsive web design stylesheet include attributes values that would be the same in a fluid layout. Responsive web designs can be more time-consuming to implement in the short term. Yet, they reduce maintenance in the long-run, thus saving time. They also help maintain a consistent and pleasant viewing experience for a wide variety of users.
Wild Examples of Responsive Design:
Mobile-First Responsive Web Design
Mobile-first responsive web design is a web development practice in which the designer works from the bottom up. To clarify, they start designing for smaller sizes first and gradually increase sizes and display content via
@media queries as the viewport sizes increase. This method forces the web designer to prioritize content more strictly. Mobile-first design considers how not everything can fit, nor be given equal weight, on smaller screen real estate.
Mobile-first web design can even be thought of as thinking “backwards.” Many designers prefer to start with a large desktop size. The underlying perception is that the larger designs are more “finished.” As a result, sometimes the designs for smaller layouts are simply compromised versions of their bigger selves.
Mobile-first flips traditional thinking to give greater consideration of smaller layouts. Since more users are browsing primarily from mobile devices than desktop computers now, smaller layouts are growing more important. In fact, as of one year ago, mobile browsers officially overtook desktop browsers:
51.3% of global browsing occurs on mobile devices and tablets vs. 48.7% on desktop computers.
StatCounter, November 2016, via The Guardian
The mobile-first design may not look much differently from the traditional responsive design but often performs better. For example, bigger, data-heavy images don’t load until the viewport hits a certain size. So, bigger, data-heavy images may not load at all on small mobile devices. Consequently, mobile-first web design can decrease download time. Users can browse faster, plus use less mobile data.
Other mobile-first design practices improve browsing experiences on large devices too. The trend of using bigger buttons that are finger-friendly also makes buttons easier to find and click on desktop computers too, a handy feature that makes a webpage even more accessible to users with physical impediments like arthritis. Another trend of collapsing menus can also enhance the browsing experience by leaving emphasis on the important parts of the message and removing distracting elements.
One Size Doesn’t Fit All
It’s easy to see why one web design doesn’t fit all screen sizes now. These web design layout techniques offer various solutions to a common problem—offering a pleasant browsing experience to users no matter the device.