Web Design Tips for the Print Designer, Part 2

The mission of Newfangled's agency partnerships is to enable agency and design partners to comfortably, confidently, and profitably provide web development services to their clients. One of the ways we do this is by always striving to improve our development process. The more refined and efficient our process becomes, the easier it is for our agency and design partners to work with it and communicate it to their clients. In the past two and a half years we have made great advances in simplifying and streamlining our process through grayscreen prototyping and the NewfangledCMS. However, one area of development that has been difficult to streamline is the "skinning" or design application phase.

In our last newsletter we reviewed the grayscreen/whitescreen development process. You may recall that after the "whitescreening" and visual design phases are completed, we enter into the "skinning" phase. "Skinning" is the process of applying the approved visual design to the generic "whitescreen" templates. The skinning phase usually progresses while the client is still entering content. This makes for an interesting experience as the site transforms from the white-screen into its final state. This is currently the most open-ended aspect, in terms of time and cost, of our development process. It is also the trickiest aspect to estimate since the complexity of the approved visual design (which isn't completed until the middle of the process) can impact the skinning phase.

This month's newsletter will help define design elements that impact the skinning process. We will then provide some tips that will help you to design sites. Finally, we will provide some guidelines for how we prefer to receive design layouts from you. By following these guidelines we can continue to streamline the development process.

The design application phase of development can go quickly or get bogged down in all sorts of difficulties. Designing for the web is tricky since certain design decisions have technical, programmatic implications. For example, suppose a design calls for a ghosted photographic background. On top of the background a silhouetted foreground image with a drop shadow is added. The design also calls for the body copy to slightly overlap the foreground image. Additionally, the text was laid out with a 1pt. border with rounded corners. A layout such as this would be very difficult to skin. It would require breaking up images into multiple pieces, and then reassemble them using layers and complex table cells. Borders with rounded corners can only be produced using graphics in combination with complex tables.

Intricate designs such as these can usually be accomplished through various technical workarounds. But the more workarounds needed to implement a design, the more problems there will be in making them work across browsers and platforms (for more information on browser issues see "Browser Battles"). Complex visual design can exponentially increase the difficulty of skinning a website.

Intricate layouts that utilize lots technical workarounds are also harder to maintain. The more complex the code, the harder it will be for someone to go in and make changes to site templates. Making changes to complex code can also create new problems that might require additional browser testing. Sometimes a "fix" made to a complex site can break something else in other browsers or platforms.

Because there is so much potential for problems in implementing designs on the web, Newfangled offers design consulting for our agency partners. Web layouts can be sent to us for a technical design review so we can identify problematic issues prior to a client presentation. This insures that when layouts are presented to a client, you can be confident that they will be able to be produced without technical problems.

In addition to ongoing design consulting, we write these Web Smart Newsletters to highlight common mistakes and suggest design standards to help you to avoid problems.

Before we delve into visual design we would like to suggest some organizational tips for working through the architectural and information design aspects of site design.

Navigation systems: Consistent navigation is one of the keys to making a website easy to use. Home pages sometimes use a different layout from the rest of the site and the navigation system might be handled differently. However, it is generally better to establish your navigation right from the start. If the home page has a different layout, the rest of the site should certainly maintain consistent navigation. The main navigation should always be in the same place on the page and should never change. Don't remove the navigation button of the "current" section. While it's true that a button for the "current" section is not technically needed (since the visitor doesn't need to navigate to a section they're already in), it should not be removed for the sake of navigational consistency.

The main navigation of a typical site includes the main sections, and what we refer to as "site utilities" or global navigation. Site utilities are pages like "contact us," "search," "site map," and home." These sections are common to almost every website and can often utilize icons rather than being listed among the main sections. Main sections are the primary main categories for the site. "About us," "Products," "What's New," and "Services" are examples of main category headers. These are usually specific to each company and will include any number of sub pages. We generally use "cascading menus" for the sub sections of main sections (more on this later). For download and speed reasons we may use graphic text for the main section headers, but HTML text for the sub menus.

In addition to a consistent main navigation we also recommend a consistently located sub navigation system. Sub navigation not only makes it easy for the user to toggle between pages within a main section, but also helps to maintain orientation for the visitor as they explore the site. A navigation system should clearly identify and distinguish main sections (first tier), sub sections (second tier), and third tier pages. The consistent use of layouts for main section pages, sub section pages, and third tier pages, (as well as their associated title sizes and formats) can provide visual clues to the visitor as they navigate through the site.

As previously mentioned we typically use DHTML drop down menus for most of our sites. Drop down menus are useful because they reveal the contents of a site simply by "mousing over" the main menu navigation bar. When the mouse moves over the navigation bar, the menu of pages "beneath" main sections appear dynamically. As the mouse moves down this list, third tier pages are also revealed. The visitor can click on any of these links and go straight to these pages. Drop down menus make navigating a site extremely simple. They also remove the need for site maps, since the navigation system itself acts as a dynamic site map. As a side point, the NewfangledCMS can be configured to allow site owners to add sub section pages and/or third tier pages dynamically. Our drop down menu system automatically adds these new pages to the navigation.

Drop down menus caution: There is one potential downside to using DHTML drop down menus. When using them, visitors often "skip over" main section landing pages. For example, on our site if you mouse over "About Us" you will be presented with several sub pages. Usually a visitor will click directly to one of these sub pages thus never seeing the content on the "About Us" main page (or landing page). If you place important content on this landing page, it is not likely to be seen. We have developed two techniques to address this drop down menu dynamic. One is to add a duplicate sub-section listing of the main section's landing page. While this technique does not require a visitor to hit the main section's landing page, it does increase the likelihood that they will see its contents.

The other technique we use is to make sure we do not put any critical information on the main landing pages. Instead we might place a short description of the content in that section with links and descriptions to each sub page. These main section pages simply act as a glorified table of contents. In the event that the visitor skips over the landing page, they haven't missed anything critical.

Being aware of the drop down menu dynamic helps to write appropriate website copy. When using drop down menus you might need to repeat key phrases or main points made on a main section's landing page throughout its sub sections so the main message will come through whether the visitor hits the main section's landing page or not.

There is one other factor to keep in mind with regard to DHTML drop down menus. There is a bug between DHTML layers, Flash movies and HTML form widgets. If your menu system overlaps an embedded Flash movie, or a form widget (like a pull down menu or submit button) the flash movie or widget will display above the menu. This just needs to be kept in mind when designing so that these overlaps don't occur.

When designing a site with drop down menus you will need to specify a range of colors for the various states of the menu. Keep in mind that there are two states for each menu level, the default state and the mouse over state. For each state, you need to specify a background color and a text color. Usually, the main sections will need three states, the default state, the mouse over state and the "active section" state. Since main navigation items often utilize graphics, you will need to provide three sets of the graphics for the three states. If the site has third tier pages, another set of colors needs to be specified for the third tier of DHTML menus. See "Organizing your Photoshop files" below for specific ways to do this.

Borders: Designing borders around elements may cause skinning problems especially when borders overlap each other, or if the borders require rounded corners. Squared off borders that do not overlap other page elements are usually fine. Rounded borders can only be accomplished by carefully lining up a graphic with table cells (used to create a round corner).

Overlapping elements: In general overlapping elements on the web is something to be avoided. There are a few different ways overlapping can cause a problem. Overlapping drop shadows with textured backgrounds, overlapping navigation elements with graphics, and overlapping text and graphics.

Whenever a page design calls for a textured background or background image, foreground text or images should not have drop shadows. Text and images with drop shadows need to include the portion of the background that the drop shadow falls over. For this effect to work the image or text with a drop shadow will need to display in the exact position where it overlaps with the background image. Even a one pixel offset can cause the effect to break. Pixel perfect control of web page layout is extremely difficult especially when trying to support many browsers and platforms.

Because navigation systems usually use graphics for the main navigation elements, overlapping a background element with the main navigation bar is not recommended. This is because, as mentioned earlier, navigation graphics require three states (default, mouse over, and active). Each of these states use separate graphics. Overlapping design elements with navigation elements will cause strange effects when the state of a navigation element changes but the background graphics does not.

Overlapping HTML text with a graphic is also problematic. Especially when a graphic is silhouetted and text is designed to wrap around the image. To avoid this web design flaw, always try and image your graphics as rectangles. Even if you silhouette your image, the web still views it as a rectangle with one specification for its height and one for its width. If you can imagine an invisible bounding box around your images, make sure that no other page elements (text or other content images) overlap that bounding box.

The old standard of web safe color (8bit - 256 colors) is fortunately a thing of the past. Most of today's computers are set to use a minimum of 16bit (thousands of colors). This does mitigate most of the need to worry about "web safe color." However, the potential for an image to "dither" even with 16bit color is still present. When you specify a color outside of the 16bit color palette, dithering can occur. Dithering occurs when the computer uses a dot pattern of two colors to display a facsimile of the original color. Dithering makes smooth fields of color appear speckled (see illustration). You can use the 16bit RGB value chart to avoid dithering by picking RGB values that are 16bit safe.

Colors do display darker on PCs than they do on Macs. If you are designing on the Mac you may want to set your gamma to sRGB while designing for the web. This setting will simulate the slightly darker monitor default common to PCs.

The design of form widgets (i.e., pull down menus, submit buttons, radio buttons, check boxes, etc.) cannot always be controlled. Internet Explorer does offer some control over form elements such as their color, and font and size, but even these controls might display differently between Macs and PCs. When designing for the web you might want to specify design standards for form elements, but keep in mind, these specifications will not display consistently across all browsers and platforms.

As we discussed in the original Web Design Tips newsletter, Photoshop is the best tool for web page layouts. Web graphics (with the exception of Flash files) are pixel based rather than vector based. This makes Photoshop a better tool for web page layouts. In contrast, when designing in vector based programs like Illustrator or Freehand, your designs can change quite a bit when the site gets skinned because subtleties like type size and aliasing, and color specification can shift when translating to the web.

To work efficiently with our partners, we offer the following specifications for setting up your Photoshop documents. The more tightly you are able to follow these guidelines, the more efficiently we will be able to skin your deigns.

Fonts: If the developer does not have the fonts you used in your document, you may need to rasterize the font layers. In general, however, it is better to leave the fonts as text and include them when sending us your layouts. In the event that rendering the font layer is necessary, please label the layer with the font, size, and leading used.

Save settings: When saving your file, make sure it's in RGB mode but don't embed any color settings. If the developer has their Photoshop application set to convert embedded profiles, your carefully chosen colors could shift considerably.

Background images: Because the web is a dynamic environment, you will need to make sure any complex background graphics fit. Check that they extend beyond the right and bottom of the browser window so that they are large enough to accommodate an expanded browser window (see the Web Design Tips newsletter for more about "stretching" background images).

Cleaning Up Your Document: In the course of the creative process, you may try a lot of different things to get the "look" you think the layout should have. When finished, the multitude of layers in a Photoshop document can resemble the internal wiring of the space shuttle; only the original designer has any idea what they are and where they lead.

Simplify your document as much as possible. Eliminate layers that the developer would end up flattening anyway. For example, flatten any layers that will be part of the background. You'll need to pay attention to any blending modes you've applied to layers when merging them together. Merging layers one at a time will eliminate any surprises. Eliminate any empty layers (believe me, this happens) and layer styles you've turned off.

Using layer folders is a great way to organize items that are part of a group but shouldn't be merged into one layer. Folders are also good for grouping items together that are part of a "rollover state." By grouping them in a folder you can turn them all off with one click and the developer knows that all of those layers are part a rollover state.

Clearly labeling your document will make skinning the site much easier. First, organize your Photoshop layers in a logical order (background layer, static graphics, type layers) and put layers together that are part of a group. Make layer labels clear. "Main navigational headers" is more helpful than just "nav." If a layer is a rollover state, make sure the label reads "rollover."

It is much easier to interpret Photoshop documents if you break the home page layout, main page layout, and sub page layout into separate Photoshop files. If you are using a color code design approach for each main section, make sure we have separate documents for each section. Of course naming your documents appropriately helps as well. Pages that have carefully designed content for low-level design elements such as tables, charts, product detail pages, etc., should also be provided as separate Photoshop documents.

We have provided a sample Photoshop file set up according to the specifications mentioned in this newsletter.

The more we are able to integrate our process with our partners, the more efficiently we can develop your sites. We want our agency and design partners to be as profitable as possible when working with us on web development projects. These principles, as well as Newfangled's ongoing design consulting, help our partners to become more and more comfortable and confident when designing for the web.