CCT8-FROMMELT-PR

Document Sample
CCT8-FROMMELT-PR Powered By Docstoc
					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: 1. Base CSS – simple structure 2. Advanced CSS – final structure @import 3. Skin CSS – design/presentation @import 4. Fonts CSS 5. 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


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:30
posted:8/2/2009
language:English
pages:47