To give feedback on the articles published in this newsletter or to make recommendations on writers and topics that you'd like to read about, write newsletter at gotomedia dot com.

Look Ma, No Tables!!
Part Two: Redesign in Practice

BY ILENE SANDLER

Taking full advantage of CSS
While the separation between presentation and delivery isn't new, it has taken awhile for many designers to adopt. It truly involves a different way of working - changing not only the coding of sites but minimizing the focus of visual design in the initial stages of development. Part of our approach was to separate content from aesthetics by using XHML and CSS. The gotomedia team got their feet wet by working on client projects where sites were developed using basic CSS formatting techniques. During these projects, gotomedia first appreciated how CSS simplified the development process and yielded much more flexible and consistent results.

When planning the gotomedia.com rebuild, the use of spacer gifs, tables, and limited CSS seemed old-fashion. Both gotomedia's Principal and main Web Developer were motivated to develop the site in a new efficient and cross platform manner. They were determined to code the entire site using only CSS and no tables. Each page was set up to reference 3 different style sheets:

• A style sheet designed for the latest browsers which allowed for full formatting and graphics display.
• A style sheet designed specifically for print. The web browser window is generally too wide for a standard printer so printed pages get cut off. With the print style sheet, turning off the page width information allowed the page to resize itself to the width of the printer.
• A style sheet designed for older browsers containing very minimal formatting such as background colors and headers. This version of the style sheet is referenced for devices such as PDAs, where content display needs to be simplified and work on a small screen.

With these three styles sheets, the PDA version and print version could look entirely different than the screen version. Even the full featured web browser version could easily be changed to yield a dramatically different aesthetic by changing styles in CSS.

Standards based coding
We wanted to respect and embrace web code standards specifically XHTML as a modern successor to the many variants of HTML. There have been a million ways to build a site in HTML - none of which have been clearly right or wrong. XHTML (Extensible Hypertext Markup Language) is an attempt to create a standardized and extensible web language based on XML. XHTML is similar to HTML 4.01 but includes more rigorous coding rules. All pages were validated using a combination of the online W3 mark up validation service at http://validator.w3.org/ and validation features found in HTML editing software. The validation process helped ensure consistency in formatting and made QA easier at the end of the development process.

Overcoming the development challenges
The transition to this new style of website development proved to be more challenging then anticipated. Laying out content without using tables required a new approach to the design process - focusing on page content before design. Setting up the site took much longer in the beginning. During the first month, the Web Developer began adding structure to the basic page elements while disregarding most of the design elements. Only after the framework of the site had been built and tested, were the design embellishments added. The site looked very plain for the first month or two.

In the past, the Art Director would provide the overall design of the site by delivering pages as Photoshop files. The Web Developer would then code the HTML to match the Photoshop design as closely as possible - cutting up the Photoshop assets and reassembling them in an HTML text editor. But in order to take full advantage of CSS, the Web Developer chose not to recreate the exact Photoshop designs in HTML, but instead use it as a starting point for the design process. The Web Developer started with the major content areas of the page - logo, navigation, main body, sidebar, etc. She then placed tags around each element and defined the appearance of these areas in the style sheet. Rather then using <font> tags, as had done in the past, all type styles were defined in the style sheet and therefore globally consistent. Likewise, rather then using <table> tags, the placement, padding, and margins and the content areas were defined in the style sheet.

The Web Developer worked directly with the Art Director to develop the look and feel of the site, while ensuring that CSS was utilized to its full capacity. Both the Art Director and Developer needed to be more flexible and communicate more regularly than on prior projects. The end result of this collaborative process was a site which is both visually appealing and efficiently constructed.

Next: Part 3: Redesign Results                                              View entire article

---