about:consistency - lesson learned: the hard way

about:consistency - lesson learned: the hard way

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

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

May 28, 2015
Tweet

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