publish once, brand everywhere
TRANSCRIPT
Publish Once, Brand Everywhere.
DEVELOPING TOOLS FOR
RESPONSIVE DESIGN
Who are we?
+
YEARS
DISTINGUISH YOUR BRAND ONLINE
IMPROVE SCREEN READABILITY
2 YEARS
thedailybeast.combostonglobe.com
Miller Headline Bold
Benton Sans
Titling Gothic Compressed
TITLING GOTHIC CONDENSED
hollywoodreporter.comsalon.com
VONNESS COMPRESSED - MEDIUM
BENTON SANS EXTRA COMPRESSED
Rocky
Vonness Compressed - Bold
http://www.fontbureau.com/readingedge/
READING-EDGE™
complexfields.orgediblevineyard.com
Ibis RE, Benton Sans RE,
Bureau Grot Benton Sans
Poynter Serif RE
designconference2011.aiga.orgrestlessbee.com
Benton Modern RE Giza RE
WHY CARE ABOUTON-SCREEN READING?
“Most printed daily newspapers will be gone in about five years.”
JEFFERY COLE, Director, USC School for Communication and Journalism, Jan. 2012
70%
US households withbroadband access:
(and we're ranked #14 in the world!)
OECD, Broadband Portal Press Release, Dec. 2011
Mobile tra!c now accounts forof all global Internet tra!c
By 2016, almost of connected devices will be a smartphone or a tablet
12%
75%
CISCO VISUAL NETWORKING INDEX, Global Mobile Data Traffic Forecast: 2011 to 2016, Feb. 2012
PEW RESEARCH, Future of Mobile News, Oct. 2012
of all mobile device owners spend an average of five hours per week reading news electronically
63%
of tablet users and of smartphone owners prefer reading news on their devices over printed newspapers
60% 50%
LET’S BUILD APPS!
Where are readersreally coming from?
SOCIAL MEDIAREFERRALS
WEBTRAFFIC
9%
PEW RESEARCH, State of the News Media 2012
“People do like CDs. They continue to buy about 900 million CDs every year in this country ... They’re going to continue to do what they’ve done.”PAUL VIDICH, EVP, Warner Music, June 2000
Vinyl
8-Track
Cassettes
CDs
Videos
$63
$26
$71
1975 1985 1995 2005
Digital
US RECORDED MUSIC REVENUE: Dollars Per Capita
RIAA, Analysis by Michael DeGusta, Business Insider, Feb. 2011
http://www.youtube.com/watch?v=G9RIXzYSkoo&feature=related
http://www.youtube.com/watch?v=G9RIXzYSkoo&feature=related
MY NEWS
THE STORY PAGEIS THE NEW HOMEPAGE
IT’S A PROBLEMWHEN YOUR STORY PAGESLOOK LIKE SHIT ON MOBILE
FROM FLIPBOARD TO TABLET...
FROM FACEBOOK TO SMARTPHONE...
FROM TABLET TO SMARTPHONE...
POOR BRAND CONSISTENCY
WHAT DO NEWSPAPERS NEED?
BRANDEVERYWHERE
1.
2.
(TEMPLATES)
Brand• colors• logo• type and styling
Content• published content• web features
Human Resources, skills• CMS, workflow• budget• ad sales
UNIQUE GENERICGeneral Design• legibility
Responsive Patterns• nav patterns• layout patterns
Must-haves• ad-serving techniques• social media integration• optimized loading time• range supported platorms
SPECTRUM OF VARIABILITY
MODULAR,PARAMETRIC,FRAMEWORK
MODULAR,PARAMETRIC,FRAMEWORK
+RESPONSIVE!
THINK RESPONSIVE
MODULAR
Visual hierarchy
Flexible,customizable
Triglyphs = 1 module Metopes = 1.5 modules
BROWSER-WIDTH
A
D
E
B
C
B
C
F
G
G
TABLET SMARTPHONE
A
F
G
B
B
C
F
G
B
C
A
PARAMETRIC
PARAMETRIC DESIGNAS A MODEL FOR THE
DESIGN PROCESS
DO IT WITH SASS
THE DAILY TIMES Static 1 Static 2 Static 3
SECTION
Last updated: Month, 00 0:00 pm
Search
LinkedIn Performance Impresses Investors, Despite Hiccups
Local Region Global OpinionBusiness Lifestyle MoreNation
Subsection Subsection Subsection Subsection Subsection
The résumé/job site has never really been cool. But the disastrous Facebook IPO has Silicon Valley reappraising the smaller social network—even a!er this week’s missteps.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo risus, sit amet eleifend libero. Nullam bibendum est at velit rhoncus in blandit nisl fermen-tum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam a erat quis libero dignissim cursus. Vestibu-lum nec nibh metus. Etiam ac ligula at urna feugiat lobortis vel nec nisl. Phasellus non orci diam, ac fringilla augue. Maecenas magna nunc, pulvinar vel porta ac, rhoncus a nisi.
Donec in odio metus. Proin sit amet enim felis, eget facilisis mi. Proin elit eros, pulvinar nec placerat id, varius sed leo. Nulla ullamcorper lacinia nibh et bibendum. Nam sed metus porttitor quam venenatis faucibus non nec velit. Suspendisse dictum sagittis ipsum, in tempor leo ultricies vel. Integer eu conse-quat dolor. Ut tincidunt dapibus nisl, ultrices fermentum neque pellentesque posuere. In hendrerit, quam pulvinar molestie suscipit, tortor lacus
Option 1
Option 2
Option 3
Option 4
AD
SIDEBAR
$blue: rgb(57,89,102);$lightBlue: lighten($blue, 80%);$gray: lighten(black, 50%);
.dek { @include serif(default); color: $gray;}
@mixin serif($style) { @if $style == default { font-family: “Escrow Text”; } @else if $style == display { font-family == “Escrow”; }}
IAKOV CHERNIKHOV, The Construction of Machine Forms, 1931.
“In order to recognize, study and understand our examples more easily we need to classify them.”
GENERIC DATA
LISTINGS
Calendar...Classifieds...Local guides...
STORIES
CategoryHedDekSummaryBylineBodyPullquoteRelated contentImages
QuoteCharge
CONTRIBUTORS
NameBioHeadshotLinks
MULTIMEDIA
Title of seriesSummaryBylineImages
ImageCreditCaption
ImageCreditCaption
GENERIC PAGES
STORY
Xxxxx Xxxxxx
STATIC
Xxxxx Xxxxxx
SUBSECTION
Xxxxx Xxxxxx > Xxxxx
SECTION
Xxxxx Xxxxxx
INDEX
MASTER ELEMENTS:
LOGO SEARCH NAV STATIC LINKS FOOTER ADS
GENERIC CONTENT MODULES
Most read
Ads• banner• column
Site map• by section• by topic
GLOBAL
Opinion/Blogs• featured• list
Listings
Multimedia
Stocks
Email list
By section• featured 1• featured 2• list
Featured• must-reads• most read• most emailed
By subsection• featured 1• featured 2• list
MULTI-ENTRY
Story• horiz. lede image• ver. lede image• slideshow, video• byline, date, comments #• dek• body• pullquote• comments• related
More in section
SINGLE-ENTRY
More by author
Related
SECTION#PAGEHEADER
One-level w/ dropdown
Sub menu w/o dropdown
Mega menu• full-width
• partial-width
• Various layouts
Sidebar nav
Sidebar sub nav
NAVIGATION
Index (full-size)
other (condensed)
PAGE
Logo
Search
Weather
Tra!c
Breaking news
Teasers w/ images
Ads
INTEGRATE WITH...
The possiblilties are many but not infinite
non-linear path
“It’s a problem whenYour story pages look like
shit on mobile”
BUSINESS
DESIGN
IMPLEMENTATION
WHAT DO NEWSPAPERS NEED?
BRANDEVERYWHERE
1.
2.
