Benefits of Web Standards

1
Benefits of Web Standards

• Daniel M. Frommelt
• University of Wisconsin - Platteville

2
Benefits of Web Standards

• Presentation and documentation are online _at_
• http//www.uwplatt.edu/web/webstandards

3
Benefits of Web Standards

• Concept of Web Standards
• Concept of DIV skeleton structure
• Concept of CSS skins markup
• Reasons to make the switch

4
Web Standards?
Web Standard Basics

• http//www.w3.org

5
So what are Web Standards?
Web Standard Basics

• 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 Recommendations Standards
6
What the heck is XHTML?
Web Standard Basics

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

7
How do I convert to XHTML?
Web Standard Basics

• Declare the DOCTYPE
• Tag and attributes in lower case
• Attributes must have quoted values
• All tags must have an end tag (ltbr /gt)
• Nest tags correctly
• Validate the page (http//validator.w3.org)

8
Any Benefits to XHTML?
Web Standard Basics

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

9
XHTML is the Future
Web Standard Basics

• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.1
• XHTML 2.0 (W3C Working Draft)
• No more development of HTML!

10
Table Design
DIV skeleton structure

• Tables can build a nice layout
• Tables are predictable
• However,
• Tables bloat the code
• Can we eliminate tables?

11
Table Purpose
DIV skeleton structure

• 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.htmlh-11
  .1

12
Alternative Design Method
DIV skeleton structure

• DIVs can be an alternate to lttablegt
• DIVs are a container like a table cell
• CSS can position the DIV
• ltdiv id"article"gtxxxlt/divgt
• article
• width250px
• padding5px
• floatright

13
DIV Design
DIV skeleton structure

• 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

14
DIV Design
DIV skeleton structure

• Identify major sections of the page
• Masthead (Logo and Title)
• Menu
• Content
• Search
• Footer
• Dont overuse the DIVs!
• Dont worry about positioning in the XHTML!

15
(No Transcript)
16
DIV Structure?
Current Topics

• Learning curve of DIV
• Future of browsers is uncertain
• WYSIWYG Editors

17
(No Transcript)
18
Skinning Concept
CSS skinning

• The skin is the design placed over the skeleton
  structure
• Its like a cell phone
• Model of phone is the skeleton
• Face plates are the skins
• You can swap face plates

19
Skinning Concept
CSS skinning

• 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

20
Overview of New Structure
CSS skinning

• 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

21
CSS Zen Garden
CSS Skinning Topics

• The best example showing the power of CSS
  skinning!
• http//www.csszengarden.com
• Web Standards dont have to be ugly!

22
CSS Skinning Topics
23
CSS Skinning Topics
24
CSS Skinning Topics
25
CSS Skinning Topics
26
CSS Skinning Topics
27
How do I build this?
Developing Skins

• Style sheets for a skinnable website
• Base CSS simple structure
• Advanced CSS final structure _at_import
• Skin CSS design/presentation _at_import
• Fonts CSS
• Printer Friendly CSS

28
Why so many CSS files?
Developing Skins

• Setting the stage for forward AND backward
  compatibility
• _at_import - fix non-standard browsers
• Layout CSS separate from Skin
• Fonts can now be adjusted quickly
• Printer Friendly without the hassle!
• Its just too cool! ?

29
(No Transcript)
30
(No Transcript)
31
Emphasis on Information
Reasons to follow Web Standards

• In 1995, Al Gore coined the phrase
• Information Superhighway
• NOT
• Design Superhighway
• http//www.nortropic.com/lis341/cgold/superway.htm
  l

32
Emphasis on Information
Reasons to follow Web Standards

• 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

33
Backward Compatibility
Reasons to follow Web Standards

• Compliant with older browser without having to
  make a separate set of pages
• Design fails gracefully Its not pretty, but
  the information is there!

34
Reasons to follow Web Standards
35
Forward Compatibility
Reasons to follow Web Standards

• 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

36
Reasons to follow Web Standards
37
Reasons to follow Web Standards
38
Bandwidth Savings
Reasons to follow Web Standards

• Using web standards saves on bandwidth
• Code reduction with limited markup provides
  cleaner and simpler code
• CSS files are cached

39
Slashdot Example
Reasons to follow Web Standards

• Slashdot is a well known site
• Copied the index on July 22, 2003
• HTML 3.2 code
• Table driven design

40
Slashdot Example Stages
Reasons to follow Web Standards

• 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

41
Reasons to follow Web Standards
42
Slashdot Bandwidth Savings
Reasons to follow Web Standards

• Actual savings per page
• Without caching CSS 2KB
• With caching CSS 9KB
• Thats not a lot,
• however it adds up!

43
Slashdot Bandwidth Savings
Reasons to follow Web Standards

• Slashdot serves 50 million pages a month, which
  is 18 pages per second.
• (http//slashdot.org/faq/slashmeta.shtmlsm300)
• Savings per day
• Without caching CSS 3.15 GB
• With caching CSS 14.0 GB

44
Personal Bandwidth Story
Reasons to follow Web Standards

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

45
In Conclusion
Web Standards

• Web Standards is a journey
• Not a quick fix, so dont expect it
• Major benefits!
• Forward / Backward compatible
• Bandwidth savings
• Easier transitions for future updates
• Printer Friendly!

46
Dont Panic
Web Standards
47
Personal Speaking Story
Web Standards

• 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

48
Presentation Documentation Info _at_
http//www.uwplatt.edu/web/webstandards
Benefits of Web Standards