Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupaldelphia 2013 - Tyler School of Art: A Cas...

Drupaldelphia 2013 - Tyler School of Art: A Case Study in User-Centered Decision-Making

dirtystylus

October 11, 2013
Tweet

More Decks by dirtystylus

Other Decks in Programming

Transcript

  1. Tyler School of Art: A Case Study in User-Centered Decision-Making

    BLUECADET • 1011 N. Hancock Street, Unit 101, Philadelphia, PA 19123 • 267.639.9956 • [email protected]
  2. WCAG standards set a contrast ratio of 4.5:1 for normal

    text size and 3:1 for large text. Test your hex codes: http://webaim.org/resources/contrastchecker/
  3. Blue vs. Red with a Deuteranopia overlay, the most common

    type of colorblindness. http://colororacle.org/
  4. Make sure your hover states are accessible! We used: a

    :focus pseudo-selector in addition to :hover.
  5. What you want: H1 H2 H3 H4 Header Order What

    you might get: H2 H1 H4 H5 What We Did: modified the templates
  6. M A S O N R Y G R I

    D : Grid had to accommodate different layouts/priority.
  7. D R A G G A B L E V

    I E W S M O D U L E : Reorder content nodes. (https://drupal.org/project/draggableviews)
  8. M A S O N R Y G R I

    D : Lots of different blocks.
  9. C O N D I T I O N A

    L F I E L D S M O D U L E : Set contextual rules. (https://drupal.org/project/conditional_ elds)
  10. C O N D I T I O N A

    L F I E L D S M O D U L E : Hide elds that don’t relate to the Content Type Category.
  11. I N L I N E E N T I

    T Y F O R M M O D U L E : Search, create, edit. (https://drupal.org/project/inline_entity_form)
  12. I N L I N E E N T I

    T Y F O R M M O D U L E : Create.
  13. I N L I N E E N T I

    T Y F O R M M O D U L E : Search.
  14. C K E D I T O R D E

    F A U L T : (photo: drupal.org)
  15. C K E D I T O R P R

    O F I L E S : Cut out items you don’t need.
  16. “The business buyer, famously, does not care about the user

    experience. They are not the user, and so items that change how a product feels or that eliminate small annoyances simply don’t make it into their rational decision making process.” -Ben Thompson
  17. “The web designer, famously, does not care about the user

    experience. They are not the user, and so items that change how a site feels or that eliminate small annoyances simply don’t make it into their rational decision making process.”
  18. F I N G E R . ( p h

    o t o b y F l i c k r u s e r f r e n c h y , h t t p : / / w w w . f l i c k r . c o m / p h o t o s / f r e n c h y / 5 0 4 7 2 5 1 7 4 3 / i n / p h o t o s t r e a m / )
  19. P I C T U R E M O D

    U L E : Serve up lightweight default, enhance to larger images at breakpoints. More info: Marc Drummond talk (https://www.youtube.com/watch?v=Zo_TTvV6DC4)
  20. P I C T U R E M O D

    U L E : Serve up lightweight default, enhance to larger images at breakpoints. (https://drupal.org/project/picture)
  21. G R I D / L I S T T

    O G G L E : Default to list views on smaller screens.
  22. G R I D / L I S T T

    O G G L E : Grids/blocks don’t let you skim as fast.
  23. G R I D / L I S T T

    O G G L E : Blocks breathe easier at wider widths.
  24. A D O B E E D G E I

    N S P E C T : Computer drives, devices follow.
  25. i O S S I M U L A T

    O R : Handy, but remember to get on real devices.
  26. THANK YOU ! @bluecadet @dirtystylus BLUECADET • 1011 N. Hancock

    Street, Unit 101, Philadelphia, PA 19123 • 267.639.9956 • [email protected]