Web Design Jeff Carlson

jeffcarlson.com
for Print Designers HOW Design Conference 2007

Design is just design, right? Your goal is to make something that’s attractive and
engaging, so who cares if you accomplish it using ink or pixels?
You do.
Designing for the Web requires changes in how you approach the job’s concept, the
technology you use, and the process of creating the end result. And testing—lots and
lots of testing.

Concepts
 Interaction. The Web is an interactive canvas—don’t make a large image in
Photoshop and just post it online.

 Navigation. A Web page is structural, not just visual. Think about how the visitor
is going to move around your Web site. How does she access areas deeper in the
site? (And should that information be buried, or available on the main page?)

 Accessibility. You can’t assume that everyone is viewing your site on a 30-inch
Cinema Display…or that they’re even “viewing” the site at all. A large part of Web
design is determining how people will use the site, and making it possible for
those with disabilities to access the content.

 Collaboration. You may not be able to program a server-side database if your

Pantone books depended on it, so it’s likely that you’ll be working with a
programmer for some jobs. Planning at the outset for collaboration can determine
which elements are designed first, and provide for a workflow that doesn’t hold
anyone up.

Technology
 Images. In addition to making things visually appealing, you have to consider
download times. You might be accustomed to throwing around 10 MB Photoshop
images, but that just won’t fly on the Web. The biggest indicator that an
inexperienced print designer has created a Web page is image size and how long
it takes the page to load.
 HTML. You’d think that after a decade, we wouldn’t ever need to look at HTML
(hypertext markup language), but that’s not the case. You’ll spend more time in
an HTML editor than in Photoshop, so it’s essential to know how it works—even if
you’re using a graphical editor such as Dreamweaver.

 CSS. Hand-in-hand with HTML is CSS (cascading style sheets), which are the
backbone of the modern Web. Think paragraph and character styles in InDesign or
QuarkXPress, and add in the capability to position items on the page.

 Flash. This interactive technology is almost ubiquitous on the Web, and almost
always misused. If you’re designing an interactive site that requires the visitor to
wait while the whole thing loads, is it worth the trouble? Use Flash selectively for
greater impact.

Testing
 Testing is often the most labor-intensive part of Web design, but it’s also the most
important. Test your site on as many browsers and computers and operating
systems as you can. Testing beforehand leads to fewer headaches later.

Tools
 Adobe Dreamweaver, $400, www.adobe.com/products/dreamweaver/

 Adobe GoLive, $400, www.adobe.com/products/golive/ (future uncertain)

 Microsoft Expression Web, $300, www.microsoft.com/products/expression/en/

Expression-Web/ (replacement for FrontPage)
 Apple iWeb, $80, www.apple.com/ilife/ (part of iLife)

 Bare Bones Software BBEdit, $125, www.barebones.com/products/bbedit/

(industrial strength text editor)

 MacRabbit CSSEdit, $30, macrabbit.com/cssedit/ (awesome CSS editor)

Selected Resources
 A List Apart, www.alistapart.com

 Web Developer extension for FireFox, chrispederick.com/work/webdeveloper/

 CSS Zen Garden, www.csszengarden.com/

 HTML and CSS for the World Wide Web: Visual QuickStart Guide, by Elizabeth Castro,
www.peachpit.com (essential reference)

 Designing with Web Standards, by Jeffrey Zeldman, www.zeldman.com/dwws/

 Browsershots, www.browsershots.org (test multiple browsers via the Web, free)

 Browsercam, www.browsercam.com (test multiple browsers, fee-based)

Notes