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
   

   View Slide

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
   

   View Slide

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
   { … }
   

   View Slide

4. specificity graph 2012
   consistency is measurable
   Christoph Reinartz - @pistenprinz
   

   View Slide

5. AND THEN I SAID TO THOSE GUYS AT TRIVAGO
   TEAR DOWN THIS WALL OR I WILL DO IT!
   

   View Slide

6. • 70k LOC Scss with deep nesting
   • Incomplete Coding Styleguides
   • Incomplete Code Analysis
   • Missing Workflow & Styleguide
   audits
   architecture & processes
   Christoph Reinartz - @pistenprinz
   

   View Slide

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
   

   View Slide

8. Christoph Reinartz - @pistenprinz
   fifty shades of grey
   or why to use color variables in sass
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. specificity graph 2012
    consistency is measurable
    Christoph Reinartz - @pistenprinz
    

    View Slide

12. specificity graph nowadays
    better curves
    Christoph Reinartz - @pistenprinz
    

    View Slide

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
    

    View Slide

14. Christoph Reinartz
    Frontend Developer
    @pistenprinz
    thanks
    i’m done
    Christoph Reinartz - @pistenprinz
    

    View Slide

15. Slide 1:
    https://www.flickr.com/photos/jef_safi/2271196842/
    Slide 7:
    https://www.flickr.com/photos/fcrippa/1423941532/
    sources
    Christoph Reinartz - @pistenprinz
    

    View Slide