Lean And Clean! Building A Site With Web Standards

Slide show maker: http://webclassroom.wordpress.com

Lean and clean! Building a site with web standards

• 1. What are 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

– Who sets the webstandards?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:

• deliver the greatest benefits to the greatest number of web users • ensure the long-term viability of any web document • simplify code and lower the cost of production • deliver sites that are accessible to more people and more types of Internet

devices • continue to function correctly as traditional desktop browsers evolve, and

as new Internet devices come to market



• 2. The web standards

Structural Languages– Extensible Hypertext Markup Language (XHTML) 1.0– XHTML 1.1– Extensible Markup Language (XML) 1.0

Presentation Languages– Cascading Style Sheets (CSS) Level 1– CSS Level 2– CSS Level 3

Object Models– Document Object Model (DOM) Level 1 (Core)– DOM Level 2

Scripting Languages– ECMAScript 262 (the standard version of JavaScript)

Additional Presentation Languages (Markup)– Mathematical Markup Language (MathML) 1.01– MathML 2.0– Scalable Vector Graphics (SVG) 1.0



• 3. What are the benefits of using web standards?– Benefits for you:

• Less code means sites are easier to maintain • Less browser specific coding - compatible with current browsers • Less revisiting of old sites - compatible with future browsers

– Benefits for your audience:• Less code means sites are faster downloads • More accessible - will work in a wider variety of user agents



• 4. What do standards mean to web developers?

Web designers and developers should be aim to build sites that use:

Semantic markup Valid code Accessible code Separation of style from content



• 5. Semantic codeSemantic 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.)

In simple terms, this means: – for headings, use heading elements starting with H1 – for paragraphs of text, use a paragraph element – for lists, use a list item element

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.



• 6. Why use valid code?• Valid code will render faster than code with errors. • Valid code will render better than invalid code. • Browsers are becoming more standards compliant, and it is

becoming increasingly necessary to write valid and standards compliant HTML



• 7. How do you make your code valid?

• Start with the right doctype • Be aware of doctype modes (standards compliant, quirks mode etc) • Use a character set • Close HTML elements • Use alt tags for images • Avoid HTML hacks • Use HTML validators regularly • Fix any bugs you find before you go live • Make validation part of your normal work process



• 8. What is accessible code?• Allows your site to be accessible to a larger audience (vision

impaired, motor skill impaired, cognitive impaired) • Allows your site 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



• 9. How do you make your code accessible?

• Provide text equivalent 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



• 10. Separating style from content

• Easier to make site-wide changes - one css file rather than all pages

• Smaller files/faster download - less code on the page • Less code on the page - easier to code • Allows users to customise to their own needs - style switchers • More control over code - can deliver code in preferred order for

screen readers • Files are more accessible to a wider variety of mediums - separate

css files for other devices



• 11. How do you separate style from content?

• Decide on a browser support level and code methodology • If full CSS is the chosen methodology, decide on a CSS

positioning method • Place content into containing boxes • Use CSS positioning to control layout of containing boxes • Use CSS to control the visual appearance of all html elements • Test on a wide variety of browsers at each stage



• 12. Lean and clean can still be elegant• http://reddeyez.com • http://www.tinderhouse.com/ • http://www.yellowlane.com/ • http://www.adaptivepath.com/ • http://www.sprintpcs.com/ • http://www.m-four.com/ • http://www.couloir.org/ • http://www.e-lusion.com/ • http://www.pga.com/seniorpga/2004/ • http://www.kryzcom.de/ • http://superfluousbanter.org/ • http://www.sharkrodeo.com/ • http://www.jewelboxing.com/index.php • http://www.twinsparc.com/ • http://www.message.uk.com/ • http://www.styrofirm.com/ • http://www.onetruefit.com/ • http://www.wildlysophisticated.com/ws/home/index.php • http://www.twothirty.com/ • http://www.lambertin-grotegerd.de/willkommen/

Lean And Clean! Building A Site With Web Standards

Business

Transcript of Lean And Clean! Building A Site With Web Standards