Designing an atmosphere for accessibility

Accessibility Day 2013. Oslo, Norway, October 24th 2013.

Transcript

1. Designing an atmosphere of accessibility Andrew Clarke @malarkey
7. accessifyforum.com
9. I don’t care about accessibility.” veen.com/jeff/archives/000503.html 17 March 2004 “
10. Jeffrey Veen Don’t care. Not an issue. Hardly ever comes up.” “
11. When you design exclusively and specifically for this medium, so many of the things we consider problems just start to fall away.” “ Jeffrey Veen
12. When web design is practiced as a craft and not a consolation, accessibility comes for free.” “ Jeffrey Veen
13. You suck.” “ Jack Crowther
14. Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web is accessibility, regardless of difficulties, to information.” “ alistapart.com/article/dao April 7, 2000
15. We should embrace the fact that the web doesn’t have the same constraints [as the printed page] and design for this flexibility. But first, we must ‘accept the ebb and flow of things’.” “ alistapart.com/article/dao April 7, 2000
16. 640x480
18. 800x600
19. 1024x768
22. 320x480 3.5" iPhone
23. 480x320 3.5" iPhone in landscape orientation
24. 568x320 4" iPhone in landscape orientation
26. Arguing about 640, 800 or 1024 pixels is like arguing about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing.” “ http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
27. The numbers game is a red herring. A big fixed-width red herring.” “ http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
28. http://www.flickr.com/photos/brad_frost/7387764524
29. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things’.” “ alistapart.com/article/responsive-web-design May 25, 2010
30. ✎ ⚙  ➡ ➡ ➡ Plan Design Develop Deploy
31. ✎ ⚙  ✓ ✓ ✓
32.  ✓ ✓ ✎ ⚙
33. Worse still are the expectations that static visuals set in the minds of clients, particularly when designers use them as a method to get sign-off for a design.” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
34. I often wonder, ‘is the fact that so many web pages are fixed- width and centered, a direct result of clients signing off fixed-width design visuals?’” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
35. User experience design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
36. User experience design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
37. ⌘N
41. Designer Client Developer ⬊ ➡
42. Percentage-based layouts Media Queries Native form element styling Font rendering Flexible leading and measure Visuals can’t communicate
43. Browsers’ CSS capabilities Pseudo-classes CSS3 ligatures and swashes CSS3 animations CSS3 transitions Visuals can’t communicate
44. Graphic design tools are bringing a knife to a gunfight
45. Stephen Hay’s workflow Content inventory Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow
46. Content inventory Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow Stephen Hay’s workflow
47. Designers should write markup to communicate the meaning in a design
52. design - layout = atmosphere
53. Typography Typefaces, type treatments and white space Colour Emotion and interaction vocabulary Texture Decoration, line-work, patterns and shapes
58. Typography
61. 21 a 24 a 36 a 48 a 14 a 16 a 18 a 12 a 11 a 10 a
62. 21 24 36 48 14 16 18 12 11 10 a a a a a a a a a a
63. 21 24 36 48 14 16 18 12 11 10 a a a a a a a a a a
64. Elements Captions Headings Labels Legends Lists Paragraphs Quotations Small Tables Classifications Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles
68. http://goo.gl/o23Vc
69. Typography decisions for accessibility affect everyone
80. Contrast
81. Typography Typographic colour Type on backgrounds Hyperlink text Contrast issues
88. Colour
90. DPMPVS
    FYQMPSBUJPO
     $SFBUJWF *OOPWBUJWF 'VO 'BTU
    QBDFE "EBQUJWF 1SBHNBUJD
    
91. DPMPVS
    FYQMPSBUJPO
    CMPDLT
    PG
    DPMPVS
