Hide Notes 

Slide 1: Benefits of Web Standards Daniel M. Frommelt University of Wisconsin - Platteville
Slide 2: Benefits of Web Standards Presentation and documentation are online @ http://www.uwplatt.edu/~web/webstandards
Slide 3: Benefits of Web Standards • • • • Concept of Web Standards Concept of DIV “skeleton” structure Concept of CSS “skins” markup Reasons to make the switch
Slide 4: Web Standard Basics “Web Standards?” http://www.w3.org
Slide 5: 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/
Slide 6: 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/
Slide 7: 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)
Slide 8: 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
Slide 9: 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!
Slide 10: DIV “skeleton” structure Table Design • Tables can build a nice layout • Tables are predictable However, • Tables bloat the code • Can we eliminate tables?
Slide 11: 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
Slide 12: 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;}
Slide 13: 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
Slide 14: 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!
Slide 16: Current Topics DIV Structure? • Learning curve of DIV • Future of browsers is uncertain • WYSIWYG Editors
Slide 18: 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
Slide 19: 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
Slide 20: 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
Slide 21: 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!
Slide 22: CSS Skinning Topics
Slide 23: CSS Skinning Topics
Slide 24: CSS Skinning Topics
Slide 25: CSS Skinning Topics
Slide 26: CSS Skinning Topics
Slide 27: 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
Slide 28: 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! 
Slide 31: 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
Slide 32: 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
Slide 33: 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!
Slide 34: Reasons to follow Web Standards
Slide 35: 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
Slide 36: Reasons to follow Web Standards
Slide 37: Reasons to follow Web Standards
Slide 38: 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
Slide 39: 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
Slide 40: 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
Slide 41: Reasons to follow Web Standards
Slide 42: 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!
Slide 43: 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
Slide 44: 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!
Slide 45: 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!
Slide 46: Web Standards “Don’t Panic”
Slide 47: Web Standards Personal Speaking Story • WebDev Share Presenter 2003 • Met Jeffrey Zeldman, A List Apart • Asked to write “Retooling Slashdot” http://www.alistapart.com/articles/slashdot/ Which immediately got “Slashdotted”
Slide 48: Benefits of Web Standards Presentation & Documentation Info @ http://www.uwplatt.edu/~web/webstandards