about:consistency - lesson learned: the hard way

4.924 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.924
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3.169
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×