Netscape DevEdge Redesigns As Standards Showcase
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:
- Various cross-browser standards-based layout and design techniques
- The accessibility advantages of standards-based site design
- How easily you can create an engaging user-controlled experience
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.
Benefits To Visitors
- Accessible content: Text and ordering is friendly to screen readers, handheld devices, and other 'alternative' user agents.
- High performance: Faster, lighter pages free of clunky tables and markup improve the user experience.
- Customizable: Visitors can pick whichever design and text size makes them happiest while perusing DevEdge.
When we set out to take this step, we had some basic goals in mind. These were:
- Site driven by XHTML 1.0 Transitional and CSS to confer fast page downloads and accessible content
- Simple markup to allow for rapid changes to templates
- Drop average page weight by 25%
- Allow centralized control over layout and appearance
- Accomplish page layout with simple CSS positioning
- Vastly increase accessibility without special coding or user agent detection
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.
Key Demo-able Features
Here are a few of the new features you can try out:
Demo 1: User-Selectable Styles
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
How to try it:
- Mouse over Customize and select your favorite theme.
- Click the + and - to resize the text, and R to reset it to the original size.
Demo 2: Cross-Browser DHTML Menus
How to try it:
- Mouse over the top navigational menus with Netscape 7, IE 5.5+, and Opera 7+.
Demo 3: Structuring for Accessibility and Usability
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.
How to try it:
- View source code of any page.
- Verify accessibility with the WAVE Web Accessibility Validator.
- Also, try saving a page to your harddrive. You'll see it renders all text in a way that makes navigation easy for various types of readers. This can also be seen in browsers that allow you to disable stylesheets, or in those browsers that don't understand CSS.
- Print an article to see the printer friendly stylesheet and printed URL paths.
More Features and Benefits
The redesign comes with a host of less visible improvements, including:
- Automatically-generated RSS data feeds: Now we can syndicate news to our new DevEdge Sidebar Tabs and external newsfeeds.
- Automated PDF creation: We can automatically generate PDF versions of our articles by transforming the base XML file into the Acrobat file format.
- Easier, more flexible design process: The design can change easily as CSS allows separation of presentation from structure. We could just as easily offer wildly different layouts as thematic variations on a single layout. Some examples of this sort of complete restyling include the standards blog at nitot.com, the journal at adactio.com, and the search engine alltheweb.com.
- Content reusability: Ready for non-PC devices thanks to the tableless structure. All visitors get exactly the same markup.
- Localizability: Easy to add new international sections by hooking content to language-specific templates and CSS.
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.
Browser Compatibility Notes
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.
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.
- Visual layout browser compatibility:
- Netscape 6+ (any platform)
- Mozilla 0.8+ (any platform)
- Internet Explorer 5.5+ (Windows)
- Internet Explorer 5.0+ (Macintosh)
- Opera 6+ (Windows)
- Netscape 7+ (any platform)
- Mozilla 1.0+ (any platform)
- Internet Explorer 5.5+ (Windows)
- Opera 7+ (Windows)
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.