The Netscape DevEdge team undertook a massive redesign in a relatively short timeframe to show how advanced CSS and XML can help web developers worldwide in their quest to create cross-browser sites based on W3C web standards. The redesigned site aims to demonstrate, among other things:
Although this is a move the team has debated on and off for some time, we were very definitely inspired by the work that Douglas Bowman did for wired.com's October 2002 redesign. (You can get more information from our interview with Douglas.) In some ways, what we're doing here is an attempt to have our developer site be a cutting-edge example of what can (and can't) be done with clean markup and CSS-driven layout.
When we set out to take this step, we had some basic goals in mind. These were:
At this stage, we have achieved four of our six goals, and almost hit five. The two we missed were using XHTML 1.0 Transitional, and the page weight reduction.
Why aren't we using XHTML? Mostly because some of our older content was authored under HTML 4.x, and the effort of converting it was judged to be not worth the payoff. We instead decided to go with HTML 4.01 Transitional. Note that as of the redesigned site's launch, not all of our pages validate, thanks largely to the aforementioned legacy content. We plan to clean those up over time, and eventually have a site that validates from front to back.
The page weight reduction goal was very ambitious, and while we came close to cutting down our markup weight, we didn't quite make half. This was partly because we had relatively lean markup for our previous design; even though it used tables for layout, they were simple tables that we'd stripped down as far as we could. If you look strictly at the "templated" markup-- that is, the markup that appears on every page-- we would have hit a 50% reduction if we hadn't made our navigation so much more comprehensive. But more on that in a moment.
Here are a few of the new features you can try out:
To show how easily sites can offer a user-controlled look and feel, we decided to employ a "style switcher" that would let users pick one of four themes for DevEdge, and also let them change the default text size for the site. The basic JavaScript code to do this is based on Paul Sowden's switching script, but incorporates a number of custom changes. We considered a more complex customization tool that would let users define their own arbitrary color sets for various interface elements, but in the end decided to keep things relatively simple. The advanced customization feature may be implemented at a later date.
When you pick a theme, your preference is saved in a cookie called nde-style. It would be about as easy to have a stylesheet for each section of a site, thus allowing for area-specific themes. It's also possible to have stylesheets that completely rearrange the site layout to a user's preference.
The same basic mechanism is used to remember the text size setting, except the cookie in this cae is called nde-textsize.
It's easy to tout the benefits of cross-browser menus, but it wasn't until we began coding with advanced CSS techniques that we really felt the pain of needing to support less standards-compliant browsers. We went back and forth over using "pure CSS" menus versus more traditional Javascript-driven menus. In the end, the DevEdge team combined advanced CSS with JavaScript to create menus that drop down beautifully in the multiple browsers based on Netscape Gecko, as well as Internet Explorer and Opera.
Best of all, the menu markup is based on nested unordered lists, which keeps the markup light and structured for non-visual browsers and alternative devices like cellphones or palm-computing browsers. In doing this, the DevEdge team drew inspiration from the "pure CSS menus" demo at css/edge and the DHTML menus available at gazingus.org, although we took our own approach to the implementation. This allowed us to create easily restylable menus that worked in multiple browsers using fairly lightweight Javascript. Even better, the CSS and JavaScript are set up so that if JavaScript is disabled, then menus will still work in CSS2-conformant browsers. Learn from our experiences and see how your site could benefit from re-using this code.
A driving force in the redesign effort was making DevEdge's content even more accessible than it had been in its previous incarnation. In order to make this possible, the design team decided from the beginning that the site would be laid out using CSS positioning. This allowed the documents to be structured in a way that makes sense for linear-access devices (such as screen readers) while still permitting visually rich design.
For example, in modern browsers, the "Search" and "Customize" boxes are right next to each other. If you look at the document source itself, the "Search" area is part of the site's masthead and appears near the beginning of the document, while the "Customize" area is actually the last thing before the page footer. In a similar fashion, the navigation bar that runs just underneath the site masthead actually appears after the page content in the document's source.
Because the appearance of the site is almost entirely divorced from the source order of the content, DevEdge is now far more friendly to wireless and other 'alternative' browsers that don't use CSS. Furthermore, the entire layout of the site can be rearranged without changing the underlying markup in the slightest-- thus preserving the accessibility benefits no matter what styles are used to create the site's visual appearance.
Additionally, print-friendly stylesheets are automatically applied when printing articles, as an experiment in simplifying the user experience. In print, hyperlinks within body text have the URL printed just after the link text, thus making the links less useless in print.
The redesign comes with a host of less visible improvements, including:
Although these changes don't have much direct impact on the visitor experience, they do make it much easier for the DevEdge team to keep the site running smoothly and make the information we provide more diverse and useful to visitors.
Theoretically, any web browser at all can access DevEdge. In visual terms, however, DevEdge employs techniques that work in today's more standards-compliant browsers. In any user agent, the site's content should be completely available for your perusal. The site's CSS layout has been constructed such that the following browsers and platforms are known to take advantage of the site's advanced features.
Preferences: You'll need to enable cookies and JavaScript to experience the full effect of various features, particularly the site themes. Without JavaScript enabled, you can still navigate using the section index pages and CSS menus which work in Netscape 7+ and Mozilla 1+.
Caveat: Due to known browser bugs or incomplete W3C CSS or DOM standards compliance in these and other browsers, you may encounter minor issues. In addition to wanting to feature modern standards, we decided not to optimize for Netscape 4.x simply because we've seen a dramatic downturn of visitors using 4.x, thanks to the popularity of Netscape 7.x. Netscape 4.x users will still receive the content of the site, but not its styling.
Give us your feedback if you find the site works well on platforms/browsers not listed here, or any suggested code fixes that will improve its cross-browser behavior.
Learn more about the CSS and JavaScript code underlying Netscape DevEdge, as well as our decision making process while constructing the site.