| The first fundamental challenge of web design is to create pages that look and behave the way they're supposed to using HTML, the page-layout language that controls the appearance of everything on the web. (See building your first web page, p. 196.) From a design perspective, the problem with HTML is that it isn't a design tool. It was developed to define the structure of documents (distinguishing headlines from paragraphs from lists), not their appearance. Many visual effects used in print design simply aren't possible with HTML. To achieve even simple effects like creating two columns of continuous text you have to get creative with the technology. The designer must learn to work with and around the limitations of HTML in order to produce interesting designs. "You've got to exploit the medium," says Jeffrey Veen. "You have to understand it inside and out. I just don't think you can do good web design without knowing HTML without getting deep into it." Of course, not everyone goes quite as deep. Most successful designers understand the medium's possibilities. But not all of them learn to program. Sheryl Cababa, a product designer with Microsoft, argues that designers can learn the limitations of HTML without learning the actual code. While she herself can hand-code pages, she doesn't think it's essential. "I know designers who've had an incredible impact on every product they've worked on, who aren't at all technical," Cababa says. "They just understand how things should function. And they don't need to know the magic behind it in order to design something that really works and is really usable." "Building web pages with HTML is like painting a portrait with a paint roller." Steve Mulder 5 keys to HTML design Learn the limitations. As with any medium, you have to know your constraints. You should understand how pages are structured, how text is treated, and how images are included before you begin. See how web pages are built, p. 191. Surrender some control. Designers get themselves in trouble when they try to control every last pixel on the page. It's just not possible. You can't control the exact placement of everything on your site. Your site will appear differently for different users. Accept this. You are not in control. Try very hard to accept this. Don't try to re-create print designs. HTML works differently from page-layout software such as QuarkXPress and Photoshop. There are many things you just can't do, and you might kill your design or your production manager trying. It's best to start from scratch, structuring the page to take advantage of the web. Learn to live without your favorite fonts. On the web, you can use only those fonts that your users have installed on their computers, so you'll have to learn to love Arial, Times, and Verdana. And while you can include images of text in any font you want, you should only do this sparingly. See typography on the web, p. 150. Test! Test! Test! Your design will appear differently on different computers, browsers, and monitors. Some variation is inevitable, but you should know what the variations are before you decide to accept them. Sometimes small changes in the code can make a difference between displaying perfectly and not at all. See designing for different systems, p. 90.
|
toolbox: choosing software for web design Although you could create a web site using nothing but a text editor, most professionals rely on a range of software tools to help them accomplish specific tasks HTML-editing software | Choices include: |
|---|
How it's used: For designing and building pages. Most HTML-editing software allows you to design pages in a visual environment, while the program creates the HTML. You can also do it in reverse: creating the code yourself and using the editing software to observe how it will look. | Macromedia Dreamweaver http://www.macromedia.com Macromedia HomeSite http://www.macromedia.com Adobe GoLive http://www.adobe.com/golive Microsoft FrontPage http://www.microsoft.com/frontpage
| other page layout software | Choices include: |
|---|
How it's used: Some designers use a non-web layout program such as Photoshop to mock up pages, before they build them in HTML. This allows them to work more quickly and comfortably. However, it's important they understand the limitations of HTML before taking this approach. Otherwise, they'll design pages that just can't be built. | | site-mapping software | Choices include: |
|---|
How it's used: To create the chart that visually represents the site structure. (Note: You don't necessarily need software for this; it can often be done on paper.) | | graphics software | Choices include: |
|---|
How it's used: For producing, editing, and compressing images. Some software focuses on one type of image (photographs versus illustrations), and some focus on a particular process, such as compression. | Adobe Photoshop http://www.adobe.com/photoshop Macromedia Fireworks http://www.macromedia.com Equilibrium DeBabelizer http://www.equilibrium.com
| animation software | Choices include: |
|---|
How it's used: For designing and producing animation. | |
|
|
