Background Checks

/in /by

Check your backgrounds images at the web host door! Most background images distract and detract, making the web page harder to read and maintain. Don’t use complex, patterned backgrounds that tile across the screen.

An actual web site for an actual business. Can you believe it? Notice that the backgrounds for the graphics don’t match and you can’t find, let alone read the text.

To see the difference a simple background makes, check a couple pages with a common, marbleized background pattern.

Or to see the difference it makes simply removing the background image from the AAR members list.

Background images can be used successfully, however, it takes much more skill and restraint to create and use effective background images. A simple, single, flat image may be useful to a page design, providing visual clues to navigation or sidebar information. A background images, however can not make up for a weak page structure, design or content. There is no good design with a background image that isn’t also a good design without a background image. If a large, flat background image is being used, limit the amount and size of other images on the page. Faster is better for your critical information pages.

Also remember that any other images must be made to match the page background image if one is used. This increases site maintenance and development complexity and costs. You save time, money and improve clarity by eliminating page background images.

Having said all of that, I confess to using background images myself for a number of my clients. The two most succesful and easiest ways to use backgrounds are the flat, narrow, horizontal image that creates a vertical pattern on the page or the large, single image on flat background.

The vertical pattern breaks the page into visual columns. These are usually matched to a table layout. Often the left-hand column effect is used for navigation.

Us News & World Report makes effective use of the sidebar background graphic. Near the top of the page it provides a clear distinction between the navigation and the text. Farther down the page, it can be used for clean banners and information tables.

The large, single image background goes in and out of fashion, but can be highly effective where there is plenty of open space on the page. A couple of effective examples can be found a www.lynda.com – The home site for Lynda Weinman, graphics designer and author.

To learn how to make effective background images without making your site fatter than glutton on January 1st, check out “Making It Big – Large Background Images”. Because of browser differences, using background images with style sheets calls for a little coding finesse.

Making It Big – Large Background Images

/in /by

There’s no good layout with a page background that isn’t a good layout without a page background. And since different browsers handle background image positioning differently, there’s additional work in building the page. But while you should avoid complex, patterned backgrounds like the tap water in Chihuahua, there are times when a large page background image can add impact. So I’ll share two of my favorite ways to use a page background.

To avoid the dreaded “tiled pattern” effect, create very wide images. The minimum width is 1200 pixels. The most popular viewing resolution, according to recent studies, is 800 x 600, but by setting the width to 1200 pixels wide I avoid repeats on over 98% of the monitors. And yes, there are ways to control background image placement and repetition with the current HTML 4+ standards, style sheets and browser-specific code, but using these methods create dependencies on the web site. We want our pages to be as accessible to as many viewers as possible, so dependencies are bad. If you prefer to use a style sheet to control positioning and repetition, simply be aware that some site visitors are not seeing what you expect.

Creating Vertical Columns & Patterns

The first method actually isn’t a large page background. It’s just a very wide, but vertically narrow, background that repeats down the page creating a vertical pattern.

  1. To create this background, open a new window in your graphics program 1200 pixels wide by 20 pixels high.
  2. Create your repeating pattern. Remember this will be a verticalrepeat. For example, If you want a left-hand column of color, make a rectangle of flat color as many pixels wide as your column and 20 pixels tall.

    You can also use lines, dashes, letters, whatever you want. Use very few colors and preferrably web safe colors. This lets you to make large graphics that optimize into a very tiny digital packages.

  3. Save your image as a gif file optimized to the fewest colors possible as shown below.

Example 1 used only 4 colors and gif compresses to less than 1k (380 bytes to be exact). It loads in less than 1 second at 28.8k and creates a visual left-hand column that is 200 pixels wide and a grey line that runs vertical at 500 pixels across the screen.

Creating a Large Image Background

