Design

Design

My opinion is and has always been that a web-based mail application should look and function as much like a native desktop application as possible. Services such as Google's Gmail are examples of web-based mail applications that have embraced this design concept. In Gmail's case the fact that it functions more like a native desktop application was met with much fanfare and is one reason for the service's success. Desktop mail applications all follow similar design principles. The icons may vary, but placement of typical mail-related operations and the user-interface for viewing messages is very similar from application to application. Figure 7-1 is a screenshot from Microsoft Office 2003.

Figure 7-1

Figure 7-2 is a screenshot from Mozilla Thunderbird.

Figure 7-2

What's clear from Figures 7-1 and 7-2 is that mail applications tend to place mailboxes and folders on the left, and messages on the right. Eudora and Mac OS X Mail also follow this scheme. Because desktop applications tend to agree on where to place folders, buttons, and messages, your web-based mail program would benefit from this de facto standard mail application layout.

Most developers would be tempted to use frames to lay out a web-based mail application to match the layout of popular desktop mail applications. Frames intensify the complexity of developing an application. For this web application you would have to partition the document into three different frames — four, if you're including a message preview pane. A web-based mail application should have no more than one frame, and that frame should only be included if a message preview pane is required. Messages must appear in a separate window because most messages today contain HTML, and because these are complete HTML documents, they are ideal for frames. The rest of the application can be laid out with mere CSS in a single document.

You have two routes to take if frame-like design is required using CSS and markup, but they depend on the layout:

• 
  

  Fixed positioning is appropriate if a portion of the document remains in place while another portion of the document scrolls. This is also superior to frames for several reasons. There is only one document to manage. If a dynamic layer such as a drop-down menu is required, a frame design won't work because a layer cannot leave the frame that contains it. Frames are also not accessible for people using speech synthesis browsers.

  
  
  


• 
  

  Absolute positioning, in addition to the overflow: auto; declaration, is appropriate if only the contents of the layer (or pseudo-frame, if you prefer) scroll or no scrolling is involved.

  
  

As you saw for columns in Chapter 2, pseudo-frames are created with CSS and markup using a stretching technique that involves the use of offset positioning properties in tandem to imply width. That is, left: 0; and right: 0; present in a rule that also includes a position: absolute; or position: fixed; declaration imply width. The element is stretched to the width of the element that it's positioned relative to. These principles are used to create a left window for message folders, and a right folder for message summary information.

Message folders in this application are laid out using simple, unordered lists, and the message summaries are included in a simple HTML table.

Now that you've seen an overview of what components come together for the styling of a webmail application, the next section presents the source code and an explanation of how the CSS comes together with the markup to produce the final results.