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.

Sybex sponsors Digital Photo Contest

Sybex Photo Gallery explains how to win $1,000 from Sybex.

Send your best 3 digital photos to www.sybex.com between now and 4/1/05 for a chance to win up to $1,000 and publication in a Sybex book. The judge will be Tim Grey, author of Color Confidence (read my review here) and Photo Finish from Sybex.

1st Prize: $1,000 and publication in a Sybex book

2nd Prize: $500 and publication in a Sybex book
3rd Prize: The Digital Photographer’s Library (retail: $99.95), with books by Mikkel Aaland, Peter K. Burian, and Tim Grey.

Where are the women of Web Design

Dori Smith, author of numerous programming books and Mac books, commented on her blog, “I was reading Eric Meyer’s Blog today, because he’s a smart guy and has forgotten more about Web dev than most people will ever know. And he said, among some other things, that he’s speaking at SXSW Interactive. Dandy, wish I was there to hear it? until I noticed one of the topics he’s speaking on:

“Where Are the Women of Web Design?, an exploration of why there are so few female “leaders” in the Web design space, and how we might encourage more.
Think about that one for a moment. And then another moment.”

Dori rightly feels that there are some women out there who are qualified to talk on this topic. Eric Meyer is a CSS god, in my opinion, but that is not the same as a goddess, now is it?

Miraz Jordan chimed in on her blog with some suggested women in Web Design. I would offer up Dori and Miraz as women in this field who are influential myself, and could add quite a few more. How about:

  • Molly Holzschlag
  • Elizabeth Castro
  • Sharron Rush
  • Robin Williams
  • J. Tarin Towers
  • Shirley Kaiser
  • Lynda Weinman
  • Linda Rathgerber
  • Zoe Gillenwater
  • Stephanie Sullivan

And I’m just getting warmed up here! How about some more names, folks?

Interview with Steve Krug

Steve Krug Interview – Don’t Make Me Think – Web Usability: Steve Krug, the author of Don’t Make Me Think: A Common Sense Approach to Web Usability, is a highly respected usability consultant, and he has worked with companies like Apple, Netscape, AOL, BarnesandNoble.com, Excite@Home, and Circle.com. Krug’s book is packed with practical techniques for developing a highly usable web site. Before you create or redesign your web site, make sure your designer has read Krug’s book.

MCNews asked Krug to answer some questions about designing web sites that communicate effectively and are easy to use.

Review: Global Mobile: Connecting without Walls, Wires or Borders

Global MobileGlobal Mobile: Connecting without Walls, Wires or Borders (Peachpit, 2005) by Fred Johnson is a small and basic guide to getting around with a laptop, cell phone or handheld device.

It is a handy guide for the uninitiated who want to take a laptop out of the home or office to an internet hotspot, want to travel abroad and use a cell phone, want to use text messaging from a phone, want to work on the road, or want to use Bluetooth.

It includes a few beyond-the-basics tips like how to create a wireless computer-to-computer network and how to connect a laptop to a cell phone for internet access using a cell phone. The appendices include GSM frequencies (for cell phone use abroad) by country, and telephone country codes.

This book can help you sort out what the technologies are and what equipment you need to get started with them.

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.