Benefits of Web Standards Daniel M Frommelt University

  • Slides: 48
Download presentation
Benefits of Web Standards Daniel M. Frommelt University of Wisconsin - Platteville Copyright Daniel

Benefits of Web Standards Daniel M. Frommelt University of Wisconsin - Platteville Copyright Daniel M. Frommelt, 2004. This work is the intellectual property of the author. Permission is granted for this material to be shared for non-commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is by permission of the author. To disseminate otherwise or to republish requires written permission from the author.

Benefits of Web Standards Presentation and documentation are online @ http: //www. uwplatt. edu/~web/webstandards

Benefits of Web Standards Presentation and documentation are online @ http: //www. uwplatt. edu/~web/webstandards

Benefits of Web Standards • • Concept of Web Standards Concept of DIV “skeleton”

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. w 3. org

Web Standard Basics “Web Standards? ” http: //www. w 3. org

Web Standard Basics “So what are Web Standards? ” Web Recommendations Standards • XHTML

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 Java. Script) http: //www. webstandards. org/about/

Web Standard Basics “What the heck is XHTML? ” “The Extensible Hyper. Text Markup

Web Standard Basics “What the heck is XHTML? ” “The Extensible Hyper. Text 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. w 3. org/Mark. Up/

Web Standard Basics “How do I convert to XHTML? ” • Declare the DOCTYPE

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 ( ) Nest tags correctly Validate the page (http: //validator. w 3. org)

Web Standard Basics “Any Benefits to XHTML? ” • • • More Accessible Eliminates

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

Web Standard Basics XHTML is the Future • • XHTML 1. 0 Transitional XHTML 1. 0 Strict XHTML 1. 1 XHTML 2. 0 (W 3 C Working Draft) No more development of HTML!

DIV “skeleton” structure Table Design • Tables can build a nice layout • Tables

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

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. w 3. org/TR/html 4/struct/tables. html#h-11. 1

DIV “skeleton” structure Alternative Design Method • DIVs can be an alternate to <table>

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: 250 px; padding: 5 px; float: right; }

DIV “skeleton” structure DIV Design Use DIVs to create the skeleton of the page.

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

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

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

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

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

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

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

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:

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

Developing Skins “Why so many CSS files? ” • • • Setting the stage 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

Reasons to follow Web Standards Emphasis on Information In 1995, Al Gore coined the phrase: “Information Superhighway” NOT “Design Superhighway” http: //www. nortropic. com/lis 341/cgold/superway. html

Reasons to follow Web Standards Emphasis on Information • Web is about delivering information

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

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

Reasons to follow Web Standards Forward Compatibility • More compliant user agents get better

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

Reasons to follow Web Standards

Reasons to follow Web Standards Bandwidth Savings Using web standards saves on bandwidth •

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: •

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): •

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

Reasons to follow Web Standards Slashdot Bandwidth Savings Actual savings per page: • Without

Reasons to follow Web Standards Slashdot Bandwidth Savings Actual savings per page: • Without caching CSS: ~2 KB • With caching CSS: ~9 KB That’s not a lot, however it adds up!

Reasons to follow Web Standards Slashdot Bandwidth Savings Slashdot serves 50 million pages a

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#sm 300) 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

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

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”

Web Standards “Don’t Panic”

Web Standards Personal Speaking Story • Web. Dev Share Presenter 2003 • Met Jeffrey

Web Standards Personal Speaking Story • Web. Dev Share Presenter 2003 • Met Jeffrey Zeldman, A List Apart • Asked to write “Retooling Slashdot” http: //www. alistapart. com/articles/slashdot/ Which immediately got “Slashdotted”

Benefits of Web Standards Presentation & Documentation Info @ http: //www. uwplatt. edu/~web/webstandards Copyright

Benefits of Web Standards Presentation & Documentation Info @ http: //www. uwplatt. edu/~web/webstandards Copyright Daniel M. Frommelt, 2004. This work is the intellectual property of the author. Permission is granted for this material to be shared for non-commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is by permission of the author. To disseminate otherwise or to republish requires written permission from the author.