In this chapter:
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 design- ers 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 back- ground 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 render- ing 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 divof 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
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 understand- ing 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).
7
As you can see, the main, central column of the Aboutpage provides an overview of the company. To the left is the site-wide search and an advertisement for one of the com- pany’s publications; and to the right is a sidebar that provides ancillary information to sup- port 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, ver- tical 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 resolu- tions 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 resolu- tion 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 ele- ments 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 800✕600, 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 web- sites. For instance, for any site with fixed-width images at the top of text columns (com- mon 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 what- ever technique is suitable for each project you work on. Later in the chapter, you’ll see var- ious methods for creating strict, fixed layout skeletons, liquid designs, and combinations of the two. Some of these will then be turned into full page designs in Chapter 10.
Layout technology: Tables vs. CSS
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.
Logical element placement
Besides the ability to rapidly edit CSS-based layouts, the greatest benefit when using CSS is the emphasis on accessibility, partly because it encourages the designer to think about the structure of the document, and therefore logically place the elements within the web page (first comes the masthead, then the navigation, then the content, etc.). Each element is then styled to suit.
Using CSS for layout instead of tables is one way of working toward this ideal. The logical placement of each element in the web page’s structure results in improved document flow. And if you’re scratching your head, wondering what on earth I’m talking about, let me explain. A web page should still make sense if you remove all formatting and design elements. This is how a screen reader sees the page—it simply reads from the top of the HTML page downward. Because of the way table-based layouts are created, most designers aren’t concerned with how the document is structured—merely how it looks.
Therefore, although one element may follow another visually onscreen, that may not be the case when you look at the document’s code. (Also, tables tend to encourage superflu- ous markup, which can also hamper accessibility.) When working with CSS, the structure of the web page isn’t compromised.
Workflow for CSS layouts
Many designers use CSS for styling fonts, but few venture further. This section—and, indeed, much of this chapter—shows how straightforward creating CSS layouts can be, so long as you carefully plan what you’re going to do. Upon working through the chapter, the benefits of a CSS-based system will become obvious, including the following: rapidly edit- ing a website’s entire visual appearance from a single, external file; fine-tuning the place- ment of elements; and creating flowing, accessible pages.
Before we begin, it is worth mentioning that some browsers have problems with CSS, and this is often given as a reason to not proceed with CSS-based layouts. Of those browsers still in widespread use, Internet Explorer 6 (and the increasingly rare 5.x) for Windows causes the most frustration; however, that browser’s usage is in terminal decline. And although Safari, Opera, Firefox, and Internet Explorer 7 don’t always see eye to eye, their
7
differences are generally slight. For supporting earlier browsers and dealing with bugs, there are usually simple workarounds anyway (see Chapter 9), leading me to believe that many naysayers of CSS are negative because they don’t know how to create such layouts.
Anatomy of a layout: Tables vs. CSS
To use a fine art analogy, working with tables is like painting by numbers: you create a skeleton layout and then fill in the gaps with the content of choice. And, like painting by numbers, a lot of work is required to change the layout after it’s completed. Working with CSS is more akin to sculpting with clay: you begin with something simple and then gradu- ally fashion your layout. Making changes, tweaks, and even additions at a later date is sim- pler, and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don’t initially have the skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of web technologies, being both very graphic and design-like (in its flexibility), but also quite technical (in how it’s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now, we’ll look at how to create a web page structure, and we’ll then recap the CSS box model.
Creating a page structure
We’ve covered semantic markup—that is, using HTML elements for the purpose for which they were created. This theme continues when working with CSS-based layouts. With tables, cells are used to lay out a design and are merged, split, chopped, and changed until everything works visually. But when working with CSS, you need to be aware of the struc- ture of your web page from the start. That way, you can create structural elements with id values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the divelement. This element has been around for some time, but used to be used for aligning text left, right, or centrally.
However, its real purpose is as a divider element, used to divide a document into block- level groups or divisions. Therefore, in CSS-based layouts, the divelement’s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique idrelating to its purpose; and the divs are then styled to provide spacing, padding, backgrounds, and so on.
Just as tables can be abused, so too can divelements. Some websites seemingly suffer from “divitis,” in which designers use too many divs, nesting many inside each other or adding superfluous divs around elements that don’t need them. In all cases, you should hone down your structure, using as few divelements as possible.
Box formatting
The box model is mentioned elsewhere in this book (see Chapter 2 and again in Appendix D—CSS Reference), and this is a timely place for a recap, because the box model is some- thing that confuses some web designers.
In CSS, every element is considered to be within its own box, and you can define the dimensions of the content and then add padding, a border, and a margin to each edge as required, as shown in the following image.
© Jon Hicks (www.hicksdesign.co.uk)
This is one of the trickiest things to understand about the CSS box model: padding, bor- ders, and margins are added to the set dimensions of the content, and so the sum of these elements is the overall space that they take up. In other words, a 100-pixel-wide element with 20 pixels of padding will take up an overall width of 140 pixels, not 100 pixels with 20 pixels of padding within.
Note that the top and bottom margins on adjacent elements collapse, meaning that the overall box dimensions aren’t necessarily fixed, depending on your design. For instance, if you set the bottom margin to 50pxon an element, and you have a top margin of 100pxon the element below it, the effective margin between the two elements will be 100 pixels, not 150 pixels.
7
CSS layouts: A single box
In the remainder of this chapter, we’ll walk through a number of common CSS layout tech- niques, which can be combined to form countless layouts. In Chapter 10, these skeleton layouts will form the basis of various full web page layouts, which will also integrate tech- niques shown elsewhere in the book (such as navigation bars).
The starting point for any layout is a single box, which this section concentrates on. I typi- cally refer to these as “wrappers” (and accordingly provide said divs with an idvalue of wrapper); and you can think of them as site containers, used to define a width for the site, or set a fixed-size design in the center of the browser window.
Required files Files from the basic-boilerplatesfolder as a starting point.
What you’ll learn How to create a fixed-width div.
Completed files create-a-fixed-width-wrapperin the chapter 7folder.
1.Set things up. Rename the boilerplate documents to create-a-fixed-width- wrapper.html and create-a-fixed-width-wrapper.css. Link the CSS document to the web page by amending the urlvalue of the styleelement.
@import url(create-a-fixed-width-wrapper.css);
2.Add some content. The web page already has a divelement with an idof wrapper.
Within it, add a bunch of paragraphs and test the web page. You’ll see that the con- tent stretches with the browser window and goes right up to its edges—this is a basic liquid design. If the browser window is very wide, this makes the content all but unreadable.
Creating a fixed-width wrapper
Internet Explorer 5.x for Windows gets the box model wrong, placing padding and borders inside the defined dimensions of an element. The bug is explained in full in Chapter 9, which also offers workarounds to fix layouts that get broken in aging ver- sions of Microsoft’s browser.
3.Restrict the wrapper’s width. In CSS, add the following rule:
#wrapper { width: 600px;
margin: 0 auto;
}
The widthsetting defines a width in pixels for the wrapper div. The marginsetting provides automatic margins to the left and right of the div, which has the effect of centering the layout in the browser window, as shown in the following screenshot.
Required files Files from add-starting-pointin the chapter 7folder as a starting point.
What you’ll learn How to add style to a fixed-width div.
Completed files add-completedin the chapter 7folder.
1.Add a page background. In the add-starting-pointfolder, there are two images, both of which are gradients. One is a black gradient, fading toward gray at its bot- tom edge; this is intended for a page background. Add this by adding the following rule to the style sheet (after the add your code belowcomment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-xvalue ensures that the background tiles horizontally only; the color value #4d4d4dis the color of the bottom pixel of the gradient image, ensuring the gradient seamlessly blends with the web page background.
Adding padding, margins, and backgrounds to a layout
7
2.Add a border to the wrapper. Amend the #wrapperrule to add a border around the wrapper. Note that the wrapper in this example sits flush with the top edge of the browser window view area, and so no top border is needed. That’s why the border-toppair is added, overriding the previous rule for the top border only.
#wrapper { width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}
3.Add a wrapper background. If you test the page now, the background shows behind all of the page’s content, thereby making it unreadable. Therefore, add the backgroundpair to the rule, which sets a background color for the wrapper div, and also sets the second image in the add-starting-pointfolder (a white-to-light- gray vertical gradient) to tile horizontally at the bottom of the div:
Note that in some examples in this book, selectors are used multiple times, such as bodyhere. This is perfectly acceptable, although if you want to merge rules, you can—
just be mindful of the cascade if you do so.