Web standards pragmatism

1
Web standards pragmatism

• FROM VALIDATION TO THE REAL WORLD

Patrick H. Lauke / Web Developers Conference / 12
November 2008
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?
4
(No Transcript)
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...

9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
Traditional old school way

• Choice of markup purely down to their look
• lth1gt is too big ... I'll use lth4gt instead, or
  just a ltpgt
• ltblockquotegt to indent
• More space between paragraphs ... add a few empty
  ltpgtlt/pgt or just lots of ltbrgt

14
Traditional old school way

• ...then sprinkle presentational markup on top
• ltpgtltfont size"3" color"ff0000gtltbgtHeadinglt/bgtlt/
  fontgtlt/pgt
• ltpgtthis is ltbgtimportantlt/bgt.lt/pgt

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

• lth1gtHeadinglt/h1gt
• ltpgtthis is ltstronggtimportantlt/stronggt.lt/pgt

18
I know kung fu... common pitfalls
19
New technology, old habits

• ltpgtltfont size"3" color"ffffff"gt...lt/fontgtlt/pgt
• ltpgtltspan style"font-size 200 color
  ffffff"gt...lt/spangtlt/pgt
• ltp style"font-size 200 color ffffff"gt...lt/pgt

20
Meaningless content

• Presentational
• ltp class"headingbig"gtHeadinglt/pgt
• ltpgtVery ltspan class"bold"gtimportantlt/spangt.lt/pgt
• ltp class"headingsmall"gtSubheadinglt/pgt

21
Meaningless content

• Semantic
• lth1gtHeadinglt/h1gt
• ltpgtVery ltstronggtimportantlt/stronggt.lt/pgt
• lth2gtSubheadinglt/h2gt

22
Non-semantic class/id names

• ltpgtI know lta href"..." class"red"gtCSSlt/agt.lt/pgt
• .red color red
• I know CSS.

23
Non-semantic class/id names?

• ltpgtI know lta href"..." class"red"gtCSSlt/agt.lt/pgt
• .red color green
• I know CSS.

24
Semantic class/id names!

• Presentational
• ... lta href"..." class"red"gtCSSlt/agt ...
• Semantic
• ... lta href"..." class"external"gtCSSlt/agt ...

25
(No Transcript)
26
Classitis the labelmaker approach

• .nav text-decoration none
• ltulgt ltligtlta href"..." class"nav"gt ...
  lt/agtlt/ligt ltligtlta href"..." class"nav"gt ...
  lt/agtlt/ligt ltligtlta href"..." class"nav"gt ...
  lt/agtlt/ligt ltligtlta href"..." class"nav"gt ...
  lt/agtlt/ligt ltligtlta href"..." class"nav"gt ...
  lt/agtlt/ligtlt/ulgt

27
Classitis cured

• nav a text-decoration none
• ltul id"nav"gt ltligtlta href"..."gt ... lt/agtlt/ligt
  ltligtlta href"..."gt ... lt/agtlt/ligt ltligtlta
  href"..."gt ... lt/agtlt/ligt ltligtlta href"..."gt
  ... lt/agtlt/ligt ltligtlta href"..."gt ...
  lt/agtlt/ligtlt/ulgt
• 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...

29
(No Transcript)
30
(No Transcript)
31
Tables (faked)

• Misguided zealots go too far...
• ltdivgt ltdivgt ltspangt...lt/spangt
  ltspangt...lt/spangt lt/divgt ltdivgt
  ltspangt...lt/spangt ltspangt...lt/spangt lt/divgt
  ...lt/divgt

32
Tables!

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

33
Fluff images
34
Fluff images

• ltp class"warning"gt ltimg src"warn.gif" ...
  alt"" /gt ltstronggtError no entry
  foundlt/stronggtlt/pgt

35
Fluff images via CSS

• If only decorative...
• Decorative presentation
• Add images as non-repeating CSS backgrounds

36

• ltp class"warning"gt ltstronggtError no entry
  foundlt/stronggtlt/pgt
• 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

39
(No Transcript)
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
• lth1gtltspangtHeadinglt/spangtlt/h1gt
• h1 width 350px height 75px padding
  0 background url(heading.gif)
  no-repeat left top

42
Image replacement

• Hide the span
• lth1gtltspangtHeadinglt/spangtlt/h1gt
• 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...
• lth1gtltimg src"heading.gif" alt"..." /gtlt/h1gt

44
Dogmatism and standards
45
Dogmatism and standards

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

46
(No Transcript)
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?

49
(No Transcript)
50
(No Transcript)
51
Most semantic?

• ltolgt ltligtlta ...gtUniversity homelt/agtlt/ligt
  ltligtltolgt ltligtlta ...gtAbout the
  Unilt/agtlt/ligt ltligtltolgt
  ltligtlta ...gt...lt/agtlt/ligt ...lt/olgt

52
(No Transcript)
53
(No Transcript)
54

55

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...