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

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