Style Guides: Why Bother?

Talk given at SmashingConf Whistler, December 10, 2014
Summary:
Style guides often seem like a lot of work, why would you want to bother doing one? A style guide can increase performance of your site, the quickness with which you can add on new features and sections to your site or application, and it's great documentation for new team members to get up-to-speed. In this session we'll take a look at the benefits of creating and maintaining a style guide. In addition, we'll take a look at a few different case studies of style guides; how to create them, how they were useful in cutting code, and how they were used to do design changes quickly.

Transcript

1. Style Guides:
   Why bother? susanjeanrobertson.com @susanjrobertson
2. What I’ll cover ✴ What? ✴ Why? ✴ How I’ve incorporated them ✴ Different guides I’ve created ✴ Maintaining once you’ve got ‘em ✴ Resources
3. First Glimpse http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/
4. 24 Ways, Anna Debenham
5. Starbucks Guide http://www.starbucks.com/static/reference/styleguide/
6. Guides start popping up
7. How I define style guide: ✴ Not a brand guideline ✴ A living document ✴ Made with the site/application code
8. But wait, what’s a Pattern Library? ✴Style guide can be more broad ✴Pattern library is more fully formed framework http://webdesign.tutsplus.com/articles/front-end-style-guides-your-questions-answered--cms-21088
9. Different Guides ✴Branding ✴Design language ✴Voice and Tone ✴Writing ✴Pattern Libraries ✴Code Style Guides http://bradfrost.com/blog/post/style-guides/
10. I’m talking about… Code Style Guides
11. Why?
12. Reference for the whole team Everyone knows what to call different modules. South Tees Hospital
13. Usage of modules documented Yelp
14. Variables well documented Yelp Code for America Easily reference so no duplicates are made
15. Quick testing cross browser Twitter Bootstrap MailChimp
16. Code as a system Modular CSS becomes a system of building blocks
17. Smaller CSS files https://www.flickr.com/photos/crichard/445904906
18. Fast build outs https://www.flickr.com/photos/state_library_south_australia/3925493340/in/photostream/
19. Nice deliverable for client http://daverupert.com/2013/04/responsive-deliverables/
20. https://www.flickr.com/photos/katerha/11170069615/in/photolist-i24wxa- dFp3se-3Quywb-4FUtxw-5wYtS5-4sWtm5-8ysCWH-kpKhWK-5Nt2wR- fkDnhs-5r4VBB-eypCE4-drFNwq-7ZqRad-5BrqHc-dob2NF- oYVf4b-8gxHUB-4oPsYr-6S2ept-ibJwbz-jMVU5V-jMXtuE-6HBG6Z-dRemYd- dTALDp-ezeBXY-6TKBMv-7s247r-4VPhuq-dTGpib- dTGpuJ-3RgRPj-3G3KRD-8xssw7-6S6i8E-6S6ixb-6S2e5B- dTGpkf-7Y1UJM-8KyNtz-977k9X-aix2p3-aWr9pT-j5tMf2- kRyPt1-78N8Rt-8sjHyA-8dahdx-PfuyW
21. Workflows
22. VISUAL INVENTORY
23. ASK
24. BUILD
25. MODULAR CODE
26. DESIGNOVELOPMENT
27. https://www.flickr.com/photos/wtlphotos/2126310866/in/photolist-4eTU9b-7haL7Z-5ZqHBx-7Bi1KX-fv1tg9-6FgNAk-hjNGkg-51jbSM-4DSeGT-63uxxe-5nj99n-4D54eb-79qo6v-9BkCQW- fvHsFh-4zbEuQ-8rMB2Z-pus25Y-8LMwmw-8J3PGm-63tA3b-8LMvqY-e3TGT4-7EcQ83-ahBQcb-dDpYHj-52jVJr-5SDeM9-8nPCcL-V5RpY-4c7gc2-kCYZh-4rNBAv-dnfYkU-dnfW6V-dnfYAW-6hEvh- a92bW3-9w6UQi-6rvNLH-6EzPaz-fGHurR-bCv7e9-5zqa18-9ku21x-4s5dTa-87GJyq-5WVZME-cphVjf-ao8s16
28. Editorially - no style guide https://www.flickr.com/photos/87913776@N00/3241512841/in/photolist-56L87o-63fac2-658UVk-k3LrVu-oxk4rJ-aD7kLK-4HTNRh-66Mqfb-79SbCD-fw8wRV-9FqSxL-bNitV2-7hpHM-5Fno5H-5WrAQr-5VjfgP-q7grb-5RvBKA-ahbzvH-bQ5Xnz-5yKfjC-8XBZci-kFGF2A- j5HcFj-58Wd3j-dZdXNp-fBkfw4-aJ8hrP-5QBnVu-mAdhmK-7hpHZ-bLskxr-dXiCeu-9e6w16-sMBa7-fQrqZ-bxxBGY-bxxpdf-6JSmCF-89iXh6-hLfUJ1-8Hpd7V-d9on9f-bLs6nD-rzobN-AT2Kh-ddsEi2-ddsQN4-7g8nim-5Ai7NC
29. Because
30. Create style guide to learn
31. Changes as application does
32. Common language
33. Use to make prototypes
34. Where I ended up https://github.com/Editorially/styleguide
35. CSS Audit https://www.flickr.com/photos/joebeone/1764153258
36. Ugly useful is what matters
37. Check design changes
38. Imprint first guide http://imprint.us/styleguide
39. Imprint post redesign http://imprint.us/styleguide
40. Specific style guides
41. FiftyThree Type Style Guide http://www.fiftythree.com/styleguide/typography http://blog.typekit.com/ 2014/10/22/creating-a-type- style-guide/
42. Maintenance
44. https://twitter.com/susanjrobertson/status/530062285826711552
45. Digital Standards Team
46. Simpler visual index for devs
47. Rizzo Ian Feather’s solution for Lonely Planet See more: http://ianfeather.co.uk/a-maintainable-style-guide/
48. Use tools KSS or Hologram or …. https://www.flickr.com/photos/mr_bmonroe/8541292238
49. A Champion https://www.flickr.com/photos/8136496@N05/4413618295/in/photolist-7J1WXa-kuNrm-4WcpFd-8LeSUV-82TTUN-cXouyj-9P4bue-ee5RtX-g1KQ9p-g1KZ7p-g1KxNh-g1KHa3-g1KXpN-aZmXoe-gwmN7H-gwmAC2-g1KNQJ-g1L4mK-g1Le9R- g1EDcJ-gwmFi5-g1L3vt-gwm16W-6DcsQ1-ee5RwZ-8mmjXp-8mpsaA-2JkLbj-6xQELM-bxTfP-5kD44t-ijhgi-e9BEDf-9UdGLu-axjoZX-axjn58-axn3zh-dKbKER-gGt1eD-cpeWRG-pEoJbj-g1LfMa-g1L6Lr-axn5bG-axjnT4-axn5rC-axn4tC- axjnng-8KytM-4JwKwD
50. UX review team https://www.flickr.com/photos/72213316@N00/4429512983
51. ✴Use it to test design changes ✴Make it part of your workflow ✴Use it for feature development Other possibilities:
52. Resources
53. Roundup of all the things https://styleguides.io
54. Remember…
55. Benefits are worth the upfront time https://www.flickr.com/photos/smemon/4961717384
56. Ugly is OK, worry about usefulness https://www.flickr.com/photos/54115831@N07/15485386157
57. Cause when you have one.....
58. Thank you susanjeanrobertson.com @susanjrobertson Thanks to Flickr users who share their photos under Creative Commons license. Special thanks to Ethan Marcotte, Jason Grigsby, Anna Debenham, Tim Kadlec, Matthew Oliphant, Kitt Hodsden, Jonathan Snook, and Livia Labate for their invaluable feedback and support as I wrote this talk.