Panel given by Alex Breuer, Dan Gardner and Dave Rupert @SXSW on 11th March 2012

1. Aboutis WYSIWYS
What you see what you spec’d
Alex Breuer, Creative Director, The Guardian
Dan Gardner, Founder & Creative Director, Code & Theory
Dave Rupert, Lead Developer, Paravel
#WYSIWYS
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 1
Monday, 18 March 13

2. Learnings from
Code and Theory
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 2
Monday, 18 March 13

3. How it’s done
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 3
Monday, 18 March 13

4. 1 2 3
4 5 6
7 8 9
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 4
Monday, 18 March 13

5. 1 2
3 4
5 6
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Monday, 18 March 13

6. 1
2
3
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Monday, 18 March 13

7. a
b
c
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Monday, 18 March 13

8. Done. a
b
c
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Monday, 18 March 13

9. Done. a
b
c
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Thanks.
Monday, 18 March 13

10. The biggest challenge
of Responsive Design
is decision-making
Purpose, Platform, Prioritization, Process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 10
Monday, 18 March 13

11. Definitions Help
Device Specific Individually coded & designed for
specific device (ie. mdot)
Adaptive Designing and developing elements for
targeted devices. (back-end serves up
specific device code for device)
Responsive One front-end Code base that optimally
presents designs across devices. (often
fluid design)
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 11
Monday, 18 March 13

12. Purpose, Platform, Prioritization, Process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 12
Monday, 18 March 13

13. System Design
The design system must be purpose driven
G
G
CE
N
IN
HI
ER
ET
IS
M
RK
BL
M
A
CO
PU
M
TYPOGRAPHICALLY IMAGE
DRIVEN DRIVEN
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 13
Monday, 18 March 13

14. Monday, 18 March 13

15. Monday, 18 March 13

16. Monday, 18 March 13

17. Content Strategy
The Content Determines Content considerations include:
The Design
- Formats
- Frequency
- Pathing and desired user flow
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 17
Monday, 18 March 13

18. Purpose, Platform, Prioritization, Process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 18
Monday, 18 March 13

19. Consider the
Ecosystem
How does this responsive site exist with
other products on the same devices
RESPONSIVE
REPLICATED DIFFERENTIATED
NATIVE
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 19
Monday, 18 March 13

20. Adaptive Design in a
Responsive Framework
Device Specific Differentiation Considerations and Challenges:
- Technology (cms management and time)
- Content (what’s needed on what device?)
- Functionality (where can we add value?)
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 20
Monday, 18 March 13

21. App like, not web like
This Isn’t Page Design, - Gestures + Animation
It’s Interaction Design - Sandboxes for freedom and extension
- Leverage functionality and assets
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 21
Monday, 18 March 13

22. Items
Page
Templates
Modules
Librarys
(Outfits)
Custom Pages
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 22
Monday, 18 March 13

23. Monday, 18 March 13

24. Purpose, Platform, Prioritization, Process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 24
Monday, 18 March 13

25. System Design
Page Templates Custom Pages Librarys (outfits) Modules Items
Design Design
Big Small
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 25
Monday, 18 March 13

26. It’s not mobile first
first,
its all platforms at once
More, But Simple
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 26
Monday, 18 March 13

27. Midpoints or
Breakpoints
TIME TO MARKET
LONGEVITY OF EXPERIENCE
RESOURCES
TARGET DEVICES
COMPLEXITY OF BEHAVIORAL USAGE
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 27
Monday, 18 March 13

28. Monday, 18 March 13

29. Purpose, Platform, Prioritization, Process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 29
Monday, 18 March 13

30. How It’s Used
Using the system is as important Organizational and Workflow
as the system itself considerations include:
- Org Structure, Resources
- CMS access, authority and hierarchy
- Content creation process
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 30
Monday, 18 March 13

31. How We Do It
Constantly Refining Our Process Some of our best practices include:
- Team composition
- Argue early and often
- Prototype early and often
- Tools: Indesign & Keynote
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 31
Monday, 18 March 13

