CSS3 Layout Strategies

Web page layout with CSS is more of an art than a science; there’s no one formula to follow for marking up your content with HTML and creating your CSS. What works for one design might not for another. Although that might not be a comforting thought—“Hey, I bought this book to learn this darn stuff”—CSS layout is something you’ll learn through experience, learning how the different CSS properties work (especially floats and absolute positioning), reading about different layout techniques, following tutorials like the ones in the next two chapters, and lots of practice.

However, there are definitely some strategies you can adopt as you approach CSS layout. These are more like guidelines than hard-and-fast rules, but as you begin to see your projects through the initial visual design, start with these tips in mind.

Figure 1

Start with Your Content

Many designers like to jump right into the good stuff—colors, fonts, icons, and images. But beginning with the visual design is putting the cart before the horse. The most important elements of a web page are the contents: headlines, paragraphs of text, stunning photographs, navigational links, videos, and such are what people will come to your site for. They want to read, learn, and experience what your site has to offer. Content is king, so you think of what you want to say before you tackle how it should look. After all, it won’t do you much good to create a fantastic, 3D–looking sidebar box if you don’t have anything meaningful to put in that box.

In addition, a page’s message should dictate its design. If you decide that your home page needs to sell the services of your company and highlight the excellent customer service you offer, you might decide that a large photo of your friendly staff is important, as well as a quote from a satisfied customer. Since both of these elements are important to the page’s message, you can craft the visual message by making both the picture and the quote prominent and compelling.

Mobile First

Along the same lines, the rise of smartphones and tablets has driven designers to think long and hard about winnowing down their content to just the key message and facts. This Mobile First movement is based on the limited screen size of smartphones as well as the limited attention of people on the go. Mobile First design is about starting with your content, but it’s also about getting rid of extraneous noise— including supplementary information that fits fine on a large desktop screen, but merely gets in the way on the smaller screen and detracts from the key information you’re hoping to deliver.

Keep in mind that if your site will be visited by a significant number of people using smartphones or small tablets, not everyone will want to scroll through a long page of information (or pinch and zoom to see everything available on a page). Rather than trying to fill every last square inch of a 32" desktop monitor, think about simplifying your content so it’s clear, direct, and easy to take in.

Start with a Sketch

Once you’ve figured out your content, you can think about organizing that content visually. Some designers start by hand coding the HTML: creating divs, adding <header>, <article>, <footer> tags, and so on. This is a fine approach, often called "designing in the browser” since it gives you a head start on building your site by
jumping right into the HTML.

However, before jumping into the HTML, you should at least sketch out the placement of your content. You don’t need anything fancy—paper and pencil work fine. Since web design is about placing content inside of boxes (divs and other HTML tags) and placing them on the page, simply sketching out a bunch of boxes, drawing columns, and so on, is a fast and easy way to try out different page layouts. You can quickly get a feel for where content should go, how big it should be, and the general color tone (light or dark).

If you’re comfortable with a graphics program like Photoshop, Illustrator, or Fireworks, you can use that to create a visual design. If you’re not a whiz with graphics programs, even just drawing boxes to indicate different placement of page elements can help you refine your thinking about how the page should be laid out. It’s a lot easier to change a two-column design to a four-column design by resizing boxes in Illustrator than by rewriting HTML and CSS.

However, if you do use a graphics program, don’t spend too much time refining the graphic design. It’s a lot of work to create the look of many CSS properties in Photoshop or Illustrator, and you’ll only have to recreate that look using CSS code. In other words, try to refine a “lo-fi” look for your site on paper or in a graphics program, and then jump to your text editor to create the HTML to fit your content and use the CSS properties you’ve learned in this book to test out different styles.

Identify the Boxes

Once you’ve created a visual mockup, it’s time to think of how to create the HTML markup and CSS to achieve your design goal. This process usually involves envisioning the different structural units of a page and identifying elements that look like individual boxes. For example, in Figure 1, there are quite a few elements that look like boxes: most obviously, the three announcement boxes near the bottom (marked as A in Figure 1). Each box is usually a good candidate for a separate <div> tag.

