What would appear on the surface to be a simple change like updating the look of a button or changing the color of a link can turn out to be a huge effort. When everyone understands what can be reused and what needs to be newly created, the team can focus discussion on how to attain the best designs.

1. SIMPLIFYING
MASSIVE
CHANGES WITH A
LIVE STYLE GUIDE
Mark Meeker
@meeker

2. then now

3. 2001 2004
2010 2012

4. 2001 2004 2010 2012

5. While we’re doing this project,
can we make a small change to
the button?

6. While we’re doing this project,
can we make a small change to
the button?
Sure, that’s easy!

7. While we’re doing this project,
can we make a small change to
the button?
Sure, that’s easy!
Everywhere?

8. While we’re doing this project,
can we make a small change to
the button?
Sure, that’s easy!
Everywhere?
Umm...

9. Making massive changes
Global look and feel updates
can take significant effort.

10. ideal state

12. ideal state reality

13. Massive?

14. Massive?

15. Massive?

16. Massive?
37,500 lines of CSS

17. #1F5DF2
#5ABCF3
#FC6621
#1CBC20
#89EB51

18. #1F5DF2
#5ABCF3
#FC6621
#1CBC20
#89EB51
14 shades of “Orbitz blue”

19. then now

20. When developer conveniences trump
user inconveniences, it’s worthwhile
to remember just who it is we build
websites for.
Scott Jehl

21. Common problems
Lack of visibility

22. Common problems
One-off and
duplicate code

23. Common problems
Lack of reusable code

24. Common problems
Inconsistencies
across the site

25. All this re-creation and re-invention isn't just
inefficient, it leaves the team open to problems.
Because it's not the sexy part of their project, it's
likely to get less attention, resulting in an
unusable and frustrating experience.
Jared Spool

26. Challenge
Need to be able to
constantly and consistently
evolve the look and feel.

27. A style guide is a set of standards for
the writing and design of documents,
either for general use or for a specific
publication, organization or field.
Wikipedia

28. Style guide
• Colors • Buttons
• Typography • Containers
• Iconography • Layouts
• Form elements • Navigation elements
• Alerts, messages • Spacing, alignment

31. Disconnect
There is a disconnect
between designers and
developers

32. Disconnect
Style guides are
always out of sync

33. Disconnect
Lacking
discoverability

34. Disconnect
No visibility into
the implementation

35. Disconnect
Not speaking the
same language

37. LIVE STYLE GUIDE

38. Live style guide
Lives with the code

40. /*
Styleguide: List
Common unordered lists.
.standard - Bulleted list
.pipedList - Linear list
<ul class="$modifier">
<li>Tickets are non-refundable.</li>
<li>Tickets are non-transferable.</li>
</ul>
*/

42. Description
Default
Additional
Views
Code

43. We will encourage you to develop
the three great virtues of a
programmer:
laziness, impatience and hubris.
Larry Wall

45. Live style guide
In the browser,
available everywhere

47. Live style guide
Built automatically

48. Live style guide
Consistent and
contextual naming

49. The two most difficult things in
Computer Science are cache
invalidation, naming things
and off-by-one errors.

51. Can we change all #2299BB to
#00A500?

52. Can we change all #2299BB to
#00A500? But, only when used
on a link, not a border.

55. Benefits
Test-driven in the
browser

58. Benefits
Focus on right details
at the right time

64. Headline level 3

65. Headline level 3
Checkbox
Link

66. Headline level 3
Checkbox
Link
Collapsable headline

69. Benefits
Blur the lines

70. Benefits
More collaboration,
easier communication

71. See it 3 times? Add it.
1. Discover and design
2. Define and name
3. Develop, test and add
4. Share it and use it

72. Resources

73. Resources

74. Resources

75. Resources

76. Websites are systems rather than
pages and as soon as we stop
perceiving them as that, the better.
Anna Debenham

77. THANK
YOU!
Mark Meeker
mark.meeker@orbitz.com