Upload
ajbreuer
View
4.964
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Panel given by Alex Breuer, Dan Gardner and Dave Rupert @SXSW on 11th March 2012
Citation preview
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 4
1 2 3
4 5 6
7 8 9
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
1 2
3 4
5 6
7 8Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
1
2
3
4Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
a
b
c
dMonday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
a
b
c
d
Done.
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
a
b
c
d
Done.
Thanks.Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Purpose, Platform, Prioritization, Process
The biggest challenge of Responsive Designis decision-making
10
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Purpose, Platform, Prioritization, Process
12
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Content Strategy
17
The Content Determines The Design
Content considerations include:
- Formats- Frequency- Pathing and desired user flow
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Purpose, Platform, Prioritization, Process
18
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
How does this responsive site exist with other products on the same devices
Consider the Ecosystem
19
RESPONSIVE
NATIVEDIFFERENTIATEDREPLICATED
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 20
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 22
Page Templates
Custom Pages
Librarys (Outfits)
Modules
Items
Monday, 18 March 13
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Purpose, Platform, Prioritization, Process
24
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 25
System Design
Page Templates Custom Pages Librarys (outfits) Modules Items
DesignBig
DesignSmall
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 26
mobile firstIt’s not mobile first,
its all platforms at onceMore, But Simple
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Purpose, Platform, Prioritization, Process
29
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY
Design Is Not Done...
32
...Until It’s Developedand it’s still probably not done.
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
Premium mobile technology
Intuitive UX and reading experience
The empire
33
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
A new hope
34
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
Old technology
35
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
A new hope (again)
36
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
not the droids...
37
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
A new hope (AGAIN!)
38
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 39
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
Display area
the easy bit
40
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
Estimation
Distribution
Filter
Test
Render
The hard bit
42
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 43
Estimation
Minimum pages for compulsory content to minimise white space
The hard bit
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 44
Distribution
Using rules defined for display area. number of items per page
hierachy and position across pages
The hard bit
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 45
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 47
Test
Configure a limit to the number of tests before optimum is chosen
The hard bit
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 48
Render
Specific rules and precedents and overides from cms during distribution and filtering
The hard bit
Monday, 18 March 13
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 49
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
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
RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 71
Thanks
#WYSIWYS
@ajbreuer
@danjgardner
@davatron5000
Monday, 18 March 13