The web you were used to is gone. Architecture and strategy for your mobile content. (v2)

image: flickr.com/photos/gregoryjordan

the web you were used to is gone @albertatrebla

THE WEB YOU WERE USED TO IS GONEArchitecture and strategy for your mobile content

alberta soranzo | @albertatrebla

the web you were used to is gone @albertatrebla

REMEMBER THE INTERNET?

image: wtfjeans.com

the web you were used to is gone @albertatrebla

THE INTERNET IS IN YOUR PANTS

image: wtfjeans.com

the web you were used to is gone @albertatrebla

WHAT IS MOBILE?

image: huffingtonpost.com (Alamy)

the web you were used to is gone @albertatrebla

MOBILE USAGE STATISTICS

• 86% of mobile internet users use their device while watching TV. 

• By 2014, mobile internet usage will overtake desktop internet usage. 

• Adults spend more time on mobile media than they do on newspapers and magazines combined.  

source: pocketyourshop.wordpress.com

the web you were used to is gone @albertatrebla

MOBILE ONLY PAGEVIEWS

the web you were used to is gone @albertatrebla

image: flickr.com/photos/guidedbycthulhu

WHAT IS MOBILE?

the web you were used to is gone @albertatrebla

MOBILE WEB STATISTICS

• 99% of smartphone owners use their mobile browser at least once a day. 

• 46% of consumers will NOT return to a mobile site that is not working properly. 

• 39% of business do nothing to make site mobile-ready.

• 74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning the site.

• 18% of all web traffic in the U.S. is mobile traffic. That number skyrockets to 24% in Africa, and 30% in Asia. This is up 192.5% since 2011.

source: pocketyourshop.wordpress.com

the web you were used to is gone @albertatrebla

MOBILE ONLY USERS

source: mobithinking.com

the web you were used to is gone @albertatrebla

MOBILE SEARCH STATISTICS

• 95% of mobile users use their devices for local search. 

• 52% of all local searches are done from a mobile device. 

• 9 out of 10 mobile phone searches result in a purchase or visit. 

• 3 out of every 5 searches are conducted on a mobile device. 

source: pocketyourshop.wordpress.com

the web you were used to is gone @albertatrebla

DIRECTV

the web you were used to is gone @albertatrebla

DIRECTV

the web you were used to is gone @albertatrebla

DO YOU HAVE A WEBSITE?

“You need to get your content onto mobile devices. Period.” — Karen McGrane

the web you were used to is gone @albertatrebla

WHO DECIDES WHAT MATTERS?

image: flickr.com/photos/d_space

the web you were used to is gone @albertatrebla

MOBILE IS SOCIAL

image: flickr.com/photos/strandloper/

the web you were used to is gone @albertatrebla

MOBILE ONLY FACEBOOK

source: allfacebook.com

the web you were used to is gone @albertatrebla

HOW WE USE THE INTERNET

“If people want to do something on the internet, they will want to do it using their mobile device. Period.” — Karen McGrane

the web you were used to is gone @albertatrebla

WHAT ABOUT CONTEXT?

image: flickr.com/photos/kattebelletje/

the web you were used to is gone @albertatrebla

WHAT ABOUT CONTEXT?

image: flickr.com/photos/piblet

the web you were used to is gone @albertatrebla

ONE SITE

the web you were used to is gone @albertatrebla

MANY DEVICES

the web you were used to is gone @albertatrebla

image: flickr.com/photos/cannedtuna

THERE IS NO SUCH A THING AS MOBILE IA

the web you were used to is gone @albertatrebla

WHAT IS IA?

The structural design of shared information environments.

source: en.wikipedia.org/wiki/Information_architecture

the web you were used to is gone @albertatrebla

CROSS-CHANNEL IA BLUEPRINT

image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html

the web you were used to is gone @albertatrebla

image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf

TOUCHPOINTS MATRIX

the web you were used to is gone @albertatrebla

WHAT DOES IA DO?

IA interprets information and expresses distinctions between signs and systems of signs and involves the categorization of information into a coherent structure.

source: en.wikipedia.org/wiki/Information_architecture

the web you were used to is gone @albertatrebla

DESKTOP

the web you were used to is gone @albertatrebla

TABLET

the web you were used to is gone @albertatrebla

MOBILE

the web you were used to is gone @albertatrebla

image: Android Design Patterns

STRUCTURE AS DESIGN PATTERNSWAYFINDING

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - HYERARCHY

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - HYERARCHY

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - HUB & SPOKE

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - HUB & SPOKE

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - NESTED DOLL

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - NESTED DOLL

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - TABBED VIEW

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - TABBED VIEW

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - BENTO BOX

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - BENTO BOX

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - FILTERED VIEW

source: uxbooth.com

