Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Fri

30

AUG

2002

Friday Feast #21: Keeping it Simple

Peter-Paul Koch’s new article for Digital Web is about simple web design. His example is a site he built with 17 frames and tons of JavaScript during the version 3 and 4 generation browser time frame. And by the way, the site wouldn’t work at all without JavaScript, and he needed to use that many frames for consistency cross-browser and cross-platform in those days. Read how his thinking evolved from that to a simpler, more effective approach for the same site with today’s generation browsers.

In a similar light, I wrote a chapter for a DHTML textbook that taught students how to force visitors to view their sites with at least 2 frames (using JavaScript), how to use frames and JavaScript to create collapsible windows, how to create chromeless popup windows, and other bells and whistles. That was what the market was demanding, though, and the publisher needed to cater to the market. While I tried to create practical examples and also wrote about how to create such things with accessibility in mind, I suspected these tricks wouldn’t always be used in practical ways or with the few extra bits of markup to make framed sites accessible to visitors regardless of support for frames and with or without JavaScript capabilities.

I remember the days of priding ourselves on being able to produce a site that looked identical regardless of the browser or platform. Clients expected that, and we expected that despite all their proprietary markup and the vast differences in how browsers interpreted and rendered W3C Recommendations.

In contrast, here’s part of a note I wrote this past week regarding a new site I’m designing/developing[1] as a subcontractor for an SEO expert colleague and friend:

“Regarding the design and development, I’ve designed this site to be forward-thinking and to be standards-compliant. What that means is that it will work beautifully right now, will continue to work well in next generation browsers, will still work in older browsers, and will be accessible to alternative devices. This approach works in tandem with good search engine access too, as you know, of course.

“The site will NOT look identical in every browser, but it will still look good in every major browser, and it will be accessible in a wide range of browsers and alternative devices. I don’t know if the target market will even use Netscape 4 browsers anymore since those numbers have dropped drastically (it’s over 5 years old now!), typically from 1%-5% from all the stats I’ve seen. The site will still look OK and work fine in that browser, though, although it won’t look as good as it does in version 5,6,7 standards-oriented browsers.”

This is truly a practical approach that’s cost-effective, works well, and has many advantages. The client is happy as she likes the design and will appreciate the money savings with its easy-to-manage maintenance, changes, flexibility, and not having to pay to have the design fixed when the next generation browsers appear. My SEO colleague is happy because of how accessible this approach is to search engines, which the client will also appreciate, of course. I’m happy being able to create a site that’s forward-thinking and using XHTML 1.0 and CSS 2, widely accessible, more flexible with its content separate from its structure, and will be simple to maintain (even more so using SSI). It’s also a simple matter to add media-specific style sheets at any time, too, such as a print style sheet that I’ll finish next week. [2]

Since the content is separated from its presentation, redesigning the site later will also be easier. It could dramatically change visually just by changing the style sheets. Chris Casciano provided a fantastic example of this with his Daily CSS Fun project in which he provided 20 different style sheets for his weblog, totally changing the appearance and layout just with the style sheet. This approach really can work with professional sites for clients, not just for personal sites.

