Importance of Web Standards

1
Importance of Web Standards
EliteX 2007
V.N. Shukla CDAC, Noida Manager, W3C India Office
2
Web Standards ?
"Web standards are intended to be a common
base... a foundation for the world wide web so
that browsers and other software understand the
same basic vocabulary". Eric Meyer
The W3C (World Wide Web Consortium) and other
standards bodies have been working to develop
these standards for World Wide Web
3
Who develops Standards

• The World Wide Web Consortium (W3C )Develops Web
  Standards and Guidelines
• Several other organizations also contribute Web
  standards, such as
• International Organization for Standardization,
• Internet Engineering Task Force,
• Ecma International,
• Unicode Consortium,
• and many others

4
Need for Standards

• Web is about delivering information
• Design must be secondary
• Developer has no control whatsoever regarding the
  browser used by user to visit website, so it
  should be compliant
• Backward and forward compatibility

5
Web Standards Objectives

• To take the benefits of web to everyone who is
  web user
• To ensure the long-term viability of any web
  document
• To Simplify the process of writing Code and lower
  down the production time
• Provide the foundation for accessibility
• Future-proof content (with evolution of new
  browser, devices )

• For developers Web Standards means using
  standards (Structural, presentational, Object and
  Scripting languages) and best practices (valid,
  semantic and accessible code) to benefit users,
  clients and themselves.

6
Website development Traditional vs Standard
approach
Traditional Approach Standard Approach
an extension of the printed media - designed to make sites look pixel-perfect in the popular browsers Designed for compliance with wide variety of browsers devices
Table-based layouts Layout as per standards
Presentation embedded with the content (font tags) Cascading Style Sheets (CSS) to separate content from presentation
code may be Invalid Valid code
Site may be Inaccessible Accessible code (for humans and devices)
code may not be correct Semantically Semantically correct markup
7
Semantically correct markup

• Semantically correct markup uses html elements
  for their given purpose. Well structured HTML has
  semantic meaning for a wide range of user agents
  (browsers without style sheets, text browsers,
  PDAs, search engines etc.)
• Always use standard HTML elements for markup and
  avoid styling HTML elements to look like other
  HTML elements.
• for headings, use heading elements starting with
  H1
• for paragraphs of text, use a paragraph element
• for lists, use a list elements

8
Code Validation?

• Validation is a process of checking your
  documents against a formal standard, like those
  published by the W3C. A document that has been
  checked and passed is considered valid.
• Advantages of Validation
• Valid code renders faster
• Valid code renders better
• As browsers are becoming more standards
  compliant, it becomes even more
• necessary to write valid and standards compliant
  HTML

9
Code Validation?
Web site validators MarkUp Validator (HTML
validator) for Web documents in formats like HTML
and XHTML, SVG or MathML. Link Checker - Checks
anchors (hyperlinks) in a HTML/XHTML document.
CSS Validator - validates CSS stylesheets or
documents using CSS stylesheets. Semantic
Extractor - Sees a Web page from a semantic point
of view. Extracts such information as outline,
description, languages used, etc. RDF Validator
- Checks and Visualize RDF documents Feed
Validator. - Checks newsfeeds in formats like
ATOM and RSS. XML Schema Validator
10
Writing Valid Code

• Choose the right doctype
• Use a character set
• Close all HTML elements
• Mark images with alt tags
• Pass through HTML validators regularly
• Fix bugs before uploading
• Make validation part of your normal work process

11
Accessible code?

• For making the website accessible to a larger
  group( under privileged people)
• Allows website to be accessed by wider range of
  devices (hand helds, screen readers, text
  browsers, search engines)
• Is a requirement for Federal and State Government
  sites
• How to make your code accessible?
• Provide text equivalents for non-text elements
• Use accessible data tables (identify row and
  column headers)
• Use accessible forms (label for, id, fieldset,
  legend)
• Use markup rather than images to convey
  information.
• Provide visible skip menus
• Provide access keys
• Use style sheets with relative units to control
  layout and presentation
• Make sure documents can be read without style
  sheets
• Provide metadata to add semantic information

12
Separate content from presentation?

• Use CSS to remove all presentation from the html
  code, leaving it clean and semantically correct.
• To make the content accessible to a wider variety
  of devices
• Change CSS to reflect changes in entire website
• Leads to less code on the page resulting in
  faster download
• Makes the code easy to maintain
• Provide the facility to user to customize the
  style of content as per their need
• Helps in tight control over code for variety of
  delivery mechanisms

13
Benefit from Web Standards for Users?

• Faster download (validated less code)
• Bandwidth savings
• Accessibility for wider range of users (including
  under privileged users)
• Accessible through wider range of devices (screen
  readers, browsers, text based browsers, mobile
  devices, PDA, handheld devices etc)
• Customized site appearance
• Providing print friendly versions for website
  content
• More compliant user agents get better designed /
  presented information
• Not restricted to any platform or browser

14
Benefit from Web Standards Developer?

• Code is Easy to maintain (lesser modular code)
  
• Size is minimum (Less hosting costs)
• Improved search engine ranking
• Rearranging Content without changing code
• Forward / Backward compatible
• Easier transition path for future updation
• Facilitating users for their needs for
  customization
• Provides print versions without replicating
  content
• Improves accessibility (essential for Government
  websites)
• Provides a competitive edge over others who dont
  follow standards
• Website Compliant with previous versions of
  browser without having to make a separate set of
  pages
• Even if the design fails it provides some
  information
• Improved User Experience
• Reduced dependency on any one developer

15
Challenges

• Efforts are required to learn developing Standard
  compliant websites
• Browser compatibility issues
• Making Standard Compliant Websites take more time
  for development

16
Moving towards Web Standards Process

• Aim and slowly move towards Web Standards-based
  sites.
• For developers the move from traditional to Web
  Standards based development takes time and
  practice.
• Basic process
• Add a correct doctype to all pages
• Add alt text to all images
• Add meaningful page titles
• Intermediate process
• Validate the code
• Write Semantically correct code
• Replace embedded font tags and inline colour
  attributes with CSS
• Make accessible forms
• Advanced process
• Basic positioning with CSS (padding, margins etc)
  while using overall table for layout
• full positioning with CSS - no tables for layout

17
Glimpse of difficulties if standards are not
supported
Glimpse of difficulties if standards are not
supported
18
Glimpse of difficulties if standards are not
supported
Sample of website on mobile
Source
http//shop.my-symbian.com/PlatformProductDetail.j
sp?siteId695jidBF481XEF71E7DEC618245A7F63A14C24
platformId 4productType2catalog0ampsection
Id0productId197730
19
Conclusion

• Web Standards make Websites accessible to anyone
  on any device using any browser
• Everyone gets benefited from Web Standards
• Moving towards Web Standards is a journey
• There is no shortcut to success, only requirement
  is time practice

20
References
http//W3.org http//www.maxdesign.com.au/presenta
tion
21
(No Transcript)