Explaining CSS workflow
Positioning web page elements with CSS
Creating boxouts and sidebars
Creating column-based layouts
Amending layouts, depending on body class settings
Creating scrollable content areas

Layout for the Web

Although recent years have seen various institutions offer web-oriented courses, the fact remains that many web designers out there are not “qualified,” per se. What I mean by this is that plenty of them have come from some sort of design or technology background related to—but not necessarily a part of—the Web. Therefore, we often see print designers moving over to the Web through curiosity or sheer necessity and technologists dipping their toes into the field of design.

This accounts for the most common issues seen in web layouts: many designers coming from print try to shoehorn their knowledge into their website designs, despite the Web being a very different medium from print. Conversely, those with no design knowledge lack the basic foundations and often omit design staples. Even those of us who’ve worked with the Web almost from the beginning and who also come from a design or arts background sometimes forget that the best sites tend to be those that borrow the best ideas from a range of media, and then tailor the results to the desired output medium.

In this section, we’ll take a brief look at a few layout techniques: grids and boxes, columns, and fixed vs. liquid design.

Grids and boxes

Like print-oriented design, the basis of web page design tends to be formed from grids and boxes. Regardless of the underlying layout technology (previously, tables; more recently, CSS), web pages are formed of rectangular areas that are then populated with content. However, unlike print design, web design tends to be horizontally and vertically oriented, with few, if any, curves. This is largely because of the limitations of technology; although text on a curve is a relatively simple thing to achieve in a desktop publishing application, doing the same thing on the Web is extremely difficult, unless you’re rendering text as a graphic, or using XML (SVG), which isn’t well supported across browsers. Similarly, although areas of rectangular color can easily be defined in CSS (by creating a div of certain dimensions and then setting its background color), you currently need to use graphics to have curved background areas and shapes (although rounded corners on rectangular boxes can be dynamically added using JavaScript—see Nifty Corners Cube at www.html.it/articoli/niftycube/).

A good rule of thumb for web design is to keep things relatively simple. Plan the layout on paper prior to going near any design applications, and simplify the structure as much as possible. A typical web page may end up with as few as three or four structural areas (such as masthead, navigation, content, and footer areas), which can then be styled to define their relationship with each other and the page as a whole.

Working with columns

The vast majority of print media makes heavy use of columns. The main reason for this is that the eye generally finds it easier to read narrow columns of text than paragraphs that span the width of an entire page. However, when working with print, you have a finite and predefined area within which to work, and by and large, the “user” can see the entire page at once. Therefore, relationships between page elements can be created over the entire page, and the eye can rapidly scan columns of text.

On the Web, things aren’t so easy. Web pages may span more than the screen height, meaning that only the top portion of the page is initially visible. Should a print page be translated directly to the Web, you may find that some elements essential for understanding the page’s content are low down the page and not initially visible. Furthermore, if using columns for text and content, you may end up forcing the user to scroll down and up the page several times. Finally, it’s almost impossible—due to the variations in output from various browsers and platforms—to ensure that text columns are the same length anyway. (CSS should eventually enable designers to more easily deal with these problems, but it will be some time before such solutions are supported.)

Therefore, web designers tend to eschew columns—but let’s not be too hasty. It’s worth bearing in mind something mentioned earlier: the eye finds it tricky to read wide columns of text. Therefore, it’s often good practice to limit the width of body copy on a website to a comfortable reading width. Also, if you have multiple pieces of content that you want the user to be able to access at the same time, columns can come in handy. This can be seen in the following screenshots from the Thalamus Publishing website (www. thalamus-books.com).

As you can see, the main, central column of the About page provides an overview of the company. To the left is the site-wide search and an advertisement for one of the company’s publications; and to the right is a sidebar that provides ancillary information to support the main text. This provides text columns that are a comfortable, readable width, and enables faster access to information than if the page content were placed in a linear, vertical fashion.

Fixed vs. liquid design

As already mentioned in this book, the Web is a unique medium in that end users have numerous different systems for viewing the web page. When designing for print, the dimensions of each design are fixed, and although television resolutions are varied (PAL, NTSC, HDTV), those designing for the screen work within a fixed frame—and regardless of the size of the screen, the picture content is always the same.

In a similar fashion, it’s possible to design fixed-width sites for the Web. The earlier shot of the Thalamus Books site is an example of this. Fixed-width sites are beneficial in that they enable you to position elements exactly on a web page. However, because they don’t expand with the browser window, fixed-width sites restrict you to designing for the lowest common screen size for your intended audience, meaning that people using larger resolutions see an area of blank space (or a background pattern).

You can get around this limitation by creating a liquid web design—one that stretches with the web browser window. The benefit of a liquid design is that it’s irrelevant what resolution the end user’s machine has—the design stretches to fit. The drawback is that you have to be mindful when designing that web page elements move, depending on each end user’s monitor resolution and/or browser window size. You therefore cannot place elements with pixel-perfect precision.

Generally speaking, largely text-based sites tend to work best with liquid layouts, although you have to take care to ensure the content area is always readable. (I’ve seen numerous liquid sites where the text spans the entire web page width, which is tricky enough to read at 8005600, let alone on larger monitor resolutions.) Sites that are largely image-based in nature (such as portfolios and many online magazines) tend to work better as fixed websites. For instance, for any site with fixed-width images at the top of text columns (common for online magazines), the images would not sit snugly within the columns if the layout were liquid, and could instead end up lost among large areas of whitespace.

Overall, though, there are no hard-and-fast rules and, despite what some designers might claim, neither fixed nor liquid design is better than the alternative. You should use whatever technique is suitable for each project you work on. Later in the chapter, you’ll see various methods for creating strict, fixed layout skeletons, liquid designs, and combinations of the two.

Layout technology: Tables vs. CSS

Unless you’re the sort of person who favors very basic web pages, with most elements sitting underneath each other, you’ll need to employ some kind of layout technology when designing your web pages. Historically, web designers tended to use tables for doing this, combined with invisible GIFs (sometimes called spacers or shims) to stretch table cells to the required size. In the early 2000s, CSS layouts gained a foothold, and now more and more designers are moving toward CSS as a means of page layout.

With few exceptions, pretty much everything you can do with a table can be done faster, better, and with a greater emphasis on accessibility when using CSS. With content and design separated, it’s much easier to tweak or rework a website, because you’re editing an external document that controls spacing and positioning, rather than messing around with complex tables. We discuss one of CSS’s major benefits in this regard, how it encourages logical element placement, in the next section. Tables should really be reserved for their original purpose: formatting tabular data.