about:consistency - lesson learned: the hard way

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

Transcript

1. about:consistency lessons learned - the hard way Christoph Reinartz - @pistenprinz 28 Mai 2015
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. 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. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
5. AND THEN I SAID TO THOSE GUYS AT TRIVAGO TEAR DOWN THIS WALL OR I WILL DO IT!
6. • 70k LOC Scss with deep nesting • Incomplete Coding Styleguides • Incomplete Code Analysis • Missing Workflow & Styleguide audits architecture & processes Christoph Reinartz - @pistenprinz
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. Christoph Reinartz - @pistenprinz fifty shades of grey or why to use color variables in sass
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. • 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. specificity graph 2012 consistency is measurable Christoph Reinartz - @pistenprinz
12. specificity graph nowadays better curves Christoph Reinartz - @pistenprinz
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. Christoph Reinartz Frontend Developer @pistenprinz thanks i’m done Christoph Reinartz - @pistenprinz
15. Slide 1: https://www.flickr.com/photos/jef_safi/2271196842/ Slide 7: https://www.flickr.com/photos/fcrippa/1423941532/ sources Christoph Reinartz - @pistenprinz