Have you ever sat and waited for a webpage to load its myriad of sliced-up images before you could do anything, even navigate the site? You know the ones we are talking about. The sites that present everything in image slices, even the text. Then again, have you ever been presented with a bare-bones page that was uglier than sin, devoid of all color, images or creative flair, which allowed you to navigate the website right away?

The Photoshopped-to-death web page is definitely a turn-off - literally. Many people won't even wait for the page to load, exiting immediately, which means loads of lost customers and money. The bare bones page can also be a turn-off. True, it allows you to get the information you want as quickly as possible (if laid out well), but the fact that it's completely bland can also make visitors come back less often than you'd like them to, even if you have good content. Human beings are naturally drawn to color and images. They're some of the things that can make a very plain-looking website more memorable - along with the content.

So which elements of your page should be graphical and which should be handled by your html and CSS?

Most website designers like to use a header of some sort. If your header is simply one color with a bit of simple text in it, use CSS and HTML. If your header consists of an image and text which does not require a special font (like the Coke logo), design an image but add the text with CSS and HTML. If you absolutely must have a header which is completely graphical, go ahead and use it but compress your image as much as possible.

Next on the agenda are content boxes. Do you really need your entire content box to be an image? CSS and HTML can create these boxes, cutting down on your page-load time. If you want rounded corner boxes, rather than the typical design, you could always use a tool like Nifty Corners to create these. This allows you to utilize CSS for the main part of your content boxes and tiny image files to create the rounded corners which will not significantly slow down your page-load time. This will make your website visitors much happier and more likely to stick around.

Another important element is your navigation bar, whether it's on top or in your sidebar. Some website designers make these completely graphical, while others use pure CSS. We've found that using either CSS alone or combined with small image files works best for navigational elements. You can even create roll-overs that change the look of your navigation buttons. There's no need to have your navigation bar one big sliced up image. It's just another thing that will cause your website to slow to a crawl.

The last thing to consider (although your site may contain more complex elements), if you're using one, is your footer. It's possible to use CSS or a combination of CSS and an image for this. If you do use an image, use a tiny piece (1px wide is sufficient), then repeat it across the bottom of the page using your CSS. This will ensure quick page loads.

Do what you can with CSS and leave the elements that must be graphical to Photoshop or another graphics program. Cut back on bandwidth-wasting elements where ever you can. And compress those images to the lowest size possible while still ensuring they are pleasing to the eye.

Considering that a great deal of Internet users will only wait 10 seconds or so for your page to load, using as much CSS in web pages as possible is something that every webmaster should seriously pay attention to.

Return to Website Design Tips Index.....