32. Design Is Not Done...
...Until It’s Developed
and it’s still probably not done.
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 32
Monday, 18 March 13

33. The empire
Premium mobile technology
Intuitive UX and
reading experience
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 33
Monday, 18 March 13

34. A new hope
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 34
Monday, 18 March 13

35. Old technology
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 35
Monday, 18 March 13

36. A new hope (again)
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 36
Monday, 18 March 13

37. not the droids...
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 37
Monday, 18 March 13

38. A new hope (AGAIN!)
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 38
Monday, 18 March 13

39. RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 39
Monday, 18 March 13

40. the easy bit Display area
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 40
Monday, 18 March 13

41. equivalence Content and template
bundle
Text size/dpi ranges
Grid based on baselines
and and columns scaled
to image aspect ratio
Number of columns
Number of rows
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 41
Monday, 18 March 13

42. The hard bit
Estimation
Distribution
Filter
Test
Render
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 42
Monday, 18 March 13

43. The hard bit
Estimation
Minimum pages for compulsory
content to minimise white space
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 43
Monday, 18 March 13

44. The hard bit
Distribution
Using rules defined for display area.
number of items per page
hierachy and position across pages
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 44
Monday, 18 March 13

45. The hard bit
Filter
Test valid combinations of elements defined by
distribution
Best combination of content sizes to fill minimum
number of pages in desirable paced sequence
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 45
Monday, 18 March 13

46. The hard bit
most significant sizes of the most significant content
items on the most significant pages
Cartesian product sequences to limit combinations
(a more important than b)
[a1, a2, a3] [b1, b2, b3]
[a1, b1] [a1, b2] [a1, b3] [a2, b1] [a2, b2] etc
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 46
Monday, 18 March 13

47. The hard bit
Test
Configure a limit to the number of
tests before optimum is chosen
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 47
Monday, 18 March 13

48. The hard bit
Render
Specific rules and precedents and overides from cms
during distribution and filtering
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 48
Monday, 18 March 13

49. RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 49
Monday, 18 March 13

50. Responsive
Deliverables
Monday, 18 March 13

51. Ye olde way: Pages
PSD js Welcome to my
css
“Hey, code this.” html FTP Shit Website
Monday, 18 March 13

52. Does not account for
complexity.
Monday, 18 March 13

53. “Developers should build a program
out of simple parts connected by well
defined interfaces, so problems are
local, and parts of the program can be
replaced in future versions to support
new features.”
The UNIX Philosophy
Monday, 18 March 13

54. Monday, 18 March 13

55. Monday, 18 March 13

56. The new way: Modules
Module 1 Module 2
js js Welcome to my
css css
html html Build Process Website
Monday, 18 March 13

57. How then to
organize these
modules?
Monday, 18 March 13

58. SMACSS by Snook
http://smacss.com
Monday, 18 March 13

59. Self-realization!!
Theme
State (:hover)
Module (.module)
Layout (grid & structure)
Base (reset & type defaults)
SMACSS Organization of CSS
Monday, 18 March 13

60. .module {
background: pink;
}
.module:hover {
opacity: 0.8;
}
.module--blue {
background: blue;
}
Monday, 18 March 13

61. Brand Identity
System for Web
Monday, 18 March 13

62. Monday, 18 March 13

63. Monday, 18 March 13

64. With RWD we’re
creating systems,
not pages.
Monday, 18 March 13

65. Flexible grid Carousels
Responsive typography Dropdowns
RWD images plan Pagination
Scalable navigation Data tables
Performance budget Icon fonts
Accessible form controls more...
Monday, 18 March 13

66. Monday, 18 March 13

67. Interactive
Style Guides,
Prototypes,
[insert buzzword],
Monday, 18 March 13
etc.

68. Demo or it
didn’t happen
isn’t billable.
Monday, 18 March 13

69. Tiny bootstraps,
for every client.
Monday, 18 March 13

70. Uhh..Works on
iPhone.
Monday, 18 March 13

71. Thanks
@ajbreuer
@danjgardner
@davatron5000
#WYSIWYS
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 71
Monday, 18 March 13