99. Deuteranopia
100. Protanopia
107. Texture
108. Backgrounds Border treatment Iconography Patterns and textures Texture
115. Web designers will have to look beyond the layout to envision how elements will reflow & lockup at various widths while maintaining form & hierarchy.” “ http://trentwalton.com/2011/07/14/content-choreography Trent Walton
116. Design guides
118. FRV BRAND GUIDELINES ES
119. 25 MASS: TYPOGRAPHY ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz The Product Name should appear in Futura Std Bold Uppercase. This sans serif font has been chosen for its clarity, legibility and classic appeal. The Front Product Descriptor copy should appear in ITC Century Std Lowercase. This serif font has been chosen for its simple style and clarity even in smaller point sizes. The back of pack copy should appear in Futura Std. This sans serif font has been chosen for its simple style and clarity even in smaller point sizes. All fonts are OpenType from the Adobe Font Folio 11. (www.adobe.com/uk/products/fontfolio)
120. 17 MASS PANTONE 7489 C PANTONE 7495 C PANTONE 366 C PANTONE 383 C PANTONE 7406 C PANTONE 121 C PANTONE 1235 C PANTONE 7502 C PANTONE 157 C PANTONE 138 C PANTONE 166 C PANTONE Warm Red C PANTONE 485 C PANTONE 184 C PANTONE 5005 C PANTONE 7431 C PANTONE 673 C PANTONE 701 C PANTONE 529 C PANTONE 7446 C PANTONE 659 C PANTONE 7459 C PANTONE 278 C PANTONE 551 C PANTONE 629 C PANTONE 3105 C PANTONE 3248 C PANTONE 7466 C PANTONE 7536 C PANTONE 7530 C OUTDOOR PANTONE 583 C PANTONE 291 C MASS: COLOUR PALETTE Mass products are made up of a warm colourful palette that is both complementary and contrasting. Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK. Pantone colours will provide the maximum amount of consistency across the Product Range. In instances where this is not possible we have created optimised CMYK values that are shown on page 18. In the instance that a suitable colour does not exist for a Mass Food product, please contact your Licensing Manager.
121. 22 MASS: PHOTOGRAPHY Always use image in monochrome with a background colour wash Never use in colour Never use simply as black and white image Never position anywhere other than bottom right Never cover with copy ITALIAN FUSILLI enjoy traditional texture with Durum Wheat Semolina Never force the image into the given space – leave an area of blank space round the image Never position the image around a corner do’s and dont’s
122. )\PSKPUNH .SVIHS,_WLYPLUJL3HUN\HNL MVY[OL))* .,3:[`SLN\PKL
123. $ULDO5HJXODU $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] #…A B $ULDO%ROG $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] #…A B +MPP7ERW6IKYPEV %&'()*+,-./0123456789:;<=> EFGHIJKLMNOPQRSTUVWXYZ[\]^ $† B  C .,3\ZLZIVSK[`WVNYHWO`[VJYLH[LZ[YVUNLY OPLYHYJOPLZHUKKYHTHHJYVZZ[OLZP[L>L»YLTV]PUN MYVT=LYKHUH[V(YPHSHZ[OL))*»ZKLMH\S[^LIMVU[MVY IV[OOLHKLYZHUKIVK`JVW`  )\PSKPUN)SVJRZ;`WVNYHWO`
124.  )\PSKPUN)SVJRZ;`WVNYHWO` 3HYNLIVSK[`WLZOV\SKIL\ZLK[VLZ[HISPZO HJSLHYPUMVYTH[PVUOPLYHYJO`;OLZLHYL[OL YLJVTTLUKLK[`WLZPaLZ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ  $ULDO%ROGS[ $5,$/%2/'&$3,7$/,6('S[ 
125.  )\PSKPUN)SVJRZ0JVUVNYHWO` >LOH]LKLZPNULKHUL^ZL[VMPJVUZ[V^VYRPU OHYTVU`^P[O[OLUL^]PZ\HSSHUN\HNL;OLKLMH\S[ ZPaLPZW_HUKPJVUZJHUIL\ZLK^P[OVY^P[OV\[ HÅH[I\[[VUJVU[HPULY;OLZLJHUIL\ZLKPUHU` JVSV\Y\USLZZV[OLY^PZLZWLJPÄLK 3UHYLRXV 1H[W 8S 'RZQ 7R7RS 7R%RWWRP &ORVH5HPRYH 1R'HOHWH 'RZQORDG 8SORDG 6HDUFK 8QORFN <HV +HOS ,QIR&DSWLRQ 3ULQW (PDLO 9RFDE2Q2II 5HIUHVK $ODUP5HPLQGHU 'XUDWLRQ &RXQWGRZQ ([SLUHV 6HWWLQJV 'HJUDGHG &RQWHQW *ULG9LHZ /LVW9LHZ WH[W =RRP,Q +RPH /LVW9LHZ WH[WDQGWKXPE 1HZ1HZLWHPV 4XRWH ([WHUQDO/LQN /RDGLQJ &KDSWHUV /LQNWR7KLV (PEHG -VYTVYLPUMVYTH[PVUVYMVY[OLM\SSZL[VMPJVUZ]PZP[IIJJV\RNLSPJVUVNYHWO`ZO[TS
131. The web’s content must be built to travel across networks to unknown devices and browsers.” “ Jeffrey Veen Hotwired Style book, 1997
132. takk følg @malarkey