Lean And Clean! Building A Site With Web Standards

1,010 views

Published on

source:
http://www.maxdesign.com.au/presentation/sit2003/index.htm
maker:
http://webclassroom.wordpress.com

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,010
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lean And Clean! Building A Site With Web Standards

  1. 1. Lean and clean! Building a site with web standards <ul><li>1. What are web standards? </li></ul><ul><ul><ul><li>&quot;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 &quot;. Eric Meyer </li></ul></ul></ul><ul><ul><li>Who sets the webstandards? </li></ul></ul><ul><ul><ul><li>The World Wide Web Consortium (W3C) and other standards bodies have established technologies for creating and interpreting web-based content. These 'web standards' are carefully designed to: </li></ul></ul></ul><ul><ul><ul><li>deliver the greatest benefits to the greatest number of web users </li></ul></ul></ul><ul><ul><ul><li>ensure the long-term viability of any web document </li></ul></ul></ul><ul><ul><ul><li>simplify code and lower the cost of production </li></ul></ul></ul><ul><ul><ul><li>deliver sites that are accessible to more people and more types of Internet devices </li></ul></ul></ul><ul><ul><ul><li>continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market </li></ul></ul></ul>
  2. 2. Lean and clean! Building a site with web standards <ul><li>2. The web standards </li></ul><ul><ul><ul><li>Structural Languages </li></ul></ul></ul><ul><ul><ul><ul><li>Extensible Hypertext Markup Language (XHTML) 1.0 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>XHTML 1.1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Extensible Markup Language (XML) 1.0 </li></ul></ul></ul></ul><ul><ul><ul><li>Presentation Languages </li></ul></ul></ul><ul><ul><ul><ul><li>Cascading Style Sheets (CSS) Level 1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CSS Level 2 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CSS Level 3 </li></ul></ul></ul></ul><ul><ul><ul><li>Object Models </li></ul></ul></ul><ul><ul><ul><ul><li>Document Object Model (DOM) Level 1 (Core) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>DOM Level 2 </li></ul></ul></ul></ul><ul><ul><ul><li>Scripting Languages </li></ul></ul></ul><ul><ul><ul><ul><li>ECMAScript 262 (the standard version of JavaScript) </li></ul></ul></ul></ul><ul><ul><ul><li>Additional Presentation Languages (Markup) </li></ul></ul></ul><ul><ul><ul><ul><li>Mathematical Markup Language (MathML) 1.01 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>MathML 2.0 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Scalable Vector Graphics (SVG) 1.0 </li></ul></ul></ul></ul>
  3. 3. Lean and clean! Building a site with web standards <ul><li>3. What are the benefits of using web standards? </li></ul><ul><ul><li>Benefits for you: </li></ul></ul><ul><ul><ul><li>Less code means sites are easier to maintain </li></ul></ul></ul><ul><ul><ul><li>Less browser specific coding - compatible with current browsers </li></ul></ul></ul><ul><ul><ul><li>Less revisiting of old sites - compatible with future browsers </li></ul></ul></ul><ul><ul><li>Benefits for your audience: </li></ul></ul><ul><ul><ul><li>Less code means sites are faster downloads </li></ul></ul></ul><ul><ul><ul><li>More accessible - will work in a wider variety of user agents </li></ul></ul></ul>
  4. 4. Lean and clean! Building a site with web standards <ul><li>4. What do standards mean to web developers? </li></ul><ul><ul><ul><li>Web designers and developers should be aim to build sites that use: </li></ul></ul></ul><ul><ul><ul><li>Semantic markup </li></ul></ul></ul><ul><ul><ul><li>Valid code </li></ul></ul></ul><ul><ul><ul><li>Accessible code </li></ul></ul></ul><ul><ul><ul><li>Separation of style from content </li></ul></ul></ul>
  5. 5. Lean and clean! Building a site with web standards <ul><li>5. Semantic code </li></ul><ul><ul><ul><li>Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.) </li></ul></ul></ul><ul><ul><ul><li>In simple terms, this means: </li></ul></ul></ul><ul><ul><ul><ul><li>for headings, use heading elements starting with H1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>for paragraphs of text, use a paragraph element </li></ul></ul></ul></ul><ul><ul><ul><ul><li>for lists, use a list item element </li></ul></ul></ul></ul><ul><ul><ul><li>You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. For example, avoid styling <div> elements to look like headings. </li></ul></ul></ul>
  6. 6. Lean and clean! Building a site with web standards <ul><li>6. Why use valid code? </li></ul><ul><ul><ul><li>Valid code will render faster than code with errors. </li></ul></ul></ul><ul><ul><ul><li>Valid code will render better than invalid code. </li></ul></ul></ul><ul><ul><ul><li>Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML </li></ul></ul></ul>
  7. 7. Lean and clean! Building a site with web standards <ul><li>7. How do you make your code valid? </li></ul><ul><ul><ul><li>Start with the right doctype </li></ul></ul></ul><ul><ul><ul><li>Be aware of doctype modes (standards compliant, quirks mode etc) </li></ul></ul></ul><ul><ul><ul><li>Use a character set </li></ul></ul></ul><ul><ul><ul><li>Close HTML elements </li></ul></ul></ul><ul><ul><ul><li>Use alt tags for images </li></ul></ul></ul><ul><ul><ul><li>Avoid HTML hacks </li></ul></ul></ul><ul><ul><ul><li>Use HTML validators regularly </li></ul></ul></ul><ul><ul><ul><li>Fix any bugs you find before you go live </li></ul></ul></ul><ul><ul><ul><li>Make validation part of your normal work process </li></ul></ul></ul>
  8. 8. Lean and clean! Building a site with web standards <ul><li>8. What is accessible code? </li></ul><ul><ul><ul><li>Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired) </li></ul></ul></ul><ul><ul><ul><li>Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines) </li></ul></ul></ul><ul><ul><ul><li>Is a requirement for Federal and State Government sites </li></ul></ul></ul>
  9. 9. Lean and clean! Building a site with web standards <ul><li>9. How do you make your code accessible? </li></ul><ul><ul><ul><li>Provide text equivalent for non-text elements </li></ul></ul></ul><ul><ul><ul><li>Use accessible data tables (identify row and column headers) </li></ul></ul></ul><ul><ul><ul><li>Use accessible forms (label for, id, fieldset, legend) </li></ul></ul></ul><ul><ul><ul><li>Use markup rather than images to convey information. </li></ul></ul></ul><ul><ul><ul><li>Provide visible skip menus </li></ul></ul></ul><ul><ul><ul><li>Provide access keys </li></ul></ul></ul><ul><ul><ul><li>Use style sheets with relative units to control layout and presentation </li></ul></ul></ul><ul><ul><ul><li>Make sure documents can be read without style sheets </li></ul></ul></ul><ul><ul><ul><li>Provide metadata to add semantic information </li></ul></ul></ul>
  10. 10. Lean and clean! Building a site with web standards <ul><li>10. Separating style from content </li></ul><ul><ul><ul><li>Easier to make site-wide changes - one css file rather than all pages </li></ul></ul></ul><ul><ul><ul><li>Smaller files/ faster download - less code on the page </li></ul></ul></ul><ul><ul><ul><li>Less code on the page - easier to code </li></ul></ul></ul><ul><ul><ul><li>Allows users to customise to their own needs - style switchers </li></ul></ul></ul><ul><ul><ul><li>More control over code - can deliver code in preferred order for screen readers </li></ul></ul></ul><ul><ul><ul><li>Files are more accessible to a wider variety of mediums - separate css files for other devices </li></ul></ul></ul>
  11. 11. Lean and clean! Building a site with web standards <ul><li>11. How do you separate style from content? </li></ul><ul><ul><ul><li>Decide on a browser support level and code methodology </li></ul></ul></ul><ul><ul><ul><li>If full CSS is the chosen methodology, decide on a CSS positioning method </li></ul></ul></ul><ul><ul><ul><li>Place content into containing boxes </li></ul></ul></ul><ul><ul><ul><li>Use CSS positioning to control layout of containing boxes </li></ul></ul></ul><ul><ul><ul><li>Use CSS to control the visual appearance of all html elements </li></ul></ul></ul><ul><ul><ul><li>Test on a wide variety of browsers at each stage </li></ul></ul></ul>
  12. 12. Lean and clean! Building a site with web standards <ul><li>12. Lean and clean can still be elegant </li></ul><ul><ul><ul><li>http://reddeyez.com </li></ul></ul></ul><ul><ul><ul><li>http://www.tinderhouse.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.yellowlane.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.adaptivepath.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.sprintpcs.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.m-four.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.couloir.org/ </li></ul></ul></ul><ul><ul><ul><li>http://www.e-lusion.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.pga.com/seniorpga/2004/ </li></ul></ul></ul><ul><ul><ul><li>http://www.kryzcom.de/ </li></ul></ul></ul><ul><ul><ul><li>http://superfluousbanter.org/ </li></ul></ul></ul><ul><ul><ul><li>http://www.sharkrodeo.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.jewelboxing.com/index.php </li></ul></ul></ul><ul><ul><ul><li>http://www.twinsparc.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.message.uk.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.styrofirm.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.onetruefit.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.wildlysophisticated.com/ws/home/index.php </li></ul></ul></ul><ul><ul><ul><li>http://www.twothirty.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.lambertin-grotegerd.de/willkommen/ </li></ul></ul></ul>

×