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