magazine resources subscribe about advertising

 

 

 








 CD Home < Web Review < 2001 < Mar 09  

Web Authors

CSS Design

By Christopher Schmitt
Rank 2

Imagine that we're making a page visually appealing, and that we have to force the design to mingle with the content. Pretty standard, right? But in this case, the HTML tables that hold the images were sliced so we could have rollovers in the appropriate places. This HTML and others like it were then wrapped in a giant table that became the layout of the entire page, which in turn took longer to download because the browser had to spend precious processing time laying out the page before it would display.

This situation is enough to give anyone a headache.

Cascading Stylesheets were supposed to free us, preventing us from ever having to intertwine design and content in our pages. But due to poor browser implementation, designers and developers are forced to use HTML and image hacks for any serious visual layout.

If you wanted, you could detect for browser type and serve up just the right CSS snippet. This would spare your audience from overlapping text and images or font sizes that vary from too large to illegible because the browser can't render CSS—the thing that's supposed to stop this nightmare from happening.

Overall, I'm not opposed to using browser detection to determine the appropriate experience to deliver. In the near future, we'll need to be able to detect and show the right version of our site on PC browsers, WAP-enabled browsers, handheld device browsers, and refrigerator browsers. The proper design is critical to the unit of delivery.

But I'm tired of spending precious production time trying to nail down buggy selectors, properties, and their values in CSS, when that time could be spent fine-tuning other aspects of a Web experience.

The browser that most often gets CSS implementations wrong, in my opinion and according to server log files, is Netscape Navigator 4.x. Take a look at what parts of CSS Navigator 4 supports, and you'll notice the word "buggy" and "no" appear quite frequently.

So, What's a Web Developer Supposed to Do?

If we keep doing back flips for every browser's poor implementations and remain friends with our HTML workarounds, users who surf the Web with standards-compliant browsers may encounter a nightmarish situation.

On the other hand, if browser vendors notice that designers and developers are willing to sacrifice the way that noncompliant browsers render their forms or designs to get browsers that get CSS implementations mostly right, they might take notice and respect our wishes.

With the advent of Netscape 6, it's become possible to put down the tools of yesterday, as well as yesterday's thinking of how to design for the Web.

Yes, your boss may get angry with you for cutting off part of your audience, even after you give him a rousing speech about standards, CSS, poor implementations, just causes, and the like. But if you're ready to champion your concerns over buggy browsers, read on. True CSS design is making headway, allowing for more robust designs with some slight ingenuity. Take notes.

A Touch of CSS without the Fuss

Here's a bit of CSS you can add to your pages, without affecting your current designs and getting used to developing.





Body	{
font-family: Verdana, Arial, Helvetica, non-serif;
margin: 0;
}




The font-family marker allows you to set the font of your page—the font tag is now moot. Also, the use of font-family allows you to select backup choices. If the first font isn't found on the users' computer, it'll look for the second font you listed and so on.

Setting the margin to zero through "margin: 0" allows you to bypass having to write out these four attributes in the BODY tag: marginheight="0", marginwidth="0", topmargin="0", and leftmargin="0", while maintaining the same effect on the page.

The next part is setting the link colors. With the site you're developing, you still want to include the link colors in the BODY tag, but it wouldn't hurt you to add the colors through CSS just to get you into practice. Plus, if you use the pseudo-element A:hover, you can change the link's appearance (in browsers that support it) when a user mouses over it.

A:link	{
	Background-color: #F00;
	Border: solid 1px;
	Margin: 1px;
	
}
	A:hover {
		Background-color: #FFF;
		Color: #333;
		}

Note: The border and margin are set to one pixel in order for the hover to work in Netscape 6.

Collecting All the Game Pieces

To start designing with CSS, you need a new approach to facilitate going from design to the end of production. Knowledge of past Web development workarounds won't be much help. Since this will add to their aesthetic touch, designers are willingly trading old problems and workarounds for new ones.

Even though I've decided not to show surfers with Netscape Navigator 4.x my site's CSS, there are other browsers that have limited capabilities in rendering CSS properly. That means we still need to review the content earmarked for the site in a form much like a Word document or a book report.

Typically, it's best to have all the pieces together in one place. But most of the time, the reality is that content is delivered later in the project process for one reason or the other.

With this CSS design example, I'm going to design a one-page site to showcase a Web design mailing list I run. Viewing my content, I can clearly envision the structure of the site. I have a title, a table of contents, and the main copy with five sections and two subsections: a mini-subscription form and a headline news feeder. All this content is capped off with the usual copyright notice.


Figure 1-1 shows the initial page

Figure 1-2 shows the contents of the Word document
(Click images for larger view.)

Design It with Style

With the content in place, I then open PhotoShop and begin to tinker with the design. The idea is to balance the visual impact between imagery and text placement without forcing me into a heavy production cycle. That means realizing that neither intricate, graphic intensive design nor a generic text-driven Web page would be ideal.


Figure 2 shows the PhotoShop comp

Grouping Selectors

Before getting into CSS development particulars for this example, I want to mention in passing an easy tip on forming a stylesheet: group the selectors.

Usually, you can group selectors for one declaration, like so:

H1, H2, H3 { font-family: Verdana;}

Or you can group declarations with a group of selectors. For example, you can define the fonts and colors you want used:

