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

Etsy Patterns

537d8040116ce1a24c6947db7bee209e?s=47 aaronmoodie
February 04, 2016

Etsy Patterns

537d8040116ce1a24c6947db7bee209e?s=128

aaronmoodie

February 04, 2016
Tweet

Transcript

  1. @aaronmoodie Hi! I’m Aaron Moodie, I design and build products

    for the web.
  2. @aaronmoodie

  3. @aaronmoodie New strategies in the process of design

  4. @aaronmoodie 30 product designers

  5. @aaronmoodie 30 product designers Working on 20 teams

  6. @aaronmoodie 30 product designers Working on 20 teams 50 deploys

    a day
  7. @aaronmoodie How do we move fast while keeping things consistent?

  8. @aaronmoodie Designing patterns

  9. @aaronmoodie

  10. @aaronmoodie

  11. @aaronmoodie It’s not just how it looks, it’s how it

    works Once you add variations, a buyer will be required to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
  12. @aaronmoodie It’s not just how it looks, it’s how it

    works Once you add variations, a buyer will be required to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
  13. @aaronmoodie Building patterns

  14. @aaronmoodie Usability Accessibility Compatibility

  15. @aaronmoodie Usability Making the overlay plug and play

  16. @aaronmoodie Once you add variations, a buyer will be required

    to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
  17. @aaronmoodie <script> $("[data-overlay-region='myOverlay']").etsyOverlay(); </script> <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay"> <div

    class="overlay-view"> <div class="overlay-header"> <a data-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" class="overlay-title">How do variations work?</span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div>
  18. @aaronmoodie Accessibility Designing for compatibility with all technology

  19. @aaronmoodie @aaronmoodie

  20. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div

    class="overlay-view"> <div class="overlay-header"> <a data-overlay-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> Show to screen reader
  21. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div

    class="overlay-view"> <div class="overlay-header"> <a data-overlay-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> no href
  22. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div

    class="overlay-view"> <div class="overlay-header"> <button data-overlay-close class="btn btn-link overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </button> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> Much better!
  23. @aaronmoodie Compatibility Working within a legacy codebase

  24. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div

    class="overlay-view"> <div class="overlay-header"> <button data-overlay-close class="btn btn-link overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </button> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> All masks use #mask
  25. @aaronmoodie Usability Accessibility Compatibility

  26. @aaronmoodie It’s not just how it looks, it’s how it

    works
  27. @aaronmoodie Thanks! aaronmoodie.com @aaronmoodie