Sbs Best Practices Intro 30.11.2009

542 views
489 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
542
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sbs Best Practices Intro 30.11.2009

  1. 1. Best practices Patrick H. Lauke / Salford Business School / 30 November 2009 WHAT YOU NEED TO KNOW ABOUT MODERN WEB DEVELOPMENT AND DESIGN
  2. 2. web evangelist at Opera
  3. 3. 1. web standards 2. accessibility 3. why bother?
  4. 4. 1. web standards 2. accessibility 3. why bother?
  5. 5. Old-school way of making pages ● Creating markup based on how things look ● Defining colours, widths, etc in your page ● Using tables for layout
  6. 6. Old-school way of making pages <p><font size=“+3” color=”ff0000”><b>This is a heading</b></font></p> <p><font color=“555555”>Blah blah blah</font></p> <p><font size=“+2” color=”00ff00”><b>A sub- section</b></font></p> <p><font color=“555555”>Blah blah blah</font></p> <p><font size=“+2” color=”00ff00”><b>A sub- section</b></font></p> <p><font color=“555555”>Blah blah blah</font></p>
  7. 7. Modern “web standards” way Separation of content and presentation ● HTML defines the content ● CSS says how the browser should style it
  8. 8. Defining your content HTML offers us different elements to define the meaning of pieces of content ● <h1> … <h6> for headings ● <p> paragraphs ● <ul> unordered (bulletpoint) lists ● <ol> ordered (numbered) lists ● Etc At this stage we don't care what it looks like...
  9. 9. Defining your content <h1>This is a heading</h1> <p>Blah blah blah</p> <h2>A sub-section</h2> <p>Blah blah blah</p> <h2>A sub-section</h2> <p>Blah blah blah</p>
  10. 10. “Semantic” markup If you mark up your content based on its meaning, rather than what it looks like ● Becomes far easier to read ● You can quickly style things consistently ● Meaning can be interpreted by other programs (assistive technology, automated summaries, etc)
  11. 11. Stylesheets CSS use a different language from HTML, but provides powerful ways to simply define look h1 { font-size: 150%; color: #ff0000; } h2 { font-size: 125%; color: #00ff00; } p { color: #555555; }
  12. 12. Why bother? Separating content and presentation
  13. 13. Why bother? Separating content and presentation ● Easy to quickly change look of an entire site without having to go through each page ● e.g. csszengarden.com
  14. 14. Why bother? Separating content and presentation
  15. 15. 1. web standards 2. accessibility 3. why bother?
  16. 16. What is accessibility? “making sure our website works for blind people...”
  17. 17. Wide range of disabilities ● Visual impairments ● Auditory impairments ● Mobility impairments ● Cognitive disabilities
  18. 18. Who cares? People with disabilities use the web like anybody else...
  19. 19. Surely not... ● “disabled people won't be using my site!” ● “they're a small market, it's not worth catering!” ● “don't have time to make a separate accessible site!”
  20. 20. Disabled people won't be using my site! What type of site is it? ● Photographer selling prints ● Art gallery ● Mountain climbing equipment ● Online music store ● Web design resource
  21. 21. Small market, not worth catering for! “It is estimated that there are 7 million disabled people in the UK and that around 19% of the working age population has some form of disability.” Source: Disability Rights Commission – Disability briefing January 2004 www.leeds.ac.uk/disability-studies/archiveuk/DRC/Disability%20Briefing%20Dec%202004.pdf
  22. 22. No time for separate accessible site! In most cases, no need for special “disabled access” site ● Inclusive design, not segregation ● Separation of content and presentation, structural markup, web standards ● Accessibility considered at planning stage
  23. 23. Access for all ● Accessibility not just for users with disabilities ● Benefits to all users ● Real-world: access ramps – just for wheelchairs? ● “situational/temporary” disabilities ● Alternative browsing devices: PDA, web phone, etc ● “silver surfers”
  24. 24. Search engine optimisation (SEO)? Google etc. “world's largest disabled user”
  25. 25. Web Content Accessibility Guidelines 2.0 ● Freely available www.w3.org/TR/WCAG20 ● Define 4 principles sites should adhere to
  26. 26. WCAG 2.0 principles ● Perceivable ● Operable ● Usable ● Robust
  27. 27. WCAG 2.0 principles Each principle broken down into guidelines. Each guideline has success criteria to test.
  28. 28. WCAG 2.0 — Perceivable 1.1 Provide text alternatives for non-text content
  29. 29. WCAG 2.0 — Perceivable 1.2 Provide alternatives for time-based media
  30. 30. WCAG 2.0 — Perceivable 1.3 Create content that can be presented in different ways ● Separation of content and presentation ● Semantic markup
  31. 31. WCAG 2.0 — Perceivable 1.4 Make it easier for users to see and hear content including separating foreground from background
  32. 32. WCAG 2.0 — Operable 2.1 Make all functionality available from a keyboard ● Not a problem when doing plain HTML ● Be careful when getting fancy with JavaScript, Flash movies, etc
  33. 33. WCAG 2.0 — Operable 2.3 Do not design content in a way that is known to cause seizures
  34. 34. WCAG 2.0 — Robust 4.1 Maximize compatibility with current and future user agents, including assistive technologies ● Web standards...
  35. 35. Ethical/moral/financial reasons not enough? Most countries now have legal obligations ● UK: Disability Discrimination Act (DDA) 1995 Provision of goods and services ● Australia: Disability Discrimination Act 1992 ● USA: Americans with Disabilities Act (ADA) ● USA: Section 508 of Rehabilitation Act
  36. 36. Political correctness gone mad? “What next? Blind people suing car manufacturers?” ● UK DDA: “reasonable adjustments” ● Situations where there is no reasonable adjustment ● Case by case, not one size fits all
  37. 37. Testing for accessibility ● Automated accessibility checkers ● Still require human judgement ● False positives, false negatives ● Best way: understand what the issues are
  38. 38. 1. web standards 2. accessibility 3. why bother?
  39. 39. Not just a “compliance” issue ● Not about ticking boxes ● It's about quality of your work ● Accessibility not always either/or — sliding scale ● Web standards + accessibility are expected skills in today's job market
  40. 40. Further information Designing with web standards www.zeldman.com/dwws
  41. 41. Further information Web Accessibility Web Standards and Regulatory Compliance www.friendsofed.com/book.html?isbn=1590596382
  42. 42. Further information ● Opera Web Standards Curriculum www.opera.com/wsc ● W3C Web Accessibility Initiative www.w3.org/WAI ● WebAIM: Web Accessibility In Mind www.webaim.org
  43. 43. www.opera.com/developer patrick.lauke@opera.com

×