Fixed? Fluid? Elastic? Responsive? Which website layout is best? This is a question often asked by our clients, and one we ask ourselves when producing a new website. All are valid layouts in modern web design, and each has its own set of pros and cons. They are all part of what is know as a website’s presentational layer. This means that much of the usability and accessibility relies on proper usage of the underlying mark-up language and proper rendering by the specific browser. Following is an explanation of each layout as well as the benefits and obstacles unique to each one’s application.
This is one in which the main content area is set to an unchanging width regardless of the user’s display resolution. It is common for the width of the content area to be slightly smaller than the width of the average user’s display resolution. The content area is also typically centered within the browser to split the external whitespace.
- Easiest layout to design and translate into a site, resulting in less development time and lower costs.
- Greater control over the placement of content elements.
- Most predictable and consistent user experience across different resolutions.
- Designed for the average user and may not be ideal for all users.
- Users with resolutions smaller than the chosen width will end up with a horizontal scroll bar.
- Users with exceptionally large displays will see excessive amounts of white space on either side of the content area. This may disrupt the “divine proportion,” the “Rule of Thirds” and other common design principles.
A fluid layout uses content areas whose widths are set to a percentage of the user’s screen resolution. As resolution increases or decreases, the content areas will resize to maintain their proportion. A grid layout may be used, with each column of the grid representing a percentage of the screen, and content containers spanning one or more columns.
- Makes the most of available screen real estate. Content can be displayed to the edge of the browser window.
- Can be more user-friendly, as it adapts to the user’s setup and allow users some window resizing freedom.
- If designed well, can adapt to almost any resolution, making it a universal solution and eliminating horizontal scroll bars at lower resolutions.
- The designer has less control over the placement of design elements from device to device.
- More difficult to create, increasing development time and costs.
- The design must be reviewed across multiple resolutions; otherwise, issues may be overlooked because the site appeared differently on the designer’s specific resolution.
- As content areas grow to match resolution, text copy may flow into a single, long line, reducing readability.
- At exceptionally large resolutions, excessive white space may be created between content containers, diminishing aesthetic appeal.
- May cause issues with videos, images and other media when scaled to large.
- Sites containing elements fed from another source (i.e., banner ads) may not be able to resize those specific elements.
These are similar to fluid layouts. The layout measurements used for elastic layouts are relative to some internal part of the design. This is usually the font size of the main copy and is typically measured in EMs.
- In general, exhibits the pros of both fluid and fixed designs.
- Offers greater control than a fluid design.
- More stability and predictability than fluid designs.
- When implemented correctly, can be very user-friendly.
- Much more difficult to create, requiring more development time and cost.
- Requires a greater understanding of the relationships of the design elements and the math to make them relative.
- The additional bit of usability gained may not make the additional cost and time worth the effort.
Of course, combining the different layouts to create a hybrid layout is also possible. For example, a fixed/fluid layout may use a fixed width on the main content area and a fluid width on a background image for the site. Or a fluid/elastic design may allow the content to resize within a set minimum or maximum width.
What about Responsive Layouts?
A responsive layout may employ one or more of the layout principles explained above, but in reality, it goes beyond being just a design layout. By utilizing technology, such as browser detection or media queries, different layouts, and even different content, can be served depending on the device, browser or screen resolution. Responsive layouts are currently quite popular because of the explosive growth of Internet browsing on mobile devices.
- Greater control of layout across a variety of display conditions.
- Can serve device-, browser- and resolution-specific content.
- Eliminates the need to create separate mobile-specific sites.
- Embraces the concept of “design once, display everywhere.”
- Requires additional technology that may not be supported on older browsers.
- Requires additional development time and cost.
- Possibility of serving optimized images to smaller resolutions.
Overall, it is important to choose the right layout based on the content being served, the audience demographics in terms of device, browser and screen resolution, and the time and budget constraints.
To learn more about which website layout may be best for your business, contact firstname.lastname@example.org.