Jeremy Loyd THE RESPONSIVE DESIGN

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 768ish fixed width

DESIGNFRONT-ENDBACK-ENDLAUNCH! Linear Workflow

DESIGNFRONT-ENDBACK-ENDLAUNCH! THINK ABOUT USERS Linear Workflow

DESIGNFRONT-ENDBACK-ENDLAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT

Slightly Better Linear Workflow CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH!

Why hello, RWD.

Linear Workflow Now with RWD! CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH!

Ditto! Now with RWD! Linear Workflow CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH! 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 SHIFT IN 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 Deliverables Content Deliverables Priority Deliverables Style 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 still figuring 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