Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

about:consistency - lesson learned: the hard way

5.103 Aufrufe

Veröffentlicht am

Lightning talk about User Interface consistency at the LeanUX Meetup in Düsseldorf

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

about:consistency - lesson learned: the hard way

  1. 1. about:consistency lessons learned - the hard way Christoph Reinartz - @pistenprinz 28 Mai 2015
  2. 2. .gradient_bright_hover:hover, .gradient_bright_hover:hover *, .gradient_dark_hover:hover, .gradient_dark_hover:hover * { color:#fff !important } show me your css not just an edge case Christoph Reinartz - @pistenprinz
  3. 3. specifically… may i introduce you to the world’s creepiest cascade? Christoph Reinartz - @pistenprinz #banner_topnav div.tab_links li div.dropdown table.localization a.plain:hover { … }
  4. 4. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
  5. 5. AND THEN I SAID TO THOSE GUYS AT TRIVAGO TEAR DOWN THIS WALL OR I WILL DO IT!
  6. 6. • 70k LOC Scss with deep nesting • Incomplete Coding Styleguides • Incomplete Code Analysis • Missing Workflow & Styleguide audits architecture & processes Christoph Reinartz - @pistenprinz
  7. 7. the result spaghetti code (not delicious!!) • longer development times • many bugfixes needed - instable UI • hard to maintain consistency • issues with scalability and reusability Christoph Reinartz - @pistenprinz
  8. 8. Christoph Reinartz - @pistenprinz fifty shades of grey or why to use color variables in sass
  9. 9. • about 50 features per release cycle • about 60 devs working on the core product • ~ 80 concurrent layout variation A/B tests • ~ 4 billion requests per months • 50 platforms the trivago scale some numbers Christoph Reinartz - @pistenprinz
  10. 10. • Prototype and bootstrap code with design facelifts • Code Styleguide and Code linters • Styleguides generated with KSS for bigger Features in 2013 • Monitoring for CSS on the way iterative improvements Christoph Reinartz - @pistenprinz
  11. 11. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
  12. 12. specificity graph nowadays better curves Christoph Reinartz - @pistenprinz
  13. 13. • Build solid CSS framework base • Introduced pattern library at trivago • Massive workflow improvements and more visibility • Proof of concept for Living Design Systems current status status quo Christoph Reinartz - @pistenprinz
  14. 14. Christoph Reinartz Frontend Developer @pistenprinz thanks i’m done Christoph Reinartz - @pistenprinz
  15. 15. Slide 1: https://www.flickr.com/photos/jef_safi/2271196842/ Slide 7: https://www.flickr.com/photos/fcrippa/1423941532/ sources Christoph Reinartz - @pistenprinz

×