design process in the responsive age
DESCRIPTION
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.TRANSCRIPT
![Page 1: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/1.jpg)
Design process in the responsive ageA UX perspective
Pon Kattera Senior Interaction Designer R/GA@pkattera
14 June 2012: NYC Responsive Web Design Meetup
![Page 2: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/2.jpg)
TONIGHTA little about me
Responsive process (alpha)
Responsive process (beta)
Resources and tips getting started
Questions
2
![Page 3: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/3.jpg)
TL;DR
Our job now is to create future friendly design
systems (not fixed pixel width interfaces).
This requires a change in process.
3
![Page 4: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/4.jpg)
A LITTLE ABOUT ME
I’m a senior Interaction Designer at R/GA
I’m an Australian
I’m loving New York!
4
![Page 5: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/5.jpg)
BACK IN 2009
And yes, I’ll admit it. Back then,
I was recommending 960px fixed width.
Fixed width pixel designs were all the rage
Desktop screens were getting larger
Mobile users were visiting our sites
5
![Page 6: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/6.jpg)
MY 2010
![Page 7: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/7.jpg)
2011:GOODBYE TIMBUKTU,HELLO NEW YORK
What’s this “responsive web design” thing you speak of?
7
![Page 8: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/8.jpg)
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
![Page 9: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/9.jpg)
ADAPTIVE
via Brad Frost
RESPONSIVE WEB DESIGN VSADAPTIVE WEB DESIGN
“Adaptive web design is about
creating interfaces that adapt to
the user’s capabilities (in terms of
both form and function). To me,
Adaptive web design is just
another term for progressive
enhancement…”
THIS IS RESPONSIVE
Aaron Gustafson, Adaptive Web Design
9
![Page 10: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/10.jpg)
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
10
TEST
![Page 11: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/11.jpg)
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
CONTENTSTRATEGY
11
TEST
![Page 12: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/12.jpg)
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
CONTENTSTRATEGY
COPY
Lorem ipsum
Lorem ipsum
12
TEST
![Page 13: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/13.jpg)
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
Devs are lumped with too many important design decisions
13
TEST
![Page 14: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/14.jpg)
WHY CHANGE OUR PROCESS?
To increase efficiency
Save time and make money.
To design better websites
Design systems, not fixed pixel width interfaces.
14
![Page 15: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/15.jpg)
“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
WHY CHANGE
15
![Page 16: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/16.jpg)
IF YOU DON’T CHANGE
16
![Page 17: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/17.jpg)
RESPONSIVE PROCESS (ALPHA)
17
![Page 18: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/18.jpg)
FINANCIAL ADVISORS RESPONSIVE SITEProject 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.
18
CASE STUDY
Current state: Think of the site like a Linkedin for Financial Advisors
![Page 19: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/19.jpg)
FINANCIAL ADVISORS RESPONSIVE SITE
Business Objectives
Increase the number of prospects contacting Advisors
Increase the number of
customer referring Advisors
19
CASE STUDY
User Goals
Prospects: Browse for Advisors, make a selection, contact Advisor
Existing clients: Get
market updates, login to their financial accounts
![Page 20: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/20.jpg)
SHOULD I GO RESPONSIVE FOR MY PROJECT
It depends…
Project context
Budget and timelines
Skill set of your team
Client expectations
20
TIPS
![Page 21: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/21.jpg)
21
TIPS
Responsive web design may not be the
best option right now for your project
![Page 22: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/22.jpg)
WHY WE WENTRESPONSIVE
Client’sBusiness Objectives
22
CASE STUDY
Supporting observed user behavior
Facilitate customer referrals
To be future friendly
Competitive advantage
Building expertise
![Page 23: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/23.jpg)
OUR APPROACH
Mobile first (content first)responsive web design
Focus on users and content firstbefore sketching mobile screens
23
CASE STUDY
![Page 24: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/24.jpg)
USER RESEARCH
CONTENTSTRATEGY
RWDPROTOTYPE
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
Iterative design & developmentUser Content
Starting mobile first
Prototype handover to client
Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech
24
RESPONSIVE PROCESSCASE STUDY
![Page 25: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/25.jpg)
25
CASE STUDY
USERRESEARCH
PERSONAS SCENARIOS
![Page 26: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/26.jpg)
26
CASE STUDY
CONTENT INFORMATIONARCHITECTURE
CONTENTREFERENCE DIAGRAMS
![Page 27: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/27.jpg)
Current website content Content inventoryMobile content reference diagram
* Profile information had a separate content inventory Linear design: think of content devoid of an interface
CONTENT INVENTORY AND PRIORITIZATIONCASE STUDY
27
![Page 28: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/28.jpg)
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”
28
Kristina Halvorson, Content Strategy for the Web
TIPS
![Page 29: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/29.jpg)
SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?
29
TIPS
![Page 30: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/30.jpg)
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
ITERATIVE DESIGN AND DEVELOPMENT
CASE STUDY
30
![Page 31: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/31.jpg)
Client check ins: 1
WIREFRAME
* Sketching and testing throughout
Start with:
31
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
![Page 32: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/32.jpg)
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
32
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
![Page 33: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/33.jpg)
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
33
3
VISUAL DESIGN
PROTOTYPE
WIREFRAME
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
![Page 34: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/34.jpg)
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
34
4
PROTOTYPE
VISUAL DESIGN
3
VISUAL DESIGN
PROTOTYPE
WIREFRAME
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
![Page 35: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/35.jpg)
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
35
4
PROTOTYPE
VISUAL DESIGN
5
RWD PROTOTYPE
3
VISUAL DESIGN
PROTOTYPE
WIREFRAME
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
![Page 36: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/36.jpg)
CASE STUDY
INTERACTIONDESIGN
SKETCH WIREFRAME PROTOTYPE
36
![Page 37: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/37.jpg)
CASE STUDY
VISUALDESIGN
VISUALLANGUAGE
GRIDS AND PROPORTIONS
37
![Page 38: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/38.jpg)
38
![Page 39: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/39.jpg)
SPEED IS A DESIGN DECISION
39
![Page 40: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/40.jpg)
RWD ISSUES
What screen sizes should I design?
Start at 320px?
Then what?
TIPS
40
![Page 41: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/41.jpg)
RWD ISSUES
How do I select breakpoints?
Breakpoints should be device agnostic
Let page content determine your breakpoints
41
TIPS
![Page 42: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/42.jpg)
Where an Advisor removes modules 5 and 9
Advisors can choose between 1 and 20 content modules
KEEPING PAGES BALANCED: THE PROBLEMCASE STUDY
42
![Page 43: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/43.jpg)
Content priority Two column layout, dynamic grid layout One column, fixed position side nav
KEEPING PAGES BALANCED: SOLUTIONSCASE STUDY
43
![Page 44: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/44.jpg)
RWD ISSUESPresenting responsive designs to clients
On screen, with all layouts side by side
Nothing beats placing the prototype in the client’s hands
PROFILE PAGE
TIPS
44
![Page 45: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/45.jpg)
PROTOTYPE:LOW FIDELITY
CASE STUDY
45
Fast FocusCheap
[DEMO]
![Page 46: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/46.jpg)
Testing visual styles on more devices
Something the client can show their boss
Treatment of media assets
PROTOTYPE:HIGH FIDELITY
CASE STUDY
46
![Page 47: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/47.jpg)
RESPONSIVE PROCESS (BETA)
47
![Page 48: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/48.jpg)
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
![Page 50: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/50.jpg)
http://www.starbucks.com/static/reference/styleguide/
Starbucks style guide
http://patternprimer.adactio.com/
Pattern Primer by Jeremy Keith Pea.rs by Simple Bits
http://pea.rs/
Get started early
Use throughout the project
Add responsive patterns
HTML STYLE GUIDES
50
![Page 51: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/51.jpg)
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
![Page 52: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/52.jpg)
STOP. COLLABORATE. AND LISTEN.
52
![Page 53: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/53.jpg)
WHAT ARE OTHERS DOING?
53
![Page 54: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/54.jpg)
Mark Boulton’s, notes, thoughts and conclusionsResponsive workflow - Responsive Summit, London 24 February 2012
http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow
1. Sketch
2. Prototype
3. Design
4. Iterate
5. Talk
MARKBOULTON
54
![Page 55: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/55.jpg)
http://www.slideshare.net/stephenhay/mobilism2012
Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012
STEPHEN HAY
1. Content inventory
2. Content reference wireframes
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
55
![Page 56: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/56.jpg)
VILJAMISALMINEN
Viljami Salminen, on responsive workflow, 28 May 2012
http://viljamis.com/blog/2012/responsive-workflow/
56
![Page 57: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/57.jpg)
HOW WOULD I APPROACH A NEW RESPONSIVE PROJECT STARTING TODAY?
57
![Page 58: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/58.jpg)
USER RESEARCH
(depending on project context)
58
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 59: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/59.jpg)
USER RESEARCH
IA and content reference diagram
CONTENTSTRATEGY
(depending on project context)
59
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 60: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/60.jpg)
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
(depending on project context)
60
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 61: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/61.jpg)
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT SKETCH
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
61
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 62: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/62.jpg)
Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
62
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 63: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/63.jpg)
Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals
HTML STYLE GUIDE
RWDPROTOTYPE
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
63
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
![Page 64: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/64.jpg)
RESPONSIVE RESOURCES
64
![Page 65: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/65.jpg)
GETTING STARTED
Read these books
Start here
http://www.alistapart.com/articles/responsive-web-design
http://futurefriend.ly/
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
![Page 66: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/66.jpg)
RESPONSIVE PROCESS
Stephan Hay’s Responsive Design Workflowhttp://www.slideshare.net/stephenhay/mobilism2012
Viljami Salminen’s responsive workflowhttp://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 Agehttp://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Ben Callahan’s Hands-on Responsive Web Designhttps://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12
Yellow Pencil’s Responsive web design processhttp://responsiveprocess.com/
66
![Page 67: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/67.jpg)
RESPONSIVE RESOURCES
As RWD evolves, so will our process
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/
@grigs@scottjehl@stephanhay@adactio
@stephanierieger@bryanrieger@globalmoxie@wilto
@rwd@beep@brad_frost@lukew
and more: http://twitter.com/pkattera/rwd
Stay up to date
67
![Page 68: Design Process in the Responsive Age](https://reader033.vdocuments.site/reader033/viewer/2022051515/54c734bc4a7959e5208b459a/html5/thumbnails/68.jpg)
THANKS@PKATTERA UXRAVE.COM
68