CSS Scraping and Analysis

This talk was given at Analyze Boulder on January 7th 2015. It announced some work I had done scraping and analyzing CSS files from 20,000 sites and my findings.

I scraped CSS files from 20,000 websites and compiled them into some charts and graphs that will affect my web development work at Quick Left. I learned about responsive breakpoints, color usage, progressive enhancement, and more.

Transcript

1. CSS in the Wild Alex McPherson, Engineering Lead + Quick Left
2. Website? Anyone seen one that looks bad?
4. The web moves fast Writing CSS is hard
5. I Studied How Websites Are Made • 20,000 random sites’ CSS Files • Put into PostgreSQL • Explored with RStudio
6. Findings! If you’re a web developer, these are interesting. VERY If you’re a not… they’re interesting. sort of
7. Finding #1: Colors!
8. Finding #1: Colors! Top 10:
9. Finding #1: Colors! Top 10: ???
10. Finding #1: Colors! Top 10: That little guy is #428BCA
11. Finding #1: Colors! Top 10: That little guy is #428BCA He comes from Twitter Bootstrap
12. Finding #1: Colors! Bootstrap is seeing very wide adoption
13. Finding #1: Colors! Bootstrap is seeing very wide adoption Adapt our internal training
14. Finding #2: CSS Quality
15. Finding #2: CSS Quality CSS looks like this:
16. Finding #2: CSS Quality CSS looks like this:
17. Finding #2: CSS Quality CSS looks like this: Usually…
18. Finding #2: CSS Quality There are about 80 valid things to control with CSS
19. Finding #2: CSS Quality We found people tried to use 300! There are about 80 valid things to control with CSS
20. Finding #2: CSS Quality We found people tried to use 300! There are about 80 valid things to control with CSS
21. Finding #2: CSS Quality We found people tried to use 300! There are about 80 valid things to control with CSS
22. Finding #2: CSS Quality This is both funny… and horrifying
23. Finding #2: CSS Quality is Lacking
24. Finding #2: CSS Quality is Lacking People are writing junky CSS
25. Finding #2: CSS Quality is Lacking People are writing junky CSS This leads to junky websites
26. Finding #2: CSS Quality is Lacking People are writing junky CSS This leads to junky websites We use tools to write less junky CSS
27. Finding #3: Breakpoints
28. Finding #3: Breakpoints When a site changes layout:
29. Finding #3: Breakpoints It’s good for the viewer! Looks right on any device. It’s called ‘responsive’
30. Finding #3: Breakpoints Making sites like this is THE WORST
31. Finding #3: Breakpoints Welcome to my hell:
32. Finding #3: Breakpoints I need to pick the widths where it ‘jumps’ from one layout to another. The more breakpoints I have to take into account, the harder styling a page is.
33. Finding #3: Breakpoints You can find breakpoints in CSS You can graph them!
34. Finding #3: Breakpoints
35. Finding #3: Breakpoints This is great news!
36. Finding #3: There is only 1 breakpoint
37. Finding #3: There is only 1 breakpoint Most sites respect ~768px (This is where most tablets start)
38. Finding #3: There is only 1 breakpoint I can tell my designer to start with just 2 layouts
39. Finding #3: There is only 1 breakpoint My job is easier
40. The web moves fast Writing CSS is hard
41. Seeing how the rest of the world does it is valuable
42. Seeing how the rest of the world does makes us better at our jobs
43. Questions? @alexmcpherson mcphersonindustries.com/css-scraping