SXSX wysiwys panel slides

RESPONSIVE DESIGN • SXSW • 11 MARCH 2013

Alex Breuer, Creative Director, The Guardian

Dan Gardner, Founder & Creative Director, Code & Theory

Dave Rupert, Lead Developer, Paravel

About WYSIWYS What you see is what you spec’d

#WYSIWYS

1

Monday, 18 March 13

RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 2

Learnings fromCode and Theory

Monday, 18 March 13

RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY

How it’s done

3

Monday, 18 March 13


1 2 3

4 5 6

7 8 9

Monday, 18 March 13


1 2

3 4

5 6

7 8Monday, 18 March 13


1

2

3

4Monday, 18 March 13


a

b

c

dMonday, 18 March 13


a

b

c

d

Done.

Monday, 18 March 13


a

b

c

d

Done.

Thanks.Monday, 18 March 13


Purpose, Platform, Prioritization, Process

The biggest challenge of Responsive Designis decision-making

10

Monday, 18 March 13


Device Specific

Adaptive

Responsive

11

Individually coded & designed for specific device (ie. mdot)

Designing and developing elements for targeted devices. (back-end serves up specific device code for device)

One front-end Code base that optimally presents designs across devices. (often fluid design)

Definitions Help

Monday, 18 March 13



12

Monday, 18 March 13


System Design

13

IMAGE DRIVEN

TYPOGRAPHICALLYDRIVEN

PUBLI

SHIN

G

COM

MER

CE

MARKET

ING

The design system must be purpose driven

Monday, 18 March 13

Monday, 18 March 13

Monday, 18 March 13

Monday, 18 March 13


Content Strategy

17

The Content Determines The Design

Content considerations include:

- Formats- Frequency- Pathing and desired user flow

Monday, 18 March 13



18

Monday, 18 March 13


How does this responsive site exist with other products on the same devices

Consider the Ecosystem

19

RESPONSIVE

NATIVEDIFFERENTIATEDREPLICATED

Monday, 18 March 13


Device Specific Differentiation

Adaptive Design in a Responsive Framework

Considerations and Challenges:

- Technology (cms management and time) - Content (what’s needed on what device?)- Functionality (where can we add value?)

Monday, 18 March 13


This Isn’t Page Design, It’s Interaction Design

App like, not web like

21

- Gestures + Animation- Sandboxes for freedom and extension- Leverage functionality and assets

Monday, 18 March 13


Page Templates

Custom Pages

Librarys (Outfits)

Modules

Items

Monday, 18 March 13

Monday, 18 March 13



24

Monday, 18 March 13


System Design

Page Templates Custom Pages Librarys (outfits) Modules Items

DesignBig

DesignSmall

Monday, 18 March 13


mobile firstIt’s not mobile first,

its all platforms at onceMore, But Simple

Monday, 18 March 13


Midpoints or Breakpoints

27

TIME TO MARKET

LONGEVITY OF EXPERIENCE

RESOURCES

TARGET DEVICES

COMPLEXITY OF BEHAVIORAL USAGE

Monday, 18 March 13

Monday, 18 March 13



29

Monday, 18 March 13


How It’s Used

30

Using the system is as important as the system itself

Organizational and Workflow considerations include:

- Org Structure, Resources- CMS access, authority and hierarchy- Content creation process

Monday, 18 March 13


How We Do It

31

Constantly Refining Our Process Some of our best practices include:

- Team composition- Argue early and often- Prototype early and often- Tools: Indesign & Keynote

Monday, 18 March 13


Design Is Not Done...

32

...Until It’s Developedand it’s still probably not done.

Monday, 18 March 13


Premium mobile technology

Intuitive UX and reading experience

The empire

33

Monday, 18 March 13


A new hope

34

Monday, 18 March 13


Old technology

35

Monday, 18 March 13


A new hope (again)

36

Monday, 18 March 13


not the droids...

37

Monday, 18 March 13


A new hope (AGAIN!)

38

Monday, 18 March 13

RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 39

Monday, 18 March 13


Display area

the easy bit

40

Monday, 18 March 13


equivalence

41

Content and template bundle

Text size/dpi ranges

Grid based on baselines and and columns scaled to image aspect ratio

Number of columns

Number of rows

Monday, 18 March 13


Estimation

Distribution

Filter

Test

Render

The hard bit

42

Monday, 18 March 13


Estimation

Minimum pages for compulsory content to minimise white space

The hard bit

Monday, 18 March 13


Distribution

Using rules defined for display area. number of items per page

hierachy and position across pages

The hard bit

Monday, 18 March 13


Filter

Test valid combinations of elements defined by distribution

Best combination of content sizes to fill minimum number of pages in desirable paced sequence

The hard bit

Monday, 18 March 13


The hard bit

46

[a1, a2, a3] [b1, b2, b3]

[a1, b1] [a1, b2] [a1, b3] [a2, b1] [a2, b2] etc

most significant sizes of the most significant content items on the most significant pages

Cartesian product sequences to limit combinations (a more important than b)

Monday, 18 March 13


Test

Configure a limit to the number of tests before optimum is chosen

The hard bit

Monday, 18 March 13


Render

Specific rules and precedents and overides from cms during distribution and filtering

The hard bit

Monday, 18 March 13


Monday, 18 March 13

ResponsiveDeliverables

Monday, 18 March 13

Ye olde way: Pages

PSD jscsshtml“Hey, code this.” FTP Shit

Welcome to my Website

Monday, 18 March 13

Does not account for complexity.

Monday, 18 March 13

“Developers should build a program out of simple parts connected by well defined interfaces, so problems are local, and parts of the program can be replaced in future versions to support new features.”

The UNIX Philosophy

Monday, 18 March 13

Monday, 18 March 13

Monday, 18 March 13

The new way: Modules

jscsshtml

Module 1

Build Process

Welcome to my Website

jscsshtml

Module 2

Monday, 18 March 13

How then to organize these modules?

Monday, 18 March 13

SMACSS by Snookhttp://smacss.com

Monday, 18 March 13

http://smacss.com

http://smacss.com

Base (reset & type defaults)

Layout (grid & structure)

Module (.module)

State (:hover)

Theme

SMACSS Organization of CSS

Self-realization!!

Monday, 18 March 13

.module { background: pink;}

.module--blue { background: blue;}

.module:hover { opacity: 0.8;}

Monday, 18 March 13

Brand Identity System for Web

Monday, 18 March 13

Monday, 18 March 13

Monday, 18 March 13

With RWD we’re creating systems, not pages.

Monday, 18 March 13

Flexible grid

Responsive typography

RWD images plan

Scalable navigation

Performance budget

Accessible form controls

Carousels

Dropdowns

Pagination

Data tables

Icon fonts

more...

Monday, 18 March 13

Monday, 18 March 13

InteractiveStyle Guides,Prototypes,[insert buzzword],etc.

Monday, 18 March 13

Demo or it didn’t happenisn’t billable.

Monday, 18 March 13

Tiny bootstraps, for every client.

Monday, 18 March 13

Uhh..Works on iPhone.

Monday, 18 March 13


Thanks

#WYSIWYS

@ajbreuer

@danjgardner

@davatron5000

Monday, 18 March 13