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 One: Redesign in Theory

BY ILENE SANDLER

Why the gotomedia redesign?
We aimed to deliver a site that bridged the gap between usability, aesthetics and functionality. We also wanted to showcase the work we've completed for our clients - a group of particularly innovative companies providing cutting edge products and services. We were committed to showing how a site could be designed which would display on all types of devices - phone, PDA, computer, etc. - without sacrificing aesthetics. Finally, this was also an opportunity to apply a new standards based site building approach using XHTML and CSS.

Bridging the gap between usability, aesthetics and functionality
gotomedia is first and foremost a design company. At our core, we strive to create beauty and evocative interfaces -- while making practical and usable sites. We know that an effective online experience is derived from both aesthetics and functionality. If a site provides an intuitive and easy experience, it conveys credibility in the company and extends the value proposition of the company almost seamlessly. So with gotomedia.com, as with our clients' sites, we planned on blending usability testing, audience research, branding expertise and visual design. The end goal was to launch a site that delivered on all 3 fronts: a site that was easy to use, aesthetically inspiring, and functionally well designed.

Highlighting gotomedia's work for our clients
gotomedia has continued to evolve as a company by refining our technical, visual, usability and research expertise. Our focus has expanded to provide more global capabilities as well as more education resources such as workshops, training, and a newsletter. However, we were most interested in showing off the work we've accomplished with our clients. We wanted the new portfolio to feature a comprehensive database of projects - searchable by company or type of business. The featured projects would highlight how the designs produced measurable business results for our clients.

Delivering the site content across media
gotomedia has been experimenting with the notion of extending the reach of content to media other than the web. While standards continue to evolve, the web is still the de facto standard. However, instead of considering the web as the end display device, the web can be considered the primarily medium for transfer to multiple devices (watch, PDA or phone). Our goal with the site was to deliver a positive experience across a variety of platforms and eventually across cultural barriers. We aimed to translate content in ways our audiences can use now and in the future. The next phase of web design may not be web design at all - but more about developing fluid ways for people to interact intuitively and appropriately not only to the device they are using but from wherever they are (office, home, in transit, Thailand or Brazil.)

Few design firms currently apply the best practices for both multiplatform considerations as well as top-notch visual design. For gotomedia as a company, we make it a priority to be as immersed in emerging technologies as we are in aesthetics. Complex projects for our high technology clients help push our technical skills in new directions. Designing the gotomedia site so that it was truly cross medium provided an opportunity to showcase those skills.

Part Two: Redesign in Practice

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.

Part Three: Redesign Results

We were thrilled the first time we viewed the gotomedia site on a phone. By choosing to build the site using XHTML and CSS, we had not only created a site with cleaner, more logical markup, but we also created a site that could be easily transferred to new technologies. More than anything else, it was fulfilling to know that we, as a team, had transitioned into a new development mode that would allow infinite new possibilities. To summarize the advantages of the new approach:

• Flexibility. Because the content of the site is separate from its layout and design, a new look and feel can be easily applied to the site by simply changing the style sheet. We will continue to experiment with design and formatting for display on new devices.
• Platform neutrality. There are virtually no problems viewing the site on a PDA, phone or different web browsers. The site in older versions of Netscape, while shockingly simple, is fully navigational and comprehensible. And no matter how small the device, the content of the site will resize to fit since there are no tables or images to break the layout.
• Minimizing QA costs. By using only CSS and no tables, we were forced from the beginning to apply styles consistently to all content. Because the pages were uniformly structured and the content consistently formatted, the time and expense of QA was greatly reduced.
• Accessibility. The new web pages are more accessible then traditional HTML pages and comply with all U.S. laws and accessibility guidelines.

Applying lessons learned on client projects
gotomedia's clients are not just asking us to develop their sites in the new way, they are requiring it. CSS, XHTML, and database driven sites are the present and future of the web. And while the web seems to be migrating in 2 opposite directions 1) high bandwidth for the entertainment and gaming worlds and 2) low bandwidth (less than 10 seconds and 200 pixels) for wireless devices -- we need to understand the differences and design appropriate solutions for all media delivery. As a consulting firm, we need to demonstrate to our clients all the cross delivery possibilities. We know this is the smartest way to create new business on the web -- with content that is fully accessible wherever and however people want it.

Recommendations for getting up to speed on cross platform design and development

• Read. Keep up-to-date with CSS developments by reviewing websites and books by Eric Meyers and Doug Bowman. Also, www.alistapart.com, www.adaptivepath.com and www.csszengarden.com have excellent CSS information and coding examples.
• Experiment. Study sites and do exercises using CSS and XHTML.
• Get involved. Join your local Web Development community and attend workshops, seminars, and monthly meetings.