Responsive Workflow Presentation
Transcript of Responsive Workflow Presentation
We shape our tools, and thereafter our tools shape us.
— MARSHALL MCLUHAN
© R
ob
ert
Fle
mm
ing
— MARSHALL MCLUHAN
We shape our tools, and thereafter our tools shape us.
© H
en
ri D
au
ma
n
It changes our outlook, our attitudes, our feelings...
© B
ern
ard
Go
tfry
d
© B
SJ
Ph
oto
gra
ph
y
© Q
ue
nti
n F
iore
2005
© L
uc
a B
run
o
St. Peter’s Square, Rome
2013
© M
ich
ae
l S
oh
n
St. Peter’s Square, Rome
EC
OS
YS
TE
M
S C R E E N S
OF
At times of change, the learners are the ones who will inherit the world, while the knowers will be beautifully prepared for a world which no longer exists.
— ALISTAIR SMITH
How can we—and
our designs—
adapt?
How can we—and
our designs—
adapt?respond?
© N
am
Ju
ne
Pa
ik
THE WAY
THE WAY
PLANNING
PLANNING
STATIC WIREFRAMES
PLANNING
STATIC WIREFRAMES
STATIC DESIGN
PLANNING
STATIC WIREFRAMES
STATIC DESIGN
HTML/CSS/JS
PLANNING
STATIC WIREFRAMES
STATIC DESIGN
HTML/CSS/JS
LAUNCH
A NEW WAY
Responsiveness it’s not just something we can build into our product,
—it’s an attitude we can adopt.— WILSON MINER
© T
od
d M
cLe
lla
n
PLAN
PLAN
Content Inventory
User Journeys
Content Reference Wireframes
1. Logo
2. Social Media
3. Navigation
4. Introduction
5. Case Studies
6. Clients
7. News
8. Secondary Navigation
CONTENT
1. Logo
2. Social Media
3. Navigation
4. Introduction
5. Case Studies
6. Clients
7. News
8. Secondary Navigation
1
2 3
4
5
6
7 8
CONTENT
TEXT DESIGN
Pandoc
MOBILEREADY
ALMOST
Properly structured content is portable to future platforms.
— STEPHEN HAY
SimplifiedTranslation
ProgressiveEnhancement
SET BREAKPOINTS
© V
ilja
mis
Touch-based smartphone
Desktop/Laptop9’’ Tablet
© V
ilja
mis
© V
ilja
mis
Small LargeMedium
SKETCH
© C
hri
s R
isd
on
PROTOTYPE
Typecast
Typecast
VISUALDESIGN
© M
wm
Gra
ph
ics
PATTERN LIBRARY
- State and breakpoint changes can be included
- Useful for future designers, devs, etc
- Design consistency and maintainability
PATTERN LIBRARY
TEST
© J
. M
ath
ew
s
DISCUSS
Discussing with the client during
all iterations and showing HTML/CSS prototypes before static Photoshop designs has streamlined our workflow and helped us to set and
—manage a client’s expectations better than ever before.
— ANDY CLARKE
ITERATE
Sketch → prototype → design → test → discuss
© V
ilja
mis
PLAN
TEXT DESIGN
SET BREAKPOINTS
SKETCH
PROTOTYPE
VISUAL DESIGN
TEST
DISCUSS/ ITERATE
?
ROCK SOLID HTML EMAILS
The digital channels Australian marketers use to communicate with customers.
84% Social
37% Blogs
83% Traditional Web
40% Mobile Apps
49%
Disp
lay
Ad
vertisin
g
28%
Mo
bile
Me
ssag
ing
45%
Mo
bil
e W
eb
97%
Em
ail
Re
sp
on
sy
s 2
01
2
We've gone from being exposed to about 500 ads a day back in the 70s to as many as 5,000 a day today.
— JAY WALKER SMITH, Yankelovich Consumer Research
IT’S A NOISY LANDSCAPE
The average time allocated to a newsletter after opening it was only
— JAKOB NIELSEN’S Alertbox
51 seconds.
CONTENT IS KING
ALL?
nO MASTER PLAN
LOOKING THROUGH THE RECTANGULAR WINDOW
300-500px
FIRST IMPRESSIONS COUNT
WHAT ABOUT W I D T H ?
It’s a good idea to keep your emails to a width of no more than 550-640 pixels.
— CAMPAIGN MONITOR
440px
600px
750px
HEADER TEXTPRE
The term readability doesn’t ask simply “can you read it?” —it asks “do you want to read it?”
— @TYPOGRAPHICA
VIEW ONLINE VERSION
FORWARD TO A FRIEND
VIEW ON MOBILE
IMAGE BLOCKING
of email recipients see images automatically.
— MERKLE “View From The Digital Inbox”
Only 48%
BECOMING A KNOWN SENDER
PACKING A PUNCH INTO THE PRE-HEADER
PROVIDING ALT TEXT
USING HTML TEXT IN THE DESIGNS
STYLING UP ALT TEXT WITH CSS
TURNING TABLES INTO 8BIT WONDER
CALL TO ACTIONS IN HTML TEXT
THE EMAIL CLIENTS AUSTRALIANS USE
Remarkably, Apple iPhone and Apple Mail contribute towards 27% of Australians’ email client usage.
— RESPONSYS The 2012 Digital Marketing Big Australia Report
34% Outlook
10.7% Hotmail
16% Apple iPhone
12% Apple Mail
25% Other
MOBILE FRIENDLY
Links and buttons should
have a minimum target area
of 44 × 44 pixels, as per
Apple guidelines.
min = 30px
ideal = 44px
The minimum font size displayed on iPhones is
WP7 recommends no smaller than 15 px, Apple recommends 17-22 px font.
13 pixels.
Responsiveness it’s not just something we can build into our product,
—it’s an attitude we can adopt.— WILSON MINER
KEEP ADAPTINGK E E P L E A R N I N G