The Responsive Design Process

Slide 1

Slide 1 text

Jeremy Loyd THE RESPONSIVE DESIGN PROCESS @jeremyloyd

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

‣ 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

Slide 5

Slide 5 text

WEB DESIGNERS STILL USE PHOTOSHOP!

Slide 6

Slide 6 text

A SHIFT IN MINDSET A SHIFT IN PROCESS

Slide 7

Slide 7 text

Before RWD, things were pretty simple.

Slide 8

Slide 8 text

1024ish 768ish fixed width

Slide 9

Slide 9 text

DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow

Slide 10

Slide 10 text

DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow

Slide 11

Slide 11 text

DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT

Slide 12

Slide 12 text

Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

Slide 13

Slide 13 text

Why hello, RWD.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

Slide 16

Slide 16 text

Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too!

Slide 17

Slide 17 text

This doesn’t work.

Slide 18

Slide 18 text

Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE

Slide 19

Slide 19 text

We need to invite others into the process (yes, this includes the client)

Slide 20

Slide 20 text

CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow

Slide 21

Slide 21 text

CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow

Slide 22

Slide 22 text

CONTENT UX FRONT-END DESIGN BACK-END Responsive Workflow

Slide 23

Slide 23 text

When the process is collaborative, the quality as a whole improves

Slide 24

Slide 24 text

RWD is More Than Layout ‣ Content ‣ Usability ‣ Performance ‣ Findability/SEO

Slide 25

Slide 25 text

Linear Workflow ‣ Pros - Familiar - Manageable - Aligns with Corporate Structure

Slide 26

Slide 26 text

Linear Workflow ‣ Cons - Discipline Driven - Encourages Isolation

Slide 27

Slide 27 text

A Responsive Workflow ‣ Pros - Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results

Slide 28

Slide 28 text

A Responsive Workflow ‣ Cons - Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up

Slide 29

Slide 29 text

Client Abandon Previous Experience You Set Proper Expectations up front

Slide 30

Slide 30 text

THE RWD PROCESS A SHIFT IN PROCESS

Slide 31

Slide 31 text

A Process Myth Each client deliverable needs to look more like a final, beautiful end- product than the previous one.

Slide 32

Slide 32 text

Which Results In Pushing toward nearly-designed wireframes quickly and completely designed comps soon after. (This sets up all sorts of unrealistic client expectations.)

Slide 33

Slide 33 text

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.)

Slide 34

Slide 34 text

Our Deliverables ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables

Slide 35

Slide 35 text

Let’s Focus On... ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables

Slide 36

Slide 36 text

Goal of Priority Deliverables: Establish priority of content and/or functionality

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

Other Priority Tools ‣ Content Priority Guide (keynote) ‣ Frameworks (foundation, pure)

Slide 39

Slide 39 text

Frameworks

Slide 40

Slide 40 text

Goal of Style Deliverables: To communicate the general look and feel of the website

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

Other Style Tools ‣ Photoshop Comps (Everyone) ‣ Style Tiles (Samantha Warren) ‣ Element Collages (Dan Mall)

Slide 43

Slide 43 text

Element Collages by Dan Mall

Slide 44

Slide 44 text

Cool, so what happens next?

Slide 45

Slide 45 text

Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables C R E AT E D E S I G N A S S E T S

Slide 46

Slide 46 text

A different viewpoint ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables

Slide 47

Slide 47 text

A different viewpoint ‣ Research Updates ‣ Content Updates ‣ Priority Updates ‣ Style Updates ‣ Functional Updates

Slide 48

Slide 48 text

A different viewpoint ‣ Research Updates ‣ Content Updates ‣ Priority Updates ‣ Style Updates ‣ Functional Updates ‣ Only Deliverable: a website!

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

“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/

Slide 51

Slide 51 text

THANKS! @jeremyloyd [email protected]