My other favorite background trick is using a large image for impact. It depends upon maximum optimization so the fewer colors necessary the better.

  1. For a large image background, open a new window in your graphics program at least 1200 pixels wide and 800 pixels high. (Long pages will have a repeat as the viewer scrolls down past 800 pixels. To avoid this on a long you must increase the image height.)
  2. Create your large image. You can use whatever you want including line art, but if you are going to run text over this image (and most of us do), keep it very pale and simple in design. Use very few colors and preferrably web safe colors so you can optimize into a very tiny digital package.

    If you want the image centered on your page place it between 320-400 pixels from the left edge and 240-300 pixels down from the top edge.

  3. Save your image file optimized to the fewest colors possible as shown below. If you are using flat, line art or a stylistic image, use gif compression. See example 2 below. If you are using a photographic image than needs to remain photorealistic, use jpeg compression. See Example 3 below.

Example 2 uses 4 browser safe colors and gif compresses to 7.1k, loading in less than 3 seconds at 28.8k.

Example 3 uses a photographic background image. Monochromatic photographic images, lightened heavily, work best as page background images. Otherwise, considerably time and energy goes into working the text around the image. Plus full-color images generate larger files. Save the full-color for standard page images. Try jpeg compression for the final background image if you want to keep more photographic details.

Two examples of the technique are graphic designer and author, Lynda Weinman’s site and the All STARS Hockey Team pages. Note than Weinman actually uses a large, flat graphics background designed to continuous repeat the image across all size monitors and that she doesn’t run text over her images so she can be very bold.

Coding the Web Page

To put your background image to work, add the following code to your HTML <body> tag:

background=”path_to_your_image_if_necessary/your_image_file_name”

replacing the path_to_your_image_if_necessary/your_image_file_namewith the location and name of your background file.

The background for the Example 1 sample page looks like this: <body bgcolor=”#ffffff” background=”../images/bkg_sidebar_example.gif”>

With HTML 4.0+ and XHTML standards, the background attribute has been deprecated in favor of using style sheets for placing background images. Unfortunately, not all browsers currently in use are fully HTML 4.0+ compliant, but if you page design doesn’t actually require the background image (and remember my dictum, there’s no good layout with a background image that isn’t a good layout without a background image), you can specify both background positioning and repeat precisely.

I’m not going into a full discussion of style sheets. But the code below will give you an idea of how to modify a style sheet to include a background image:

body { background-color: white;
background-image: url(../images/bkg_sidebar_example.gif);
background-position: center middle;
background-repeat: no-repeat;
}

If you’d like to start working with a style sheet, check out the article, “Style Sheets for the Terminally Impatient”.

Style Sheets for the Terminally Impatient

/in /by

Okay, you say you want your pages to look good, but hate coding font styles over and over and over? Well, welcome to the external style sheet. The large majority of browsers support cascading style sheets. There are three ways to add style attributes to a tag under the current HTML and XHTML standards: inline styles, document-level styles and external style sheets. The fastest, easiest way to create a consistent style throughout your site is by linking to an external style sheet. I’ll save all the gory details of style sheets for another time.

An external style sheet is merely a text file containing the tag and its related attributes. It looks like this:

body { color : #000;
background-color : #fff;
}

A:link { color : #f30;
}

A:visited { color : #f63;
}

h1 { font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 22pt;
line-height: 160%;
color : #f93;
}

We’re in hurry here, lady, speed it up.

First, you need a style sheet. I made one for you.

  1. Click here to download a style sheet similar to one used for this page. You will need to save the page to your machine.

    At the command menu, click on File > Save As.

    Save the page as a plain text format and name it “elementary_style”. If you get a choice of extensions, use “.css”. The “.css” extension will readily identify the file as a cascading style sheet.

Next you need to add a link to the style sheet in your web page code.

  1. Inside your <head> tag (after the <title> and any meta tags), add the following line of code:

    <link href=”elementary_style.css” rel=”stylesheet” title=”Elements of Web Style Stylesheet”>

That’s it — at least for basic styles.

I’ve included a special style for navigation and copyright or anything else you want in a smaller font. It looks like this:

.navigation { font-family : Arial, Verdana, Geneva, Helvetica,sans-serif; font-size : 10pt; line-height : 11pt; }

To use it, you simply wrap the text in a paragraph tag (<p>) with the class defined as “navigation”. So that the HTML code looks like this:

<p class=”navigation”> This is some text I want displayed smaller. </p>

And this is the result:

This is some text I want displayed smaller.