Showcasing Your Content

Claude looked up from his notepad (he'd been writing furiously as I talked) and whistled. "It all seems obvious when you describe it," he said, "but there sure are a lot of things about Web-site design that I hadn't thought of before."

"Trust me, Claude," I replied, "you can spend hours thinking about this stuff."

"I don't!" said Stef. "There's nothing for me to domy blog already has a design."

"True," I agreed, "but there are still things for you to worry about. Most blog pages are generated using templatespages with placeholders for contentthat someone else designed. Several templates are usually available. Which template do you use? What color scheme works best? Where do you put the navigational aids like calendars and category lists? If your blog is just one part of a larger Web site, can you make it look like the rest of the site?"

Stef was disappointed. "I thought I had it easy!"

"You do," I said, "because the templates give you something to start with, a structure on which to design and build the blog.

Conventional Web sites don't have thatin effect, you start with a blank canvas."

"And as a painter," said Anita, whose hobby is watercolor painting, "I can assure you that a blank canvas can be pretty scary!"

"Can't you get templates for Web sites, too, not just blogs?" asked Claude.

"Yes, you can," I answered. "A few templates are often included with commercial Web-site editing software. You can also download templatessome for free, others for a small feefrom various Web sites. Or your hosting service may provide you with templates as part of a basic Web-site creation service."

"Or you can just do it all yourself," Anita said.

"That's the other choice, yes," I agreed. "It's not that hard once you learn some HTML, which I'll discuss at a later session. No template is perfect, eitherthey're really just starting points. But we're getting ahead of ourselves again, because so far all we've talked about is site design. We need to switch gears and talk about page design and how to showcase the site's content."

"And the ads!" Claude insisted, obviously concerned that I was forgetting the whole point of these sessions.

"And leaving plenty of room for ads," I agreed.

Page Layout

The basic structure of a pagethe arrangement and positioning of its different partsis referred to as its layout. While many layouts are possible, a standard layout for text-oriented pages is shown in Figure 5.15. The horizontal area at the top of the layout is the page header and the corresponding area at the bottom is the footer. Sandwiched between the header and the footer are one to three columns which we'll call panes.

A common configuration is the three-pane layout, with a navigation bar in the left pane, the page content in the middle pane, and ads in the right pane (Figure 5.16). Other configurations are also available. If the navigation bar is in the header, for example, you might use a two-pane format, with content on one side and ads on the other. Or you might use a single-pane format and place the ads in the header and/or the footer. Or insert them in the middle of the contentthere are AdSense formats for every possible situation!

Figure 5.16. A typical page, with a navigation bar on the left, content in the middle, and ads on the right.

[View full size image]

If you can't decide what page layout to use, model your site after a favorite Web site. Sketch it out on paper and see if you like it. Whatever you do, though, be consistent and use the same layout throughout the site wherever you can.

Design Principles

Entire books have been written on how (and how not) to design Web pages. Unless you're a graphic designer by training, your pages won't be works of art filled with special effects. Your goal is to create attractive pages that are easy to read. Do it by following simple design principles:

• Add white space. The term white space refers to the empty areas surrounding blocks of text and other page elements. Leaving out white space is a common mistake. Compare the crowded text block in Figure 5.17 to the same block in Figure 5.18. Notice how the white space makes the text much more attractive and readable.

  Figure 5.17. A lack of white space makes the text harder to read.

  

  
  

  Figure 5.18. White space makes the text block much more readable.

  

  
  

  Using Templates

  When you base your design on a template, make sure you under stand the conditions attached to the templatethe template may require attribution and a link back to the site it came from.

  
  

  White Space

  Good page designs incorporate plenty of white space.

  
  

• Choose one or two standard fonts. There are probably several dozen fonts (typefaces) installed on your computer, but have you ever used more than two or three of them? Using multiple fonts on the same page is a definite no-no because it makes the text harder to read. (The one exception is headings, which are sometimes in a font different from that of the body text.) The same goes for special effects like blinking textavoid them like the plague. We'll talk more about fonts in the next chapter.

• Use a white or light background. Dark text on a light-colored background (white, ideally) is much easier to read due to the high contrast between the two colors. This is why most printed documents are done in black ink on bright white paper. Figures 5.19 and 5.20 show the difference in readability between high-contrast and low-contrast colors.

  Figure 5.19. A high-contrast example.

  

  
  

  Figure 5.20. A low-contrast example.

  

  
  

• Don't be afraid of color, but use it sparingly. On the other hand, you don't want your pages to be black and white only. Color can be used to highlight or emphasize text for added visual impact. Browsers already use color to distinguish visited links from unvisited links. You can use color to emphasize headings or to shade table backgrounds for easier reading. It's also common to change the background color for headers and footers and the parts of the page layout that are outside the panes.

  Colors on the Web When the Web was in its infancy, many computer systems could display only 256 colors on screen. Unfortunately, the different operating systems used slightly different color palettes (color sets), which created variations in graphics and images that should have looked identical. To combat this, a "Web-safe" or "browser-safe" color palette was developed that could be used consistently across all systems. Now that the vast majority of systems can display many more colors, though, the need for the browser-safe palette has all but disappeared.

  
  

  Web-Safe Colors

  Details of the Web-safe color palette scheme are well documented by author and graphic designer Lynda Weinman at www.lynda.com/hex.html.

  
  

  Above the Fold

  Place the interesting or important material at the top of the page to ensure that the visitor sees itif it's near the bottom, they'll only see it if they scroll down the page.

  
  

• Keep pages short and not too wide. Don't cram reams of text onto a single page and overwhelm the reader. Spreading the text across several pages also exposes the reader to more ads, which can only benefit you. Make sure your text blocks aren't too wideshorter columns are easier to read.

• Be printer-friendly. Speaking of wide pages, there's nothing more frustrating than printing a Web page and ending up with cut-off text. Ensure that your pages print properly, or else provide alternate "printer-friendly" versions that do.

• Keep the interesting or important material "above the fold." In the newspaper industry, the term "above the fold" refers to the top part of a folded newspaper page, the first part that a reader sees. In Web design, the term refers to the part of a Web page that is initially visible in a normal-sized browser window (Figure 5.21).

  Figure 5.21. Keep the important material "above the fold" so the visitor always sees it.

  [View full size image]
  
  
  

  Alt Browsers

  Find out more about Firefox at www.mozilla.org/products/firefox/. Apple's Safari browser, which works only on Mac OS X, can be downloaded at www.apple.com/safari/.

  
  

  Keep Ads Separate

  The AdSense terms of service require you to place the ads on your page in such a way that visitors don't confuse them with the page content.

  
  

• Support different browsers. Some people don't use Microsoft's Internet Explorer as their Web browser, though many site designers apparently assume that everyone does. Alternative browsers like Firefox and Apple's Safari are just as important, so you should ensure that your site looks good and behaves properly with as many browsers as possible. (Text-based sites and blogs are less likely to have problems than graphic-intensive or dynamically generated sites, but it's always good to check.)

• Group and separate page elements. Clear boundaries between the different parts of a page make it obvious what's what. You can use white space to do this, or you can use graphic cues like lines and boxes.

You can find other design tips on the Web. Two Web sites in particular stand out. The first is the Web Style Guide, www.webstyleguide.com, a free online guide to Web-site design. The second is Web Pages That Suck, www.webpagesthatsuck.com, a site that showcases examples of bad design so that you can learn what not to do.