Often a visual clue in your mockup can help you decide if a div is needed. For example, a border line drawn around a headline and several paragraphs of text indicates you’ll need to surround that group of HTML tags with a <div> tag that has a border applied to it.

In addition, whenever you see chunks of text sitting side by side (like the three chunks of content in the footer in Figure 1), you know you’ll need to have each group in its own <div> tag—HTML tags don’t usually sit side by side, so you have to use some layout mojo (like the float technique covered in the next chapter) to
make that happen.

It’s also common to group divs (or other tags) that sit side by side in columns within another div. For example, in the bottom half of Figure 1, you can see the basic set of <div> tags that provide the page’s structure. The “news” <div> and the <footer> tag are containers for their own set of divs. While this isn’t always a necessity, it can provide flexibility. For example, you can reduce the main area (the photo of the hand and the tagline) in width and move the news div to the right side to form its own column. The news items could then be stacked on top of each other rather than sitting side by side.

Go with the Flow

Tags don’t normally sit side by side or layer on top of each other. Normally, HTML tags act pretty much like text in a word-processing program: filling the entire width of the page and flowing from top to bottom. Each block-level tag—headline, paragraph, bulleted list, and so on—stacks on top of the next block-level tag. Since that’s the “business as usual” approach of HTML tags, you usually don’t have to do any kind of positioning if you plan on stacking one div on the next.

For example, in Figure 1, four elements—the <header> tag, “main” div, the <section> tag, and the <footer> tag—span the entire width of their container (the <body> tag) and sit one on top of the other. Because this is the normal way blocklevel tags work, you don’t need to do anything special with the CSS for those four divs to stack on top of each other.

Remember Background Images

You’ve no doubt seen tiled images filling a web page’s background, or subtle gradients adding depth to a banner. But the background-image property provides another way to add photos to a page without resorting to the <img> tag. Not only does putting an image into the background of an existing HTML tag save the few bytes of data required by the <img> tag, but it also simplifies some layout challenges.

For example, in Figure 1, the central image of the hands holding the Chia Pet (B) is actually just a background image. This makes placing another div—the one with the tagline “Compassionate care…” (C) really easy, since it’s just sitting on top of the background of its parent div. Likewise, the picture of the doctor at the lower right of the page is just a background image placed in that div—adding some right padding pushes the text in that div out of the way of the photo.

Pieces of a Puzzle

This tip can be filed under “creative problem solving” or “if I stare at this design long enough I’ll come up with some crazy solution.” Often, what looks like a single, unified whole is actually composed of multiple pieces.

You can see a simple example of this in Figure 1, even though at first glance it looks like one big white box full of content. Actually there are four stacked divs, each with a white background. So, if you’re having trouble seeing how to put together one large element on a page—a very large graphic, a rainbow that spans several columns, or just a solid background color that appears to span multiple areas of a page—think about how you could achieve the same look breaking the large unit into smaller pieces that are joined like parts in a jigsaw puzzle.

Layering Elements

If you’re a Photoshop, Illustrator, or Fireworks fan, you’re probably used to the notion of layers. Layers let you create separate canvases that float on top of each other to build one unified image. In these programs, it’s easy to make a logo float on top of a headline of text, or place a photo over another photo. If you want a web page that has this kind of effect, you have a couple of choices.

Often the easiest way to layer something on top of a photo is to put the image into the background of another tag . Because the background image is behind the tag, anything inside that tag—text, another photo—will sit on top of the photo.

But what if you want to layer a photo on top of some text? In that case, you’ll turn to the only CSS property that lets you layer elements—the position property. You’ll learn all about that property in Chapter 15, since to position something on top of something else requires absolute positioning.

Don’t Forget Margins and Padding

Finally, sometimes the simplest solution is the best. You don’t always need fancy CSS to move a page element into place. Remember that padding and margins are just empty space, and by using those properties, you can move elements around the page. For example, the tagline box (C in Figure 1) is positioned simply by setting the top and left padding of the parent div. As you can see in the diagram in the bottom half of Figure 1, the tagline is placed inside another div (<div id="main">). That div doesn’t actually have any content besides the tagline—the photo is just a background image—so adding padding moves the tagline div down and to the right.

Categories: HTML and CSS