Designing for web publishing

When moving your design work into a new medium, one of the biggest challenges is learning the ropes of that new medium. This process always involves learning some of the technologies that make that medium tick. You have to kick the tires a bit, and frequently ask, "what if I tried this?"

If you work in the print industry, chances are your design work has been imaged on everything from t-shirts and coffee mugs to high-resolution art books and high profile annual reports. In each case, you needed to take into account the types of media and the needs of your design work to portray it properly. Today, a designers' work may need to be animated across a 50-foot HDTV display in Time Square or printed with varying graphics and text for customized mass mailing. Designers must explore the exciting new possibilities, and pitfalls, of each new technology that is making these design transformations possible.

On the web, there are many wonderful new opportunities for designers, including animation and video, interactive galleries, slideshows, and sound. There are also not-so-wonderful aspects as far as designers are concerned, such as a user's ability to customize the way your website looks. Users can reshape window sizes, change text color, make text larger or smaller, turn images off, and so on.

Fundamentally the web is a tool for gathering information quickly and then finding related information elsewhere. The design, in this case, needs to be flexible enough for these variables, but still tie together the site's branding elements into a cohesive user experience. This article explores some fundamental techniques and technologies used to design for the web.

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.

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

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.

One of the more challenging aspects of website design is that content may change each time a user visits a page. On the Your Dogs Heart website (www.yourdogsheart.com), the web server randomly selects a Heart Healthy Tip for the sidebar each time the page is viewed (see Figure 4). We did this to ensure that each tip gets its fair share of visibility. This feature posed two challenges. First, each tip requires a different amount of vertical real estate. This means that the other sidebar elements will be displayed higher or lower on the page, depending on which tip is displayed. Second, there is the issue of continuity. We never know which tips will appear on which page, so we don't know whether the tip will be related in any way to other content on the page.

During the design phase, we spoke to our writer about this and decided that the tips would be in a sidebar along with the other sidebar content. This way, the tip would have a bit of separation from each page's main content, but still provide additional information about the site's main topic. In addition, the tips were written so that they would not be mistaken for being directly related to the main content area. Each tip also provided a link to see more tips.

Note: For more information and tips on writing for the web, visit Writing for the Web on useit.com.

There are a growing number of file formats that you can use in your web pages. By far the most popular formats are GIF and JPEG. These formats are natively supported by all web browsers, which means they can be displayed in your web page by simply pointing to them with a single line of code.

There are some important differences between GIF and JPEG files.

GIF files can contain a maximum of 256 colors. Each GIF file has an associated color table, which stores the information for each color used in the file (see Figure 5). One advantage of this approach is that those colors can be assigned to be transparent, which means that anything behind that area of the GIF will show through the image. Although the transparency can only be 100% or 0%, this still gives you some options when creating overlapping artwork.

In the example shown in Figure 6, the D.i.D. logo has transparent areas and a matte color assigned that matches the banner area of the page. The blended colors that make up the smooth edge are flattened to the dark blue banner. This gives the illusion that the image blends into the background color.

Another advantage of GIF files is that they can be animated. Before Flash, animated GIF files ruled the web advertising world. You can create cell-based animations based on animated GIF files with tools like Adobe Photoshop or Adobe Fireworks.

GIF files are preferable to JPEG files when you need consistent color replication (as in logos), large areas of flat color, transparency, or simple animations (see Figure 7).

JPEG files do not use a color table, and they are capable of storing millions of colors. JPEG files represent an image in "blocks," or groups of pixels to make the files smaller. When you compress a JPEG file, you are averaging areas of the image to simplify it and make a smaller file. The more you compress an image, the more you average, or lose data, and the smaller your file size. Conversely, when you do not compress an image, you retain more detail and end up with a larger file. Since JPEG files can store so many colors, they are preferred for photographs and scans of illustrations (see Figure 8).

PNG files are relatively newer and come in two flavors: 8-bit and 24-bit. An 8-bit PNG is similar to a GIF file in that it is limited to 256 colors, including a single transparent color. PNG-24 files, on the other hand, can store as many colors as a JPEG file, and have an additional 8 bits for transparency. This means each pixel of a PNG-24 image can have 256 levels of transparency (see Figure 9).

The transparent pixels in the GIF file (right) are 100% transparent, so you can only choose one matte color for the other pixels to blend in to. In this example, the matte color is white, which produces a halo effect over the non-white areas of the background

There are some issues with getting Internet Explorer to properly render the transparent areas of a 24-bit PNG file. Fortunately, there are a few blog posts to help you with that issue. For more information, see Transparent PNGs in Internet Explorer 6 and CSS PNG Image Fix for IE.

In more traditional media, style sheets are responsible for formatting text. On the web, style sheets perform dual duty. Cascading style sheets (CSS) not only format text, they are also used to control the layout of a web page. In addition, CSS rules can be defined in an external document, allowing you to style hundreds, or thousands, of pages from a single CSS file.

Using Adobe InDesign or a similar application, a designer can draw a frame, fill it with text or images, and position it on the page. Designers can work in a similar fashion on the web, but the approach is a little different. HTML consists of tags that are inserted before, inside, and after the text of your page. These tags act as instructions to the web browser on how to render your content. Consider the following HTML:

When this sentence is rendered by a browser, the word quick will be in bold (strong), and the word jumps will be a hyperlink to the Adobe website.

