SlideShare ist ein Scribd-Unternehmen logo
1 von 99
Downloaden Sie, um offline zu lesen
We shape
our tools,
and
thereafter
our tools
shape us.
— MARSHALL MCLUHAN
©RobertFlemming
— MARSHALL MCLUHAN
We shape
our tools,
and
thereafter
our tools
shape us.
©HenriDauman
It changes
our
outlook,
our
attitudes,
our
feelings...
©BernardGotfryd
©BSJPhotography
©QuentinFiore
2005
©LucaBruno
St. Peter’s Square, Rome
2013
©MichaelSohn
St. Peter’s Square, Rome
ECOSYSTEM
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?
©NamJunePaik
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
©ToddMcLellan
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
MOBILE
READY
ALMOST
Properly
structured
content is
portable to
future platforms.
— STEPHEN HAY
Simplified
Translation
Progressive
Enhancement
SET
BREAKPOINTS
©Viljamis
Touch-based
smartphone
Desktop/
Laptop
9’’ Tablet
©Viljamis
©Viljamis
Small LargeMedium
SKETCH
©ChrisRisdon
PROTOTYPE
Typecast
Typecast
VISUAL
DESIGN
©MwmGraphics
PATTERN LIBRARY
- State and breakpoint
changes can be included
- Useful for future
designers, devs, etc
- Design consistency and
maintainability
PATTERN LIBRARY
TEST
©J.Mathews
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
©Viljamis
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%DisplayAdvertising
28%MobileMessaging
45%MobileWeb
97%Email
Responsys2012
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 ADAPTING
K E E P L E A R N I N G

Weitere ähnliche Inhalte

Ähnlich wie REBORN. University | Responsive Workflow

Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014Fabio Carneiro
 
Communication Innovation: What's next and why it matters to us
Communication Innovation: What's next and why it matters to usCommunication Innovation: What's next and why it matters to us
Communication Innovation: What's next and why it matters to usJon McMillan
 
The Technology Integration of Man
The Technology Integration of ManThe Technology Integration of Man
The Technology Integration of ManScott Klososky
 
Magnetic Interactivity
Magnetic InteractivityMagnetic Interactivity
Magnetic Interactivitycorinapanea5
 
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming InterfacesMagnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming InterfacesDan Mall
 
Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013Prophets Agency
 
Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Martin
 
Learning in the Microcosmos
Learning in the MicrocosmosLearning in the Microcosmos
Learning in the Microcosmosopenforum
 
Snowflake Effect ASTD TK2010
Snowflake Effect ASTD TK2010Snowflake Effect ASTD TK2010
Snowflake Effect ASTD TK2010Wayne Hodgins
 
Visualizing the Agency of the Future
Visualizing the Agency of the FutureVisualizing the Agency of the Future
Visualizing the Agency of the FutureJESS3
 
The Agency of the Future
The Agency of the FutureThe Agency of the Future
The Agency of the FutureLeslie Bradshaw
 
MenderCon 2020 Keynote Presentation
MenderCon 2020 Keynote PresentationMenderCon 2020 Keynote Presentation
MenderCon 2020 Keynote PresentationM. Scott Ford
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondAct-On Software
 
Why Can't We All Just Get Along?
Why Can't We All Just Get Along?Why Can't We All Just Get Along?
Why Can't We All Just Get Along?judybpresenting
 
About Digital Copywriting (made for Akber Bekasi, Mei)
About Digital Copywriting (made for Akber Bekasi, Mei)About Digital Copywriting (made for Akber Bekasi, Mei)
About Digital Copywriting (made for Akber Bekasi, Mei)Seno Pramuadji
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 

Ähnlich wie REBORN. University | Responsive Workflow (20)

Content Strategy
Content StrategyContent Strategy
Content Strategy
 
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
 
Communication Innovation: What's next and why it matters to us
Communication Innovation: What's next and why it matters to usCommunication Innovation: What's next and why it matters to us
Communication Innovation: What's next and why it matters to us
 
The Technology Integration of Man
The Technology Integration of ManThe Technology Integration of Man
The Technology Integration of Man
 
Magnetic Interactivity
Magnetic InteractivityMagnetic Interactivity
Magnetic Interactivity
 
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming InterfacesMagnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
 
Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013
 
Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008
 
Learning in the Microcosmos
Learning in the MicrocosmosLearning in the Microcosmos
Learning in the Microcosmos
 
Snowflake Effect ASTD TK2010
Snowflake Effect ASTD TK2010Snowflake Effect ASTD TK2010
Snowflake Effect ASTD TK2010
 
NECST Friday Talk - NECST2019: what's NECST
NECST Friday Talk - NECST2019: what's NECSTNECST Friday Talk - NECST2019: what's NECST
NECST Friday Talk - NECST2019: what's NECST
 
Visualizing the Agency of the Future
Visualizing the Agency of the FutureVisualizing the Agency of the Future
Visualizing the Agency of the Future
 
The Agency of the Future
The Agency of the FutureThe Agency of the Future
The Agency of the Future
 
Technical Writer Resume: Steve Newman
Technical Writer Resume: Steve NewmanTechnical Writer Resume: Steve Newman
Technical Writer Resume: Steve Newman
 
MenderCon 2020 Keynote Presentation
MenderCon 2020 Keynote PresentationMenderCon 2020 Keynote Presentation
MenderCon 2020 Keynote Presentation
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
 
Why Can't We All Just Get Along?
Why Can't We All Just Get Along?Why Can't We All Just Get Along?
Why Can't We All Just Get Along?
 
About Digital Copywriting (made for Akber Bekasi, Mei)
About Digital Copywriting (made for Akber Bekasi, Mei)About Digital Copywriting (made for Akber Bekasi, Mei)
About Digital Copywriting (made for Akber Bekasi, Mei)
 
Qualified self
Qualified selfQualified self
Qualified self
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 

Kürzlich hochgeladen

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 

Kürzlich hochgeladen (20)

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 

REBORN. University | Responsive Workflow