1. Design process in
the responsive age
A UX perspective
Pon Kattera Senior Interaction Designer R/GA
@pkattera
14 June 2012: NYC Responsive Web Design Meetup

2. TONIGHT
A little about me
Responsive process (alpha)
Responsive process (beta)
Resources and tips getting started
Questions
2

3. TL;DR
Our job now is to create future friendly design
systems (not fixed pixel width interfaces).
This requires a change in process.
3

4. A LITTLE ABOUT ME
I’m a senior Interaction Designer at R/GA
I’m an Australian
I’m loving New York!
4

5. BACK IN 2009
Fixed width pixel designs were all the rage
Desktop screens were getting larger
Mobile users were visiting our sites
And yes, I’ll admit it. Back then,
I was recommending 960px fixed width.
5

6. MY 2010

7. 2011:
GOODBYE TIMBUKTU,
HELLO NEW YORK
What’s this “responsive web
design” thing you speak of?
7

8. SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN?
1. A flexible, grid based layout
2. Flexible images and media, and
3. Media Queries
Ethan Marcotte, Responsive Web Design
8

9. RESPONSIVE WEB DESIGN VS
ADAPTIVE WEB DESIGN
“Adaptive web design is about
ADAPTIVE
creating interfaces that adapt to
the user’s capabilities (in terms of
both form and function). To me,
Adaptive web design is just THIS IS
another term for progressive RESPONSIVE
enhancement…”
Aaron Gustafson, Adaptive Web Design via Brad Frost
9

10. DOES THIS PROCESS
SOUND FAMILIAR? PLANNING
AND STRATEGY
USER
RESEARCH
WIREFRAMES
VISUAL
DESIGN
DEV
TEST
10

11. DOES THIS PROCESS
SOUND FAMILIAR? PLANNING
AND STRATEGY
CONTENT
STRATEGY
USER
RESEARCH
WIREFRAMES
VISUAL
DESIGN
DEV
TEST
11

12. DOES THIS PROCESS
SOUND FAMILIAR? PLANNING
AND STRATEGY
CONTENT
STRATEGY
USER
RESEARCH
Lorem ipsum
WIREFRAMES
Lorem ipsum COPY
VISUAL
DESIGN
DEV
TEST
12

13. DOES THIS PROCESS
SOUND FAMILIAR? PLANNING
AND STRATEGY
USER
RESEARCH
WIREFRAMES
VISUAL
DESIGN
Devs are lumped with too many
DEV important design decisions
TEST
13

14. WHY CHANGE OUR PROCESS?
To increase efficiency
Save time and make money.
To design better websites
Design systems, not fixed pixel width interfaces.
14

15. WHY CHANGE
“RWD comes under criticism for not
being commercially viable. It’s because
it’s trying to be shoe-horned into an
existing, fixed-canvas, inflexible process.”
Mark Boulton, on responsive workflow
15

16. IF YOU DON’T CHANGE
16

17. RESPONSIVE PROCESS
(ALPHA)
17

18. CASE STUDY
FINANCIAL ADVISORS
RESPONSIVE SITE
Project Details:
An existing Financial Advisors website that
includes basic profile information, market
info and company news. Advisors update
their page via a CMS.
The brief:
Redesign the website to make Advisors
more accessible and engaging to both
potential and existing clients.
Current state: Think of the site like a Linkedin for Financial Advisors
18

19. CASE STUDY
FINANCIAL ADVISORS Business
Objectives
User
Goals
RESPONSIVE SITE Increase the number of Prospects: Browse for
prospects contacting Advisors, make a selection,
Advisors contact Advisor
Increase the number of Existing clients: Get
customer referring market updates, login to
Advisors their financial accounts
19

20. TIPS
SHOULD I GO RESPONSIVE FOR MY PROJECT
It depends…
Project context
Budget and timelines
Skill set of your team
Client expectations
20

21. TIPS
Responsive web design may not be the
best option right now for your project
21

22. CASE STUDY
WHY WE WENT Client’s
Business
Supporting
observed user
Facilitate
customer
RESPONSIVE Objectives behavior referrals
To be future Competitive Building
friendly advantage expertise
22

23. CASE STUDY
OUR APPROACH
Mobile first (content first)
responsive web design
Focus on users and content first
before sketching mobile screens
23