With no additional formatting, blocks of text will just run on in a browser window stretching as far left and right as users open their windows. In order to control the layout and positioning of these items, you need to use some tags that will allow you to group, in a sense, other tags within a larger tag. You can then control the look of that group with CSS. Think of this as creating your own InDesign frame container with HTML.

You use a DIV tag to group other tags. Anything in between the beginning DIV tag (<div>), and the ending DIV tag (</div>) will behave like a group when you assign visual properties to it.

For example, to create a copy block that is 200 pixels wide and has a blue border, you need to create a CSS rule and then assign that rule to the DIV tag. In the example shown in Figure 10, I named the CSS rule .sidebar (making it a class), and added a class="sidebar" attribute to the DIV tag.

In Figure 10, note the visual CSS editor that is part of Dreamweaver. As you design your web page, you can define your CSS items with this full visual interface. Not only does this speed up your production process, but it is a great way to see all of the possibilities available to you via CSS. You can learn a lot about CSS by simply playing with this built-in editor.

There are more settings I can apply to the .sidebar CSS rule to add more design appeal to the page. First, I can assign a background image to the sidebar DIV by adding a background-image attribute to the sidebar CSS class rule. I can target other tags inside of the sidebar DIV by making new CSS class rules with other HTML tags in the name. For example, creating a rule named .sidebar p will create a rule that targets <p> tags only if they are inside of a tag with a class of sidebar. I can do the same for the <a> (anchor) tag (see Figure 11).

You can use CSS rules to position DIV elements by floating them left and right and allowing other tags and DIV tags to line up. These basic principles make up the core elements of CSS-based layout on the web.

Note: For a free, step-by-step guide to making your first CSS-based web page in Dreamweaver, see Getting Your Web Design to the Browser (PDF, 22.8MB). Also download the source files for this step-by-step guide (ZIP, 2.99MB).

You can use web browsers to display a lot more than simple HTML. You can play video, run Java applets, watch sophisticated animations, listen to music, and play sound effects. Since many of these actions cannot be represented with HTML code, there are numerous additional file formats that you can point to with HTML code to instruct the browser to initiate them.

In many cases, the web browser needs additional software to display these rich media files. These extra pieces of software are called browser plug-ins. One of the most widely distributed plug-ins is Adobe Flash Player, which allows you to display a published Flash file (a SWF file) inside of your web page (see Figure 12).

Although the content of the rich media file is not HTML, you need to use HTML code to tell the web browser which plug-in to use and what file to load. In addition, you may want to add code to determine if the browser has the plug-in installed before displaying the media. This is known as a detection script, and is actually written using JavaScript. Adobe provides just such a script, and it is freely available. Even better, when you simply drag your SWF file into an open HTML page in Dreamweaver, all the work will be done for you automatically! The resultant HTML and JavaScript code, shown in Figure 13, checks for the Flash Player plug-in, auto-activates the object as ActiveX in Internet Explorer on Windows, and more.

Flash Video (FLV) is the most widely used video format on the web. FLV files are actually loaded into a SWF file for playback in a web browser. The Adobe Flash Player can play SWF files or FLV files loaded into SWF files. This allows a Flash developer to create a SWF file that can load any number of FLV files into the same SWF file. This is how websites such as YouTube allow you to watch many videos without changing web pages.

Note: For a guide to learning Flash, see Moving Your Design with Flash (PDF, 22.3MB). Also download the source files for this stBep-by-step guide (ZIP, 8.96MB).

Spry is an Ajax framework developed by Adobe Systems.

To understand what that means, let's review some of the underlying technologies. JavaScript is a scripting language that you can mix in with your HTML. It allows you to give the web browser extra instructions, such as open a pop-up window, change an image when the mouse rolls over it, or display a calculated mortgage payment within a form.

If you combine JavaScript with CSS, you can do even more. You can change CSS properties without reloading a web page. You can change colors of DIVs to highlight items in a form that must be filled out. You can change an object's position, or make new objects appear. This technique is used for navigation menus and for displaying a brief profile when the user rolls over a friend's photo on Facebook.

Together, these advanced interactive techniques are commonly referred to as Ajax (Asynchronous JavaScript and XML).

The learning curve can be steep for Ajax. Dreamweaver, however, makes it easier. The tools in Dreamweaver enable you to create and style your own Ajax applications with a few simple clicks.

When you finish creating your Spry object, Dreamweaver will add the necessary JavaScript and CSS files to your web page and make sure all the programming is in place. I know of no faster way to start using Ajax than this.

Dreamweaver has several built-in widgets that you can set up on the Spry Menu Bar as shown in Figure 14. For more examples of what you can achieve with Spry, visit the Spry framework for Ajax topic center.

Where to go from here

You can refer to numerous resources on the web to better understand the technologies and approaches available for web design. For more information refer to the following resources:

• Writing for the Web
• Getting Your Design in the Browser (PDF, 22.8MB); source files (ZIP, 2.99MB)
• Moving Your Design with Flash (PDF, 22.3MB); source files (ZIP, 8.96MB)
• Spry framework for Ajax in Labs

Also be sure to explore the Dreamweaver Developer Center for more topics of interest, such as:

• Learn to work with CSS
• Learn to use the Spry framework for Ajax
• Learn to build dynamic websites and web applications