the web you were used to is gone @albertatrebla

MOBILE PATTERNS - FILTERED VIEW

Filter Filter

the web you were used to is gone @albertatrebla

image: flickr.com/photos/10ch

MANAGING INFORMATION TO CREATE MEANINGSENSEMAKING

the web you were used to is gone @albertatrebla

CONTENT = INFORMATION

“Typically information foraging must be analysed as decision making under uncertainty”

— Peter Pirolli

the web you were used to is gone @albertatrebla

CONTENT = INFORMATION

“A strong information layer is the key to cross-channel success”

— Andrea Resmini and Luca Rosati

the web you were used to is gone @albertatrebla

WAYFINDING FOR SENSEMAKING

the web you were used to is gone @albertatrebla

THERE IS NO SUCH A THING AS MOBILE CONTENT STRATEGY

image: abookapart.com

the web you were used to is gone @albertatrebla

THE CHALLENGE

the web you were used to is gone @albertatrebla

ADAPTIVE CONTENT

• Reusable• Strong structure• Independent of presentation layer• Metadata • Content Management System (CMS)

the web you were used to is gone @albertatrebla

ADAPTIVE CONTENT

the web you were used to is gone @albertatrebla

REUSABLE CONTENT

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

PROGRAM 1(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

ASK THE EXPERT(100 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

HEALTH CARE REFORM(100 WORDS MAX)

SPOTLIGHT(100 WORDS MAX)

PROGRAM 1(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

PROGRAM 1(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

ASK THE EXPERT(100 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

HEALTH CARE REFORM(100 WORDS MAX)

SPOTLIGHT(100 WORDS MAX)

PROGRAM 1(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

PROGRAM 2(50 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

FEATURED PRODUCT 1(3 WORDS MAX)

TOPIC CENTER(5 LINKS x 4 WORDS

MAX)

NEWS(5 LINKS x 10 WORDS MAX)

CAROUSELPHOTOTHUMB

FEATURED PRODUCT 2 (3 WORDS MAX)

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

FEATURED PRODUCT 1(3 WORDS MAX)

TOPIC CENTER(5 LINKS x 4 WORDS

MAX)

NEWS(5 LINKS x 10 WORDS MAX)

CAROUSELPHOTOTHUMB

FEATURED PRODUCT 2 (3 WORDS MAX)

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

FEATURED PRODUCT 1(3 WORDS MAX)

TOPIC CENTER(5 LINKS x 4 WORDS

MAX)

NEWS(5 LINKS x 10 WORDS MAX)

CAROUSELPHOTOTHUMB

FEATURED PRODUCT 2 (3 WORDS MAX)

the web you were used to is gone @albertatrebla

STRUCTURED CONTENT

NEWSLETTERSIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED PRODUCT 1 (3 WORDS MAX)

FEATURED PRODUCT 2 (3 WORDS MAX)

PUB SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

TOPIC CENTER(10 LINKS x 4 WORDS MAX)

NEWS(5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

FEATURED PRODUCT 1(3 WORDS MAX)

TOPIC CENTER(5 LINKS x 4 WORDS

MAX)

NEWS(5 LINKS x 10 WORDS MAX)

CAROUSELPHOTOTHUMB

FEATURED PRODUCT 2 (3 WORDS MAX)

the web you were used to is gone @albertatrebla

METADATA

image: http://dev.npr.org/#station-finder-api-examples

the web you were used to is gone @albertatrebla

PROGRESSIVE DISCLOSURE

the web you were used to is gone @albertatrebla

THE INTERNET IN YOUR PANTS

image: techpinions.com

the web you were used to is gone @albertatrebla

THE FUTURE WAS YESTERDAY

the web you were used to is gone @albertatrebla

THE FUTURE IS YESTERDAY

image: slashgear.com

the web you were used to is gone @albertatrebla

BTW

image: flickr.com/photos/gregoryjordan

the web you were used to is gone @albertatrebla

STEPHEN HAY

the web you were used to is gone @albertatrebla

thank you.@albertatrebla

albertasoranzo@gmail.comalbertasoranzo.com

Illustration: Dan Willis

the web you were used to is gone @albertatrebla

RESOURCES

Content Strategy for MobileKaren McGraneA Book Apart, 2011

Pervasive Information ArchitectureAndrea Resmini, Luca RosatiMorgan Kaufman, 2012

Android Design PatternsGreg NudelmanWiley, 2013

Information Foraging Theory: Adaptive Interaction with InformationPeter TirolliOxford University Press (USA), 2009

Fisher, J., Norris, S., & E. Buie (2012). Sense-making in Cross-channel Design. Journal of Information Architecture. Vol. 4, No. 1-2. journalofia.org/volume4/issue2/02-fisher/