Designing for web publishing

Keeping the web browser in mind

There are two fundamental challenges to designing a page for the web. The first is the limitations of HTML as a layout tool, and the second is the browser itself. Within the browser, designers must consider the behavior of web pages under a range of conditions and scenarios. What happens when the user expands the web browser window? What if they have a larger, or smaller, monitor? Just like picking the proper line screen to use when designing a concert t-shirt, your web design should take into account the behaviors of the web browser.

Aspects of your design should morph, stretch, or tile to accommodate changes in the web browser. If a user expands the browser window, your design should "feel" like it is designed to move with the browser.

Figure 1. Aspects of the design stretch to accommodate the width of the browser window.

To achieve the stretching effect of the D.i.D. website (www.directid.net), a web graphic is needed that is designed to tile across the horizontal (x) axis (see Figure 1). To make this work, the right-most and left-most pixels of each graphic must match (see Figure 2).

Figure 2. The CSS rule background-repeat tells the web browser to repeat the image background.gif along the x axis.

You can test the behavior of your web page design directly in Dreamweaver CS4 using the new Live View feature. With your document open in Dreamweaver, click the Live View button to have Dreamweaver render the page as it will appear in a web browser (see Figure 3). This feature saves a ton of time and can keep your workflow running smoothly as you optimize your design for the web.

Figure 3. HTML document open in Dreamweaver with Live View selected.

Page 2 of 7

Previous Page

Next Page