CSS Benefits of Web Standards

Daniel M. Frommelt
Sean Sieg
University of Wisconsin - Platteville
 CSS Benefits of Web Standards
Presentation and documentation are online @

http://www.uwplatt.edu/~web/webstandards
CSS Benefits of Web Standards
• Concept of Web Standards
• Concept of DIV “skeleton” structure
• Concept of CSS “skins” markup
• Reasons to make the switch
Web Standard Basics

“Web Standards?”

http://www.w3.org
Web Standard Basics

“So what are Web Standards?”

Web Recommendations Standards
• XHTML 1.0 or higher
• CSS Level 1 & CSS Level 2
• DOM Level 1 & DOM Level 2
• ECMAScript 262 (current JavaScript)

http://www.webstandards.org/about/
Web Standard Basics

“What the heck is XHTML?”

“The Extensible HyperText Markup Language
(XHTML™) is a family of current and future
document types and modules that reproduce,
subset, and extend HTML, reformulated in
XML. XHTML Family document types are all
XML-based, and ultimately are designed to
work in conjunction with XML-based user
agents. XHTML is the successor of HTML, and
a series of specifications has been developed
for XHTML.”
http://www.w3.org/MarkUp/
Web Standard Basics

“How do I convert to XHTML?”

• Declare the DOCTYPE
• Tag and attributes in lower case
• Attributes must have quoted values
• All tags must have an end tag (<br />)
• Nest tags correctly
• Validate the page (http://validator.w3.org)
Web Standard Basics

“Any Benefits to XHTML?”

• More Accessible
• Eliminates silly mistakes in code
• Renders more accurately in browsers
• Backward AND forward compatible
• First step toward Web Standards
Web Standard Basics

XHTML is the Future

• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.1
• XHTML 2.0 (W3C Working Draft)

No more development of HTML!

DIV “skeleton” structure

Table Design
• Tables can build a nice layout
• Tables are predictable

However,
• Tables bloat the code
• Can we eliminate tables?
DIV “skeleton” structure

Table Purpose
“Tables should not be used purely as a means to
layout document content as this may present
problems when rendering to non-visual media.
Additionally, when used with graphics, these tables
may force users to scroll horizontally to view a
table designed on a system with a larger display.
To minimize these problems, authors should use
style sheets to control layout rather than
tables.”
http://www.w3.org/TR/html4/struct/tables.html#h-11.1
DIV “skeleton” structure

Alternative Design Method

• DIVs can be an alternate to <table>
• DIVs are a container like a table cell
• CSS can position the DIV
<div id="article">xxx</div>
#article{
width:250px;
padding:5px;
float:right;}
DIV “skeleton” structure

DIV Design
Use DIVs to create the skeleton of the page.
• There should be no display-specific
information in the XHTML
• The Goal: separate the information from
the layout / presentation of the page
• Layout is entirely controlled by CSS
DIV “skeleton” structure

DIV Design
Identify major sections of the page
– Masthead (Logo and Title)
– Menu
– Content
– Search
– Footer
Don’t overuse the DIVs!
Don’t worry about positioning in the XHTML!
Current Topics

DIV Structure?
• Learning curve of DIV

• Future of browsers is uncertain

• WYSIWYG Editors
CSS “skinning”

Skinning Concept
• The skin is the design placed over the
skeleton structure

• It’s like a cell phone

- Model of phone is the skeleton
- Face plates are the skins
- You can swap face plates
CSS “skinning”

Skinning Concept
• Like a cell phone, web pages can have
“face plates” (skins) that are
changeable
• The CSS skins have nothing to do with
the XHTML markup
• External CSS file
• Easily modifiable
• Faster Redesign
CSS “skinning”

Overview of New Structure

• XHTML DIVs are like the parts of the
phone (antenna, buttons, speaker, etc.)

• Layout CSS is like the different models

of phones (where parts are positioned)

• Skin CSS is like the face plates

CSS Skinning Topics

CSS Zen Garden

The best example showing the power of
CSS skinning!

http://www.csszengarden.com

Web Standards don’t have to be ugly!

CSS Skinning Topics
CSS Skinning Topics
CSS Skinning Topics
CSS Skinning Topics
CSS Skinning Topics
Developing Skins

“How do I build this?”

Style sheets for a skinnable website:
• Base CSS – simple structure
• Advanced CSS – final structure @import
• Skin CSS – design/presentation @import
• Fonts CSS
• Printer Friendly CSS
Developing Skins

“Why so many CSS files?”

• Setting the stage for forward AND
backward compatibility
• @import - fix non-standard browsers
• Layout CSS separate from Skin
• Fonts can now be adjusted quickly
• Printer Friendly without the hassle!

It’s just too cool! 

Reasons to follow Web Standards

Emphasis on Information
In 1995, Al Gore coined the phrase:

“Information Superhighway”
NOT
“Design Superhighway”

http://www.nortropic.com/lis341/cgold/superway.html
Reasons to follow Web Standards

Emphasis on Information
• Web is about delivering information
• Design must be secondary
• You cannot control what user agent will
open the page, so you must be ready
• Backward and forward compatibility is
essential
Reasons to follow Web Standards

Backward Compatibility
• Compliant with older browser without
having to make a separate set of pages

• Design fails gracefully – It’s not pretty,

but the information is there!
Reasons to follow Web Standards
Reasons to follow Web Standards

Forward Compatibility
• More compliant user agents get better
designed / presented information

• Not committed to one platform / browser

• Ready for what the future brings

– PDA
– Cell phone
– TV
– Screenreaders
Reasons to follow Web Standards
Reasons to follow Web Standards
Reasons to follow Web Standards

Bandwidth Savings
Using web standards saves on bandwidth
• Code reduction with limited markup
provides cleaner and simpler code
• CSS files are cached
Reasons to follow Web Standards

Slashdot Example
Slashdot is a well known site:
• Copied the index on July 22, 2003
• HTML 3.2 code
• Table driven design
Reasons to follow Web Standards

Slashdot Example Stages

There are four stages (folders):
• Original file as of July 22, 2003
• XHTML with no markup
• Re-structured XHTML – identify data
• Web Standards Version

Additional information and example zip file is online at:

http://www.uwplatt.edu/~web/webstandards/slashdot.html
Reasons to follow Web Standards
Reasons to follow Web Standards

Slashdot Bandwidth Savings

Actual savings per page:
• Without caching CSS: ~2KB
• With caching CSS: ~9KB

That’s not a lot,

however it adds up!
Reasons to follow Web Standards

Slashdot Bandwidth Savings

Slashdot serves 50 million pages a month,
which is ~18 pages per second.
(http://slashdot.org/faq/slashmeta.shtml#sm300)

Savings per day:

• Without caching CSS: ~3.15 GB
• With caching CSS: ~14.0 GB
Reasons to follow Web Standards

Personal Bandwidth Story

Over a year ago… we made the leap.

Saved a few KB, and thought “big deal.”

Network team PANICKED because of

unexpected drop in server load.

Everyone is much happier / wiser now!

Web Standards

In Conclusion

• Web Standards is a journey

• Not a quick fix, so don’t expect it
• Major benefits!
– Forward / Backward compatible
– Bandwidth savings
– Easier transitions for future updates
– Printer Friendly!
Web Standards

“Don’t Panic”
 CSS Benefits of Web Standards

Presentation & Documentation Info @

http://www.uwplatt.edu/~web/webstandards