$30 off During Our Annual Pro Sale. View Details »

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

Christoph Reinartz

May 28, 2015
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

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