24. CASE STUDY
RESPONSIVE PROCESS
User Content Iterative design & development Prototype handover to client
Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech
TEST
PROTOTYPE
USER CONTENT RWD
RESEARCH STRATEGY SKETCH
PROTOTYPE
VISUAL
DESIGN
WIREFRAME
Starting mobile first
24

25. CASE STUDY
USER PERSONAS SCENARIOS
RESEARCH
25

26. CASE STUDY
CONTENT INFORMATION CONTENT
ARCHITECTURE REFERENCE DIAGRAMS
26

27. CASE STUDY
CONTENT INVENTORY AND PRIORITIZATION
Mobile content
Current website content Content inventory reference diagram
* Profile information had a separate content inventory Linear design: think of content
devoid of an interface
27

28. TIPS
CONTENT STRATEGY: A USEFUL RULE OF THUMB
“Generally speaking, your web content is useless
unless it does one or both of the following:
- Supports a key business objective
- Supports a user (or customer) in completing a task”
Kristina Halvorson, Content Strategy for the Web
28

29. TIPS
SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?
29

30. CASE STUDY
ITERATIVE
DESIGN AND
DEVELOPMENT
TEST
PROTOTYPE
SKETCH
VISUAL
DESIGN
WIREFRAME
30

31. CASE STUDY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins: 1
Start with:
STRATEGY
USER RESEARCH
CONTENT STRATEGY
WIREFRAME
* Sketching and testing throughout 31

32. CASE STUDY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins: 1 2
VISUAL DESIGN
Start with:
STRATEGY
USER RESEARCH
CONTENT STRATEGY
WIREFRAME WIREFRAME
PROTOTYPE
* Sketching and testing throughout 32

33. CASE STUDY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins: 1 2 3
VISUAL DESIGN VISUAL DESIGN
Start with:
STRATEGY
USER RESEARCH
CONTENT STRATEGY
WIREFRAME WIREFRAME WIREFRAME
PROTOTYPE PROTOTYPE
* Sketching and testing throughout 33

34. CASE STUDY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins: 1 2 3 4
VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN
Start with:
STRATEGY
USER RESEARCH
CONTENT STRATEGY
WIREFRAME WIREFRAME WIREFRAME
PROTOTYPE PROTOTYPE PROTOTYPE
* Sketching and testing throughout 34

35. CASE STUDY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins: 1 2 3 4 5
VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN
Start with:
STRATEGY
USER RESEARCH
CONTENT STRATEGY
WIREFRAME WIREFRAME WIREFRAME RWD PROTOTYPE
PROTOTYPE PROTOTYPE PROTOTYPE
* Sketching and testing throughout 35

36. CASE STUDY
INTERACTION SKETCH WIREFRAME PROTOTYPE
DESIGN
36

37. CASE STUDY
VISUAL VISUAL GRIDS AND
DESIGN LANGUAGE PROPORTIONS
37

38. 38

39. SPEED
IS A DESIGN
DECISION
39

40. TIPS
RWD ISSUES
What screen sizes should I design?
Start at 320px?
Then what?
40

41. TIPS
RWD ISSUES
How do I select breakpoints?
Breakpoints should be device agnostic
Let page content determine your breakpoints
41

42. CASE STUDY
KEEPING PAGES BALANCED: THE PROBLEM
Advisors can choose between 1 and 20 content modules
Where an
Advisor removes
modules 5 and 9
42

43. CASE STUDY
KEEPING PAGES BALANCED: SOLUTIONS
Content priority Two column layout, dynamic grid layout One column, fixed position side nav
43

44. TIPS
RWD ISSUES
Presenting responsive designs to clients
On screen, with all layouts side by side
PROFILE PAGE
Nothing beats placing the prototype in the client’s hands
44

45. CASE STUDY
PROTOTYPE: Cheap Fast Focus
LOW FIDELITY
[DEMO]
45

46. CASE STUDY
PROTOTYPE: Treatment
of media
Testing visual
styles on
Something the
client can show
HIGH FIDELITY assets more devices their boss
46

47. RESPONSIVE PROCESS
(BETA)
47

48. DESIGNING IN TEXT
Simply, write down the content
for each page in text form.
The text should communicate the
essence of the page.
Tools like Markdown and Pandoc
help convert text files to HTML.
48

49. STYLE TILES BY SAMANTHA WARREN
http://styletil.es/
49

