Peter: I've cc'ed this back to the list
in case anyone else was curious, too.
On Sat, 22 Nov 2003, Peter N Lewis wrote:
> How do you do page layouts without tables?
Check out ESPN <http://espn.go.com/> or Wired <http://wired.com>. Both of
them have done high profile site redesigns in the past year or so, where
everything is now based on XHTML and CSS. Both published case studies in
the weeks after the switchover, and have been discussed extensively in web
standards & design circles:
Links discussing the Wired redesign:
�
http://www.wired.com/news/culture/0,1284,55675,00.html
http://www.wired.com/news/explanation.html
http://devedge.netscape.com/viewsource/2002/wired-interview/
http://www.zeldman.com/daily/1002a.html#wiredmorning
An excerpt from that last link:
Four additional points about the Wired redesign are worth
making:
� 1. The site's builders have written a rationale
explaining why they did what they did and positioning the
new standards-compliant Wired design vis-a-vis W3C specs and
browser history. [link is above --cd]
2. Behind the scenes, the builders are addressing many of
the technological issues that stood in the way of validation
when the site launched late last night.
� 3. Following in the footsteps of A List Apart and many
other indie sites last year, Wired's CSS/XHTML redesign makes
content accessible to all browsers and devices (including
screen readers) but hides its layout from old browsers that
weren't built to support the CSS spec.
� 4. Users of these old browsers are informed about newer, more
compliant ones (screenshot) and encouraged to give them a trial
download. Wired supports the WaSP's Browser Upgrade Campaign.
Links discussing the ESPN redesign:
http://devedge.netscape.com/viewsource/2003/espn-interview/01/
http://devedge.netscape.com/viewsource/2003/espn-interview/02/
http://www.zeldman.com/daily/0203b.shtml#espn
Here's a blurb from the Netscape Devedge article:
ESPN.com, the online sister of the ESPN cable networks, serves up
more than half a billionpage views every month, so when the home
page of the site dropped all layout tables in favor of structural
markup and CSS-driven layout, the Web design community took notice.
And quoting Zeldman again:
ESPN.com has redesigned using CSS layout. For now, the
retooling is limited to the front page. Once it's been
fine-tuned, the approach will work its way into the rest of
the vast site. Though the site has problems that will likely
be fixed in the coming weeks, here's what art director Mike
Davidson and his team got right:
* All CSS positioning. No tables for layout except in sponsored
Microsoft elements beyond the design team's control.
* No font tags.
* Bandwidth, bandwidth, bandwidth. Front page markup and code
are now half the size they were before the relaunch while
displaying a much richer page. (With structural markup,
the bandwidth savings would be even greater.)
* Only one style sheet for all browsers -- no detection
used or needed. The site looks more or less identical in
all browsers that support getElementById (including Safari),
though Linux rendering may be unattractive.
Visitors using non-standards-compliant browsers (fewer than
2% of ESPN's audience, we're told) are bumped to an upgrade
page. If they choose not to download a conformant browser,
they can view a "light" version of the site. This old,
WaSP-inspired technique is not to everyone's taste, but it
may be appropriate given the site's emphasis on scripting
and rich media. The approach will be more justifiable once
the team has ironed out validation issues, some (but not all)
of which are due to third party content.
Here's a wiki with other commercial sites that have gone to a CSS/XHTML
layout: <http://www.maccaws.org/wiki/index.php?page=StandardsSites>.
Samples include Cingular Wireless (a big American mobile phone company),
the PGA (professional golf association), Fast Company, Lycos Europe, Fox
Searchlight Pictures, HotBot,
Additionally, if you've ever played around with the Movable Type weblog
software, it emits XHTML that is laid out entirely by CSS -- switch out
the stylesheet, and you can radically change the appearance of the page.
(I have fun with this on my blog by using a cron job to rotate the default
style sheet a few times an hour, so the page layout is different for most
page views :).
Not everyone is convinced that this CSS kool aid is good for you though:
<http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx>
But the person behind that page seems to be deeply in the minority
opinion.
This kind of forward looking XHTML/CSS layout seems to be getting very
popular & viable now -- check out the source code & stylesheet for some of
these sites for ideas, or browse some of the blogs of these designers
(Jeffrey Zeldman et al) for ideas. I'm not up to speed with all the
current design techniques (and my copy of the O'Reilly CSS book is
probably getting a bit out of date now), but it can definitely be done.
--
Chris Devers
