Publish Once, Brand Everywhere

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.

THANK YOU!Paley Dreier: paley@webtype.com

Lauren Dreier: lauren@pandlmedia.com