50. HTML STYLE GUIDES
Get started early
Use throughout the project
Add responsive patterns
Pattern Primer by Jeremy Keith Pea.rs by Simple Bits Starbucks style guide
http://patternprimer.adactio.com/ http://pea.rs/ http://www.starbucks.com/static/reference/styleguide/
50

51. DESIGNING IN THE BROWSER
Creating elements and styles in
HTML/CSS
“The most important part here is to use a tool
which doesn’t restrain your creativity. It can be
the browser, Photoshop, Fireworks, InDesign or
anything else that feels right.”
Viljami Salminen, on responsive workflow
51

52. STOP.
COLLABORATE.
AND LISTEN.
52

53. WHAT ARE OTHERS DOING?
53

54. MARK 1. Sketch
BOULTON 2. Prototype
3. Design
4. Iterate
5. Talk
Mark Boulton’s, notes, thoughts and conclusions
Responsive workflow - Responsive Summit, London 24 February 2012
http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow
54

55. STEPHEN 1. Content inventory
2. Content reference wireframes
HAY 3. Design in text (structured content)
4. Linear design
5. Break point graph
6. Design for various breakpoints
7. HTML design prototype
8. Present prototype screenshots
9. Present prototype after revision
10. Document for production
Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012
http://www.slideshare.net/stephenhay/mobilism2012
55

56. VILJAMI
SALMINEN
Viljami Salminen, on responsive workflow, 28 May 2012
http://viljamis.com/blog/2012/responsive-workflow/
56

57. HOW WOULD I APPROACH A NEW
RESPONSIVE PROJECT STARTING TODAY?
57

58. MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
(depending on project context)
USER
RESEARCH
58

59. MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
(depending on project context)
USER CONTENT
RESEARCH STRATEGY
IA and content
reference diagram
59

60. MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
(depending on project context)
USER CONTENT DESIGN
RESEARCH STRATEGY IN TEXT
60

61. MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
VISUAL
(depending on project context)
STYLETIL.ES
USER CONTENT DESIGN
RESEARCH STRATEGY IN TEXT SKETCH
CONVERT
TO HTML
61

62. MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
VISUAL TEST
(depending on project context)
STYLETIL.ES
PROTOTYPE
USER CONTENT DESIGN
RESEARCH IN TEXT SKETCH
STRATEGY
VISUAL
DESIGN
CONVERT WIREFRAME
TO HTML
Skipping formal reviews of mid-range
(e.g. tablet) wireframes and visuals
62

63. HTML STYLE
GUIDE
RWD
PROTOTYPE
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
VISUAL TEST
(depending on project context)
STYLETIL.ES
PROTOTYPE
USER CONTENT DESIGN
RESEARCH IN TEXT SKETCH
STRATEGY
VISUAL
DESIGN
CONVERT WIREFRAME
TO HTML
Skipping formal reviews of mid-range
(e.g. tablet) wireframes and visuals
63

64. RESPONSIVE RESOURCES
64

65. Start here
GETTING http://www.alistapart.com/articles/responsive-web-design
STARTED http://futurefriend.ly/
Read these books
Get knee deep in code
http://www.html5rocks.com/en/mobile/responsivedesign/
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
65

66. RESPONSIVE Stephan Hay’s Responsive Design Workflow
http://www.slideshare.net/stephenhay/mobilism2012
PROCESS Viljami Salminen’s responsive workflow
http://viljamis.com/blog/2012/responsive-workflow/
Mark Boulton’s Responsive workflow notes from the Responsive Summit:
http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow
Drew Clemen’s Design Process in the Responsive Age
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Ben Callahan’s Hands-on Responsive Web Design
https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12
Yellow Pencil’s Responsive web design process
http://responsiveprocess.com/
66

67. RESPONSIVE As RWD evolves, so will our process
RESOURCES RESS: http://www.lukew.com/ff/entry.asp?1392
Responsive images: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
CSS4 media queries to tackle touch: http://www.netmagazine.com/news/css4-media-queries-tackle-touch-121980
Optimizing for Retina Screens: http://bradfrostweb.com/blog/mobile/hi-res-optimization/
Stay up to date
@rwd @grigs @stephanierieger
@beep @scottjehl @bryanrieger
@brad_frost @stephanhay @globalmoxie
@lukew @adactio @wilto
and more: http://twitter.com/pkattera/rwd
67

68. THANKS
@PKATTERA
UXRAVE.COM
68