This document discusses the shift from desktop to mobile internet usage and provides strategies for developing effective mobile content and information architecture. It notes that the majority of internet users now access the web via mobile devices rather than desktop computers. Examples of mobile design patterns and content structures are presented to help organizations effectively organize and display information on mobile. The document emphasizes the importance of a unified mobile strategy and content that is optimized for small screens and quick consumption on mobile.

1. THE WEB YOU WERE USED TO IS GONE
Architecture and strategy for your mobile content
!
!
!
EuroIA — Brussels, September 25-27
alberta soranzo | @albertatrebla | wearefriday.com
CC image: wikipedia.org/wiki/Interface_Message_Processor

2. CC image: http://en.wikipedia.org/wiki/Modem

3. image: http://gizmodo.com/5918418/giant-smartphones-in-skinny-jeans-a-photoshoot

4. image: huffingtonpost.com (Alamy)
image: flickr.com/photos/justard/12300416746/

5. SO, WHAT IS MOBILE
CC image: flickr.com/photos/guidedbycthulhu

6. image: kellianderson.com/

7. 2010 2013
3.7% 12.7%
North America
1.5% 8.1%
Europe
4.5% 22.9%
Asia
.9% 5.3%
South America
4.8% 16.6%
Africa
2.8% 12.8%
Oceania
source: pocketyourshop.wordpress.com

8. This is up 192.5% since 2011.
source: pocketyourshop.wordpress.com

9. Internet Users (MM)
2000
1500
1000
500
0
Mobile Desktop
2007 2009 2011 2013 2015E
source: pocketyourshop.wordpress.com

10. 90% VISIT OR PURCHASE 60% SEARCH
source: pocketyourshop.wordpress.com
95% LOCAL SEARCH

11. 74% WAITS 5 SEC 46% WILL NOT RETURN 39% DOES NOTHING
source: pocketyourshop.wordpress.com

14. “If people want to do something on the internet, they
will want to do it using their mobile device. Period.”
— Karen McGrane
CC image: flickr.com/photos/zeldman/10027189005

15. image: flickr.com/photos/piblet
image: https://www.flickr.com/photos/robef/8091483876

16. image: huffpost.com

17. WHO DECIDES WHAT MATTERS?
image: flickr.com/photos/d_space

18. image: hercampus.com

19. “You need to get your content onto mobile devices.
Period.”
— Karen McGrane
CC image: flickr.com/photos/zeldman/10027189005

20. ONE SITE

22. MOBILE INFORMATION ARCHITECTURE
image: flickr.com/photos/cannedtuna

23. The structural design of shared information
environments.
source: en.wikipedia.org/wiki/Information_architecture

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

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

26. 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

27. MOBILE PATTERNS
image: Android Design Patterns
WAYFINDING
STRUCTURE AS DESIGN PATTERNS

28. DESKTOP

30. image: flickr.com/photos/10ch
MAKING SENSE
MANAGING INFORMATION TO CREATE MEANING

31. “Typically information foraging must be analysed as
decision making under uncertainty”
— Peter Pirolli
CC image: lickr.com/photos/treerao/3064525586/

32. CC image: flickr.com/photos/cafnr/14352437798

35. THE HOMEPAGE IS DEAD

36. image: martinbelam.com

37. image: martinbelam.com

41. MOBILE CONTENT STRATEGY
image: abookapart.com image: sarawb.com

45. GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
NEWSLETTER
SIGNUP
CAROUSEL PHOTO
FEATURED THING
(3 WORDS MAX)
THING YOU WANT TO SHOW
(3 WORDS MAX)
SECONDARY SEARCH
LIST OF OTHER THINGS
(10 LINKS x 4 WORDS MAX)
NEWS
(5 LINKS x 10 WORDS MAX)
NAV SEARCH (SITE AND PUBS)
SLIDE TEASER SHORT
(10 WORDS MAX)
CAROUSEL
PHOTO
THUMB
THING YOU WANT TO SHOW
(3 WORDS MAX)
THING YOU WANT TO SHOW
(3 WORDS MAX)
LIST OF OTHER
THINGS
(5 LINKS x 4
WORDS MAX)
NEWS
(5 LINKS x 10
WORDS MAX)
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
NEWSLETTER
SIGNUP
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
LOGO AND SLOGAN
MAIN NAVIGATION
CAROUSEL PHOTO
FEATURED THING
(3 WORDS MAX)
FEATURED THING
(3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
THING YOU WANT TO SHOW
(10 LINKS x 4 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
NEWS
(5 LINKS x 10 WORDS MAX)

46. GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
NEWSLETTER
SIGNUP
CAROUSEL PHOTO
FEATURED THING
(3 WORDS MAX)
THING YOU WANT TO SHOW
(3 WORDS MAX)
SECONDARY SEARCH
LIST OF OTHER THINGS
(10 LINKS x 4 WORDS MAX)
NEWS
(5 LINKS x 10 WORDS MAX)
NAV SEARCH (SITE AND PUBS)
SLIDE TEASER SHORT
(10 WORDS MAX)
CAROUSEL
PHOTO
THUMB
THING YOU WANT TO SHOW
(3 WORDS MAX)
THING YOU WANT TO SHOW
(3 WORDS MAX)
LIST OF OTHER
THINGS
(5 LINKS x 4
WORDS MAX)
NEWS
(5 LINKS x 10
WORDS MAX)
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
NEWSLETTER
SIGNUP
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
LOGO AND SLOGAN
MAIN NAVIGATION
CAROUSEL PHOTO
FEATURED THING
(3 WORDS MAX)
FEATURED THING
(3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
THING YOU WANT TO SHOW
(10 LINKS x 4 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
THING YOU WANT TO SHOW
(100 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
OTHER THING
(50 WORDS MAX)
NEWS
(5 LINKS x 10 WORDS MAX)

48. “Metadata is a love note to the future”
— Karen McGrane
CC image: flickr.com/photos/zeldman/10027189005

51. BTW
image: flickr.com/photos/gregoryjordan

53. thank you
alberta soranzo | @albertatrebla | wearefriday.com