H1, H2, H3 { font-family: Verdana; color: #4BA; background: #999;}

I "reuse" selectors in my stylesheet by grouping them into categories by their respective impact on the page—fonts, links, images and color, and size and positioning.

For example, a headline tag could look like this:

/* Fonts */
H1, H2, H3 { font-family: Verdana; color: #4BA; background: #999;}

/* Color */
H1, H2, H3 { color: #333;}

/* Size */
H1, H2, H3 { font-size: 1.2em;}

If I used one declaration in my stylesheet and that was it, this type of treatment would be overkill. However, as I add more selectors and define more selectors for pages that depend on CSS to lay out the design, this method reduces hunting and pecking time when tweaking the stylesheet and the code for the rest of the site. If there's a font-family issue I need to resolve, I can go straight to the font section without worrying that I forgot one somewhere else in the stylesheet.

Branding the Title

The first step in my process is to hide the HTML text title of the site through CSS and replace it with a graphic.

This is done through this bit of CSS and HTML:

.title { display: none; }
<h1 class="title">Babble List</a>

Now that we've successfully hidden the text title of the page from CSS-enabled browsers, I can brand the site with a graphic logo I made in Photoshop.

I process and compress the title and background as one image for delivery on the Web.

With the image ready, I then insert this bit of CSS code:

body	{
	background:	#FFF;
	background-image: url(babblelist_hed.gif);
	background-repeat: no-repeat;
	}

This piece of code insures that the title mark appears in any Web browser that understands CSS. Since I put no-repeat, the browser won't tile the image. Before CSS, I would've had to make a 1200 x 1200 pixel image with the graphic in the upper left-hand corner to cover a user's monitor and prevent the tiling effect.

Since the browser won't be tiling the image, we sidestep the problem of image inflation on older machines that can't handle the RAM required for tiling images and make our way toward visually branding the site with the logo. With the background set to white, the background color will blend with the background image.

The Navigation List

The main table of contents for my page is set in an unordered list. Personally, I'm not a fan of the bullets generated by the different browsers. For my design to work the way I want, the unordered list will have to be displayed horizontally from left to right, not vertically from top to bottom—as lists in HTML are typically displayed.

With old production methods, this situation would call for placing the text of the links as GIFs with text, spitting them out as individual graphics and putting the text links as plain HTML text, wrapped up in an HTML table across the top.

However, thanks to CSS, we have a new way of solving the dilemma. This code will convert the table of contents:

#toc ul li{
	display:	inline;
	border-left:	dashed 1px #060;
	padding-left:	.75em;
	margin-left:	.75em;
	}

/* gets rid of left-side bar */	
#toc ul #firstTOCitem	{ 
border:	0;
}

<div id="toc">
<ul>
<li id="firstTOCitem"><A HREF="#first" onclick="" TARGET="_self">what is
this?</a></li>
<li><A HREF="#second" TARGET="_self">keeping quality</a></li>
<li><A HREF="#third" TARGET="_top">how do I join the list?</a></li>
<li><A HREF="#fourth" TARGET="_self">privacy policy?</a></li>
<li><A HREF="#fifth" TARGET="_self">special thanks</a></li>
</ul>
</div>

Putting Content in Its Place

For putting the content in the page, I create two layers—one for the main navigation that will be used to explain the purpose of the list and supplemental information, and the other will be a side column to run a sign-up form, industry news feeder, and the copyright.

Here's the CSS snippet I used when laying out the main and sidebar content:

.contentMain {
	font-size : 1em;
	font-family : Georgia, "Times New Roman", Times, "New York", serif;
	width : 398px;
	top : 145px;
	left : 50px;
	position : absolute;
	}
	
.sidebar	{
	LEFT: 473px;
	POSITION: absolute;
	TOP: 105px;
	WIDTH: 155px;
	}
	
	<div class="contentMain"> main content goes here</a>
	<div class="sidebar"> sidebar content goes here</a>
	

The Devil Is in the Touchups

Now that most of the site has been laid out, it's time to add some touchups. In the sidebar, after I insert some Web development newsfeeds from Moreover, users will see current items up for discussion about our industry.

For the main content, I want to indent the paragraph blocks in order to stimulate the user's eye to read more. I accomplish this by placing inline stylesheets around the paragraphs themselves.

For example:

	Paragraph goes here. Paragraph goes here. Paragraph goes here.
	Paragraph goes here. Paragraph goes here. Paragraph goes here.
	
<div style="margin-left: 1.5em; margin-right: 1.5em;">

Paragraph goes here. Paragraph goes here. Paragraph goes here.
Paragraph goes here. Paragraph goes here.

</div>

Wrapping It Up

With the stylesheet in place, it's time to hide the browsers that get CSS implementations wrong, while giving the stylesheet to browsers that know how to get it mostly right. To do this, I put this snippet in the HEAD of the file.

<script language="JavaScript" type="text/javascript">
<!--

// Use this browser sniffer script to look for version 5+ browsers and display
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) &&
(agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && 
(agt.indexOf('Webtv')==-1) &&
(agt.indexOf('hotjava')==-1));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5")==-1) );
var is_nav6 = (is_nav && (is_major == 5));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
if (is_nav6 || is_ie5up) {
	document.write('<link href="babblelist.css" rel="stylesheet" 
	type="text/css">');
}
// -->
</script>

You can check out the final product at the Babble List site, babblelist.com.

Overall, there's only one image being used, the background image that contains the logo. The rest is powered by the browser's rendering of the CSS to create the design. Pretty keen, huh?

CSS may not be a designer's salvation, but it definitely allows us some freedom.


Christopher Schmitt is a senior design technologist for MindComet. You can reach him at schmitt@christopher.org.


Related Articles
WebReview.com's CSS FAQ
CSS Evolution




Copyright © 2003 CMP Media LLC