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
 
Learning in the Microcosmos
Learning in the MicrocosmosLearning in the Microcosmos
Learning in the Microcosmosopenforum
 
Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Martin
 
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
 
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
 
Prototyping Physical & Immersive Environments for UX Designers
Prototyping Physical & Immersive Environments for UX DesignersPrototyping Physical & Immersive Environments for UX Designers
Prototyping Physical & Immersive Environments for UX DesignersSusan Oldham
 

Ä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
 
Learning in the Microcosmos
Learning in the MicrocosmosLearning in the Microcosmos
Learning in the Microcosmos
 
Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008Lindner Microcontent Standards 2008
Lindner Microcontent Standards 2008
 
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
 
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
 
Prototyping Physical & Immersive Environments for UX Designers
Prototyping Physical & Immersive Environments for UX DesignersPrototyping Physical & Immersive Environments for UX Designers
Prototyping Physical & Immersive Environments for UX Designers
 

Kürzlich hochgeladen

Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
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
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
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
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 

Kürzlich hochgeladen (20)

Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
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
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
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
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 

REBORN. University | Responsive Workflow