jeremy loyd the responsive design process @jeremyloyd
TRANSCRIPT
Jeremy Loyd
THE RESPONSIVEDESIGN PROCESS
@jeremyloyd
•There’s not a single, best RWD process
•The process depends on your team makeup and type of project
•The process is constantly changing
•We’re all figuring this out together
WEB DESIGNERS STILL USE PHOTOSHOP!
A SHIFT IN MINDSET
A SHIFT IN PROCESS
Before RWD, things were pretty simple.
1024ish
768ishfixed width
DESIGN FRONT-END BACK-END LAUNCH!
Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
THINK ABOUT USERS
Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
Linear Workflow
THINK ABOUT USERS
THROW INSOME CONTENT
Slightly Better Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
Why hello, RWD.
Linear Workflow
Now with
RWD!
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
Ditto!Now with
RWD!
Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
Me too!
This doesn’t work.
Linear Workflow Problem
We need to invite others into the process
(yes, this includes the client)
When the process is collaborative, the quality as a whole
improves
RWD is More Than Layout
•Content
•Usability
•Performance
•Findability/SEO
Linear Workflow
•Pros
•Familiar
•Manageable•Aligns with Corporate Structure
Linear Workflow
•Cons
•Discipline Driven
•Encourages Isolation
A Responsive Workflow
•Pros
•Natural Decisions
•Encourages Collaboration•Encourages Iteration•Better Results
A Responsive Workflow
•Cons
•Requires Change
•May Conflict with Organizational Structure
•Dependent on Team Make-up
THE RWD PROCESS
A SHIFTIN PROCESS
A Process Myth
‣Each client deliverable needs to look more like a final, beautiful end-product than the previous one.
Which Results In
‣Pushing toward nearly-designed wireframes quickly and completely designed comps soon after.
‣ (This sets up all sorts of unrealistic client expectations.)
A Better Approach
‣Deliverables that best serve the organization and prioritization of content and function across multiple resolutions.
‣ (Not deliverables made just to impress clients.)
Our Deliverables
•Research Deliverables
•Content Deliverables
•Priority Deliverables
•Style Deliverables
•Functional Deliverables
Let’s Focus On...
•Research Deliverables
•Content Deliverables
•Priority Deliverables
•Style Deliverables
•Functional Deliverables
Goal of Priority Deliverables:
Establish priority of content and/or
functionality
Content Priority Prototype
•Takes the place of a traditional wireframe.
•As much real content as you can.
•Linear in nature, priority implied.
•Possibly created in HTML, viewed in a browser.
•Generated by content/UX people.
Other Priority Tools
•Content Priority Guide (keynote)
•Frameworks (foundation, pure)
Frameworks
Goal of Style Deliverables:
To communicate the general look and feel
of the website
Style Prototype
•Like Style Tiles, but in the browser (styletil.es).
•Very fast to build.•Accurate web typography.•Easy to show web interaction.
•Client reviews in their browser of preference.
Other Style Tools
•Photoshop Comps (Everyone)
•Style Tiles (Samantha Warren)
•Element Collages (Dan Mall)
Element Collages by Dan Mall
Cool, so what happens next?
Research DeliverablesContent DeliverablesPriority DeliverablesStyle Deliverables
Functional Deliverables
CREATE DESIGN ASSETS
A different viewpoint
•Research Deliverables
•Content Deliverables
•Priority Deliverables
•Style Deliverables
•Functional Deliverables
A different viewpoint
•Research Updates
•Content Updates
•Priority Updates
•Style Updates
•Functional Updates
A different viewpoint
•Research Updates
•Content Updates
•Priority Updates
•Style Updates
•Functional Updates
‣Only Deliverable: a website!
To Summarize
•There’s no right RWD process
•Evaluate what’s right for your team and the projects you work on
•Changing process is a challenge – must have buy-in from management and those doing the work
• It’s not easy, we’re stillfiguring it out
“The truly responsive design web designer wasn’t born until after the
launch of the iPhone. We haven’t seen
his or her work yet.”
Andy Clarke
http://the-pastry-box-project.net/andy-clarke/2012-april-8/
