Page Layout: Overall Design Strategies

Overview

In the early days of the Web, pages were displayed in a single column. However, designers quickly started looking for ways to make web pages look more like print media such as newspapers and magazines. One of these designers discovered that the <table> element could be used to display content in multiple columns. This was not what tables were designed for: They were designed specifically for displaying rows and columns of data (as you learned in the earlier lesson on Data Tables). However, the idea quickly took off and most web pages throughout the late 1990's used tables for layout.

Cascading style sheets (CSS) had been around since 1996, when the first CSS specification was published. However, it took a while for browsers to support CSS. The CSS 2 specification was published in 1998, more browsers began to support it, and more web designers began using it. Nowadays virtually all web designers use CSS for page layout.

CSS layout has important advantages over table-based layout. It requires relatively little code, which translates to smaller file sizes and faster downloads. Less code also makes the page easier to update and maintain. Also, pages that use CSS for layout can adjust better to the size of the user's display; tables don't wrap, so viewing a table-based layout on a small screen can require lots of horizontal scrolling: Not good.

So the decision of whether to use tables or CSS for layout is an easy one. But a more difficult decision is: Do I use a fixed width design or a fluid design?

Fixed Width Design

One approach to designing a web page is to define a specific page width in pixels. For example, the following code would force the body of your web page to be 1000 pixels wide, and would center it horizontally in the browser window:

body {
  width: 1000px;
  margin: 0 auto; /* this margin property causes the content to be centered */
  border: thick solid black;
  padding: 1em;
}

You can recognize fixed width designs on the web by resizing your browser window when viewing a web page. If the content remains the same width when you resize your window, it's a fixed width design. The problem with having a fixed width is that there a wide variety of screen resolutions in use today. If the body of your web page is fixed at 1000 pixels wide, it won't all fit if someone is viewing the page at a lower resolution. These users will have to scroll horizontally to access hidden page content, and nobody wants to do that. One solution is to set the width to a value that is likely to fit for most users. If you have a website that's designed for web designers and programmers, that audience is likely to have higher resolution screens (1024 pixels or higher), so you'd be relatively safe designing a site that's 1000 pixels wide. However, if your audience might include people who don't upgrade their technology on a regular basis, you should design a site that will fit on lower resolution screens. A design that's 720 pixels wide will fit comfortably within an 800-pixel wide screen, which is a common default resolution on older desktop monitors and is still highly common on projectors.

The problem with a fixed width design is that one size really doesn't fit all. A fixed design may be perfect for a few users, but for many user's it's either too wide or too narrow, depending on their screen resolution. However, a fixed width design may still be the best choice if your design includes graphics. Since graphics are a fixed size, you know exactly how wide you need your page to be in order to hold those graphics. If the width is too small, the graphics will overflow the boundaries of their containers.

Fluid Design

A fluid design, also known as a liquid design, is a design in which the width is defined using percentages or em's, or not defined at all. With this type of design, the content automatically flows and repositions itself to fit the user's browser window. This type of design forces designers to be more flexible, and not be attached to their page having the same exact layout for all users. It acknowledges the differences between users' technologies, and tries to deliver content in a way that works best for that user's settings. For example, the following code defines the width of your body to be 70% of the browser window. If you expand or contract the size of your browser window, the size of your body changes accordingly:

body {
  width: 70%;
  margin: 0 auto; /* horizontal center */
  border: thick solid black;
  padding: 1em;
}

As noted above, the problem with a fluid design is if you have images that are say, 800 pixels wide, and those are inside a container that's only 720 pixels wide, the images will overflow their container. That isn't necessarily a problem though, because images can be fluid too. The following code will prevent images from exceeding their boundaries—if a container is too small to hold an image, the image will be resized to fit:

img {
  max-width: 100%;
}

This isn't a perfect solution, because historically this technique has resulted in a reduction of image quality in browsers on the Windows operating system. There are technical solutions for this too, but they're beyond the scope of what we'll be covering in this course.

Hybrid Fixed/Fluid Design

One strategy that captures the strengths of both fixed and fluid design is to use a fluid design, but if there's a width below which your design starts to fall apart, you can set a min-width property that requires the width to be at least a fixed number of pixels. For example, the following code is the same as the fluid design example above, but the design stops flowing at 720 pixels—it won't get any more narrow than that.

body {
  width: 70%;
  min-width: 720px;
  margin: 0 auto; /* horizontal center */
  border: thick solid black;
  padding: 1em;
}

Mobile First and Responsive Design

These days, the problem of developing content that fits all screen resolutions is compounded by the fact that so many people are now accessing the Web on a wide variety of mobile devices, including cell phones and tablets. The idea that one size does not fit all is more true today than ever before when it comes to web design.

A new design philosophy called responsive design has emerged to address this problem. The idea is to create multiple designs for users on various devices. CSS3 provides a means of detecting characteristics of the user's device, so different styles can be applied based on those characteristics. A companion approach to this philosophy is mobile first, in which the designer starts with a simple design that works well on mobile devices, then expands upon that to build progressively more complex designs for higher resolution devices and displays. Responsive design techniques are beyond the scope of this course, but if you'd like to learn more Kayla Knight's article Responsive Web Design: What It Is and How To Use It in Smashing Magazine is extremely comprehensive.

The Boston Globe: The Evolution of the Web

The Internet Archive is a non-profit organization dedicated to preserving the history of the Web. Their Wayback Machine enables us to search the archives for historic versions of web pages dating back to 1996.

The Boston Globe website provides a good example of how web page layouts have evolved over the years. As you look at these examples, try resizing your browser window to see what happens. Check out the source code on these pages to see what's under the hood: