Category: CSS

Why colleges should stop teaching Fireworks as a primary web design tool

Here’s a recurring scenario in my life. Someone who took some college classes to learn to make web sites has decided to try to implement CSS and to make their sites accessible. The classes taught them to make web sites by using Fireworks to slice an image and to export the resulting table-based HTML to Dreamweaver. Now this person, who–I admit–does beautiful graphics in Fireworks, comes to me or to some discussion list I participate in and asks for help in making their Fireworks generated HTML work with CSS or fulfill some accessibility need. This question is like asking how to get a tricycle to go from zero to 60 in under 6 seconds—it demonstrates a gap in the basic knowledge of what is involved.

Some college has given this poor person a difficult handicap to overcome. That handicap is the belief that what they are doing is a best practice that will adapt to every requirement. Yes, Fireworks can generate HTML. No, learning to generate HTML with Fireworks is not the best way to learn to make web sites.

In terms of best practice, students should be learning how to structure an HTML document intelligently so that it can be presented with CSS based enhancements (including, perhaps, lovely images created in Fireworks). An intelligently structured HTML document can adapt to every requirement: CSS/accessibility for screen, print, handheld, etc.

A sliced image exported from Fireworks as a table full of empty cells, spacer gifs, images and almost no text is not the web design solution that some college classes lead students to believe it is. Classes should teach HTML, CSS, and then how to apply that knowledge with a tool like Dreamweaver.

Fireworks does have its place: to create graphics. It should be taught as a graphics design tool, not as a web design tool. Students who use Fireworks to create exportable HTML should know how to adapt it in Dreamweaver to make it meet their other requirements.

There are many options available to an instructor who wants to teach students to think in terms of building structure with HTML that will support CSS and accessibility. My own book is written in these terms, and other books I have reviewed here such as Web Standards Solutions by Dan Cederholm are as well.

Tip: What is a Wrapper Div?

One of the listservs I read regularly recently had the question posted, “What is a wrapper?” This question is sometimes phrased, “What is a container?” An answer provided by Paul Novitski was so clear that I thought it might be a useful tip here. With Paul’s permission, here is his response to the question.

A wrapper is an element, commonly a div, that encloses one or more other
elements in the HTML markup, e.g.:

<div id="wrap">
<h1>Headline</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

The purposes of wrappers are several, including:

  • to group elements semantically, for instance to separate page heading
    from body text from sidebar from footer.
  • to group elements cosmetically, such as with a surrounding border or a
    common background image or color.
  • to group elements in layout, such as to keep them all in the same column
    when columns are floated next to one another.
  • to enable special positioning, as when a wrapper is given relative
    positioning in order to contain child elements with absolute positioning.
  • to make it more convenient to specify elements in CSS and JavaScript by
    referring to their parent, without having to id or class each child
    element, as in:
    div#wrap h1 {...}
    div#wrap p {...}
    var aKids = document.getElementById("wrap")
    .childNodes;
    (Note: the var above should all be on one line)

Some special effects require several nested wrappers, such as when a box is
given rounded corners. UPDATED: This is no longer true since the border-radius property has become supported in most browsers. A border for any element can be given rounded corners using border-radius.

Tip: Using a backslash in CSS hacks and workarounds

You may have seen the backslash character ( \ ) used in CSS, often without any explanation as to why it works.

I’ll give you an example, and then I’ll explain when the backslash can be used. In setting a width for a div, you see CSS rules like this:

#somediv {
width: 682px;
w\idth: 680px;
border: 1px;
}

This example uses two width declarations because of IE5.x for Windows’ broken box model. (In Quirks mode, IE6 also uses the broken box model. In Standards mode, IE6 uses the correct box model.) Assume the width you really want for the div is 680px. Adding a 1px border on every side of the div adds two pixels to the width of the div in a browser with a broken box model. A standards-compliant browser includes the 2px border in the 680px specified for the div. As you might have guessed, this use of the backslash to set width is known as the box model hack.

It is important to notice that the declaration (w\idth: 680px;) for compliant browsers follows the declaration for broken-box-model browsers in the Cascade. Here’s what happens. IE.5x reads the width: 682px; declaration but skips over the following w\idth:680px; because it doesn’t understand a property with a backslash. A compliant browser reads the first declaration, but implements the second declaration. The compliant browser implements the second declaration because it does understand a property with a backslash, and because the declaration is later in the Cascade.

Why does the backslash work? It turns out that the backslash is an entirely legal character. In fact, it will not stop your CSS from validating. There is one restriction on its use. You cannot place the backslash before any letter used for the hexadecimal color codes–a,b,c,d,e or f–or unwanted effects will befall you.

Thinking beyond the visual

Digital Web Magazine – Web Design for All the Senses by Dirk Knemeyer is an interesting article about stimulating the 5 senses in web design. He says, “the real reason the Web and other digital networks and interactions are such a hollow, flat experience is we are not being innovative and creative enough. Happily, this is something that we can easily take control of and change.”

I find this interesting because I recently had an epiphany of my own to the effect that web design is both engaging and interesting because it allows the creator to exercise both the left and right brain simultaneously. You have the analytical experience of writing HTML, CSS, JavaScript, etc., to stimulate one side of the brain. And you have the visual experience of planning a color scheme, a layout, graphics, etc., to stimulate the other side. This bit of insight came to me after I signed up to take a Photography and Journaling class, which promised to involve my whole brain with both art and words.

One of my past career paths was to write several books about cooperative learning and multiple intelligences as they apply to the writing process. The Write! books were published by Kagan Cooperative Learning, run by cooperative learning/multiple intelligences guru Spencer Kagan. I’m making quite a leap from the five senses to multiple intelligences here, but stay with me. I’m wondering if there is a way to move from the experiencing of a web page with more than one sense into the teaching of the skill and art of making a web page by using more than one or two of the identified intelligences.

To refresh your memory, the multiple intelligences are Linguistic intelligence, Logical-mathematical intelligence, Spatial intelligence, Bodily-Kinesthetic intelligence, Musical intelligence, Interpersonal intelligence, Intrapersonal intelligence, and Naturalist intelligence.

I haven’t heard of anyone trying to teach web design in a way that brings all the various intelligences into play. Drop me a line if you know someone who has, or if you have some ideas about how it could be done.

Improvements in Son of Suckerfish

Suckerfish Dropdowns – HTML Dog: “The original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class.

Well now they’re back and they’re more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.”

A lot of people have had problems with the Son of Suckerfish dropdowns, so perhaps this will be a big improvement. There are also pure CSS dropdowns in Eric Meyer’s More Eric Meyer on CSS and Project Seven offers some well tested drop down menus as well.

Floating Tips

Zoe Gillenwater has an excellent article,
Curing Float Drops and Wraps, at the Nemesis Project. “Floats are a great way to create layouts with multiple columns: they allow blocks to be taken out of the normal flow, where they would just be stacked top to bottom, and positioned beside each other instead. Unfortunately, however, you’ll occasionally run into a situation where one block drops down below the other one instead of sitting side-by-side as you anticipated. This is commonly referred to as a float drop.”