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

11.
ideal state reality

12.
Massive?

13.
Massive?

14.
Massive?

15.
Massive?
37,500 lines of CSS

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

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

18.
then now

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

20.
Common problems
Lack of visibility

21.
Common problems
One-off and
duplicate code

22.
Common problems
Lack of reusable code

23.
Common problems
Inconsistencies
across the site

24.
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

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

26.
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

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

28.
Disconnect
There is a disconnect
between designers and
developers

29.
Disconnect
Style guides are
always out of sync

30.
Disconnect
Lacking
discoverability

31.
Disconnect
No visibility into
the implementation

32.
Disconnect
Not speaking the
same language

33.
LIVE STYLE GUIDE

34.
Live style guide
Lives with the code

35.
/*
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>
*/

36.
Description
Default
Additional
Views
Code

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

38.
Live style guide
In the browser,
available everywhere

39.
Live style guide
Built automatically

40.
Live style guide
Consistent and
contextual naming

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

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

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

44.
Benefits
Test-driven in the
browser

45.
Benefits
Focus on right details
at the right time

46.
Headline level 3

47.
Headline level 3
Checkbox
Link

48.
Headline level 3
Checkbox
Link
Collapsable headline

49.
Benefits
Blur the lines

50.
Benefits
More collaboration,
easier communication

51.
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

52.
Resources

53.
Resources

54.
Resources

55.
Resources

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

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