Designing for HTML

Call (800)770-0492, email david (at) naaip.org, request via chat or at daily conference call. Click eContracting Registration or eContracting Login (after registration).

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.

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.
  • 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.
  • 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.

Toolbox: choosing software for web design

Although you could create a website using nothing but a text editor, most professionals rely on a range of software tools to help them accomplish specific tasks

HTML-editing software

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.

Choices include
  • Macromedia Dreamweaver
  • Macromedia HomeSite
  • Adobe GoLive
  • Microsoft FrontPage

other page layout software

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.

Choices include:
  • Adobe Photoshop
  • QuarkXPress

site-mapping software

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.)

Choices include:
  • Microsoft Visio
  • SmartDraw

graphics software

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.

Choices include:
  • Adobe Photoshop
  • Macromedia Fireworks
  • Equilibrium DeBabelizer

animation software

How it's used: For designing and producing animation.

Choices include:
  • Adobe AfterEffects
  • Macromedia Flash MX
Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable.

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - Website Owner, NAAIP.org

Moses Newman - Chief Technical Officer, NAAIP.org