1. Web standards pragmatism Patrick H. Lauke / Web Developers Conference / 12 November 2008 FROM VALIDATION TO THE REAL WORLD

2. Who am I? Web Editor for University of Salford Co-lead of Web Standards Project (WaSP) ATF Occasional author

3. What are web standards?

5. Web standard tenets Boil down to three things: Valid (published grammar) Separation of content and presentation Semantic markup/code

6. Visual aesthetics? “Beautiful sites” can be created with any technology... Table-based layouts Font tags Giant images etc Why bother with web standards/CSS?

7. Why web standards Some advantages: Lighter code Easier to maintain Easier to change look/feel Multiple output media Accessibility SEO

8. Web standards and aesthetics? “You can't make good looking sites with web standards...”

13. Traditional “old school” way Choice of markup purely down to their look is too big... I'll use instead, or just a to indent More space between paragraphs... add a few empty or just lots of

14. Traditional “old school” way...then sprinkle presentational markup on top Heading this is important.

15. Web standards elements Building a page by defining: What each piece of content is in HTML What it looks like in CSS

16. Web standards process Distinct tasks: Mark up content with most appropriate elements — convey meaning, not look Apply styling (override browser defaults)

17. Semantic / structural markup Heading this is important.

18. I know kung fu... common pitfalls

19. New technology, old habits...

20. Meaningless content Presentational: Heading Very important. Subheading

21. Meaningless content Semantic: Heading Very important. Subheading

22. Non-semantic class/id names I know CSS..red { color: red; } I know CSS.

23. Non-semantic class/id names? I know CSS..red { color: green; } I know CSS.

24. Semantic class/id names! Presentational:... CSS... Semantic:... CSS...

26. Classitis – the “labelmaker” approach.nav { text-decoration: none; }...............

27. Classitis – cured #nav a { text-decoration: none; }............... Be smart with your CSS Use semantic structure to your advantage

28. Tables? “I've just learnt web standards and removed all tables from my site...”

31. Tables (faked) Misguided zealots go too far..................

32. Tables! Not all tables are evil... Tabular content (think Excel spreadsheet) Best way to define relationship Accessibility

33. “Fluff” images

34. Error: no entry found

35. “Fluff” images via CSS If only decorative... Decorative = presentation Add images as non-repeating CSS backgrounds

36. Error: no entry found p.warning { padding: 10px; border: 1px #000 solid; background: url(warn.gif) no-repeat left top; }

37. “Fluff” images via CSS...but sometimes you have to stick with images WYSIWYG authors? One-off images don't warrant new CSS rules

38. Image replacement Images used for headings etc Branding “Fancy” font Graphical buttons

40. Image replacement Mark up text version (proper semantics) Hide this text Put an image in its place

41. Image replacement Wrap text in a span, apply background image Heading h1 { width: 350px; height: 75px; padding: 0; background: url(heading.gif) no-repeat left top; }

42. Image replacement Hide the span Heading h1 { width: 350px; height: 75px; padding: 0; background: url(heading.gif) no-repeat left top; } h1 span { display: block; position: absolute; top: 0; left: -999em; }

43. Image replacement issues Multiple (unskilled/WYSIWYG) authors? Backgrounds don't normally print Sometimes, a humble image will do...

44. Dogmatism and standards

45. “If your site doesn't validate, you've failed and nobody wants to even talk to you...”

47. Dogmatism and standards Validation is not an end in itself Quality Assurance of your code Some rules can be bent, others can be broken Depends on your particular situation

48. Attack of the pedants... “What's the most semantic way of marking this up?”

51. Most semantic? University home About the Uni......

56. Take-away advice...

57. Web standards are not just about validation Easy to use standards in an inappropriate way Tables are for tabular data Sometimes, you have to compromise

58. Thank you...