New approaches for designing in the responsive age. These slides are from a presentation I did at the NYC Responsive Web Design Meetup on 14 June.
It includes a responsive case study from my work at R/GA and a look at new techniques responsive designers are using around the world to improve their workflow.
Huge thanks to @brad_frost, @laurenbugeja and Michael Barrish.
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
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
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
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
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
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
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
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
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
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
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