Why did I change my approach and my entire philosophy in the first place? There were many reasons and influences that over time slowly shifted my perceptions and understanding. Here’s an overview:

  1. I’ve always maintained an attitude and approach of being open and flexible to new ideas, watching what’s ahead, looking at the big picture, and wanting to be prepared for what’s coming around the corner in addition to maximizing what’s available today. Forward-thinking design happens to fit that beautifully, naturally.
  2. I devote time every week to continuing education, so my knowledge is always growing. By staying open and continually learning, my design approach has gradually shifted with W3C’s latest recommendations, browser changes, influence from colleagues whose work I admire and respect, and overall trends. I didn’t just wake up one morning and decide on a new approach.

    Even sites I built 3 months ago may not be approached in the same way that I’m designing sites today, as I continue to learn and grow, constantly seeking to improve.
  3. I’ve always tried to watch where we’re headed in addition to trying to create quality sites. In addition to insight gained from working more closely with programmers on sites, learning CSS provided one of the first major shifts in my thinking to separating content from its presentation long ago.

    As I started learning how to use CSS effectively, creating a style sheet to handle fonts and links for an entire site was a simple but powerful introduction. I began experiencing the advantages of separation of content from its presentation. At that time version 4 browsers were far too wishy-washy in their support for much beyond that, including CSS-P (positioning), but the time it took for browser makers to catch on to standards gave me an opportunity to explore possibilities with CSS. I gradually implemented more as the browsers improved their support and became more standards-oriented.

    I didn’t dive right into multi-column layouts done solely with CSS. Even now with version 6 and 7 browsers multi-column layouts that work well cross-browser and cross-platform can be tricky but lots easier thanks to those who’ve provided freely available cross-browser, cross-platform templates.
  4. As I was taking on projects to redesign sites after the first wave of everyone getting online a few years ago now, I was quickly becoming tired of the complexity involved in extracting the content from nested table cells. I finally vowed to create new designs in which the content of a page could be within one table cell as much as possible to make it easier to maintain and update, to provide greater accessibility, and to allow even my clients to update their content easily themselves. This would also make it easier to redesign the site at some future point.

    That approach ended up being what I’ve called my transitional bridge approach, an approach that can even work in older browsers while separating content from presentation far more and providing better accessibility and easier cross-platform availability, whether a web browser, a PDA, or other device. My idea with this approach is to also be able to quickly adapt the content to a design that more completely separates content from presentation in the near future. Brainstorms and Raves was designed with that approach in mind, for example.

Where do I stand today? My desire is to continue to create with simplicity in mind by building forward-compatible, standards-compliant, user-friendly, accessible sites that separate the content from presentation as much as possible. Tables for formatting can still be necessary for some formatting at this point, which is why I came up with the transitional bridge approach I mentioned above; however, it’s indeed possible and practical to use CSS for more formatting than many people realize. For example, for the new client site design above I used a table to hold the top masthead layout combined with CSS 2 for most of its visual appearance and layout, while the rest of the page layout is handled entirely with CSS 2. Another new site I’m also building right now relies solely on CSS 2 for all formatting without using any tables. Different designs, different needs.

When I work on a new design concept, I now approach it with CSS 2 in mind from the start. If you design a site from a tables-based layout concept it may not be as easy or even possible to pull off using CSS for the layout. So the shift in my thinking to a CSS-layout approach impacts the initial design concept brainstorming, not just later during the site development.

If you have a client who’s being stubbornly insistent upon his/her/their new site looking absolutely identical regardless of the browser, the client will need to understand also that they’re paying a hefty price in many ways. As I’ve mentioned before, there are so many advantages to creating standards-compliant, widely accessible sites that separate content from presentation as much as possible. To date when I’ve explained these issues to new or existing clients, I’ve not yet had one tell me not to go with this approach, and we move forward enthusiastically. Maybe I’ve just been lucky but I don’t think so. My perception is that helping them understand the advantages and disadvantages to various approaches makes all the difference.

The concept of simplicity is a good one.

More

Friday Feast archives

1 While I can’t make the test site URL publicly available, if you wish to see the above site, send me an email promising you won’t disclose the URL and I’ll let you see the site right now. I won’t be at my computer much during the next few days for the holiday weekend, but I’ll get back to you as soon as I can. In the meantime, here’s another site I’m building with a similar approach: TBI Resources. Warning—it’s under construction. Cross-browser, cross-platform feedback welcome, of course.

2 Eric Meyer has a terrific tutorial on print style sheets at ALA.

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

 More Eric Meyer on CSS, by Eric Meyer. Published by New Riders, 2004. 

Build Your Own Web Site the Right Way Using HTML & CSS, by Ian Lloyd. SitePoint (May 2, 2006) 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2002/08/30/friday_feast_21_keeping_it_simple/
Page last modified 14 July, 2007 - 10:21pm PDT Page load time: 0.010103 seconds.