content strategy for mobile
DESCRIPTION
Talk given at Appspirina barcamp on March 29th, 2012 in Warsaw organized by http://mobiledeveloper.pl/.TRANSCRIPT
![Page 1: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/1.jpg)
Content strategy for mobile WHY THE HECK
SHOULD I CARE?
by @karolinaszczur
&
![Page 2: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/2.jpg)
Who’s that girl?Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized.
karolinaszczur
![Page 3: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/3.jpg)
Understanding mobile context1.
Becoming responsive2.
Managing content3.
Usable mobile design patterns4.
![Page 4: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/4.jpg)
Understanding mobile context
1.
![Page 5: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/5.jpg)
Let’s talk some numbers• by 2014 mobile internet usage should exceed desktop internet usage
• smartphone owners outnumbered other mobile users in US
• Nokia 35%, Apple 30%, Samsung 15%, RIM 8%, HTC 3.5%, Google 0.3%
Source: ComScore reports, TechCrunch
![Page 6: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/6.jpg)
• 61% customers who visit a unfriendly site go to the competition
• 55% increase in smartphone subscriptions in US making it 98mln users
• 425 milion mobile Facebook users monthly
Source: shapshop.com/2012-mobile-marketing-statistics
![Page 7: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/7.jpg)
• Safari - 25%• Android - 23%• Opera - 22%• Nokia - 11%• Blackberry - 7%Source: gs.statcounter.com
Browser stats
![Page 8: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/8.jpg)
Apple • 7% of overall iPad traffic comes from „the new” iPad
• iPhones take 3 top places in US, and 3 out of 5 in EU5 countries
• 60% of connected devices traffic in US comes from iPods, iPhones and iPads
• iPhone 4 ranked as top acquired phone in US/EU5 in 2011
Source: ComScore
![Page 9: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/9.jpg)
• Andoid tablets have 27% market share
• Half milion Android devices sold daily according to Andy Rubin
• Android outnumbered iPhone in US
• Most popular OS - Android 2.3.3 - 2.3.7 Gingerbread with 61.5% distribution
Source: ComScore
![Page 10: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/10.jpg)
Size DOESmatter
![Page 11: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/11.jpg)
Acknowledge shitloads ofresolutions
![Page 12: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/12.jpg)
320x240
![Page 13: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/13.jpg)
320x240320x480
![Page 14: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/14.jpg)
320x240320x480
360x480
![Page 15: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/15.jpg)
320x240320x480
360x480
640x940
![Page 16: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/16.jpg)
Dealing with different screen sizes:• avoid limiting, pixel-perfect layouts• avoid device-specific elements
![Page 17: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/17.jpg)
Start with the content, not the device.
![Page 18: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/18.jpg)
There are some myths about mobile context
![Page 19: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/19.jpg)
Mobile users are distracted and in a rush.
![Page 20: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/20.jpg)
Taps != clicks
![Page 21: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/21.jpg)
The feature set should be much smaller for a mobile site than for a desktop site.
Jakob Nielsen, useit.com/alertbox/mobile-ux-guidelines.html
”
![Page 22: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/22.jpg)
Mobile is about apps.
![Page 23: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/23.jpg)
There’s mobile web!
![Page 24: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/24.jpg)
But what’s content (strategy)anyway?
![Page 25: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/25.jpg)
In the web industry, anything that conveys meaningful information to humans is called „content”.
Erin Kissane, The Elements of Content Strategy (A Book Apart)
”
![Page 26: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/26.jpg)
Content strategy plans for the creation, publication, and governance of useful, usable content.
Kristina Halvorson, The Discipline of Content Strategy (A List Apart)
”
![Page 27: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/27.jpg)
Becoming responsive2.
![Page 28: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/28.jpg)
Ingredients• fluid layouts• media queries• responsive images
![Page 29: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/29.jpg)
Layoutsfixed / fluid / adaptive / elastic
![Page 30: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/30.jpg)
Layoutsfixed / fluid / adaptive / elastic
![Page 31: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/31.jpg)
Good ’ol rules• widths in percentages• font sizes in ems/rems • concertina paddings
![Page 32: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/32.jpg)
Basic markup<div class=”container”><div id=”content” role=”main”></div><aside id=”sidebar” role=”complementary”></aside></div>
![Page 33: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/33.jpg)
Fixed layout.container { width: 960px; margin: 0 auto;}
#content { float: left; width: 700px; margin: 0 20px 0 0;}
#sidebar { float: right; width: 340px;}
![Page 34: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/34.jpg)
Fluid layout.container { width: 960px; margin: 0 auto;}
#content { float: left; width: 700px; margin: 0 20px 0 0;}
#sidebar { float: right; width: 340px;}
.container { width: 90%; margin: 0 auto;}
#content { float: left; width: 65%; margin: 0 5% 0 0;}
#sidebar { float: right; width: 30%;}
![Page 35: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/35.jpg)
Say „hi” to relative font-sizing• set body font-size to 100%• use target/context rule
![Page 36: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/36.jpg)
Font sizes
body { font: 100% Helvetica, Arial, sans-serif;}
h1 { font-size: 50px;}
p { font-size: 13px;}
![Page 37: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/37.jpg)
Relative font sizes
body { font: 100% Helvetica, Arial, sans-serif;}
h1 { font-size: 50px;}
p { font-size: 13px;}
body { font: 100% Helvetica, Arial, sans-serif;}
h1 { font-size: 3.125rem; /* 50px / 16px */}
p { font-size: 0.8125rem; /* 13px / 16px */}
![Page 38: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/38.jpg)
Media queriesExpanding media attribute to serve content for different users.
![Page 39: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/39.jpg)
Responsive mediaw3.org/community/respimg
![Page 40: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/40.jpg)
Set proper sizeimg { max-width: 100%;}
figure img { overflow: hidden;}
![Page 41: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/41.jpg)
Managing content3.
![Page 42: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/42.jpg)
Breakpoints vs. reference points
![Page 43: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/43.jpg)
Common breakpoints• 320px - mobile portrait• 480px - mobile landscape• 600px - small tablet• 768px - tablet portrait• 1024px - tablet landscape/netbook• 1280px - desktop
![Page 44: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/44.jpg)
The case of Smashing Magazine400px 560px
![Page 45: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/45.jpg)
630px 820px
![Page 46: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/46.jpg)
EMs for resolution independence
![Page 47: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/47.jpg)
Goldilocks approach
• device independence• adjusting the number of columns per available width to fill
![Page 48: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/48.jpg)
Mobile typographyMobile and small screen design is largely about communicating information to the user.
Steven Hoober, Designing Mobile Interfaces (O’Reilly)
”
![Page 49: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/49.jpg)
Fonts breakdown• Arial, Baskerville, Bodoni, Courier New, Georgia, Helvetica, Trebuchet, Verdana for iOS
• Droid fonts, Roboto for Android
• Arial, Comic Sans, Georgia, Impact, Tahoma, Times New Roman, Verdana, Windings for Blackberry
![Page 50: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/50.jpg)
Webfonts
• Not so good JS performance• No Blackberry support• Cannot download fonts• Pricing plans and their limitations
• Some fonts won’t work on iOS 4 and below
![Page 51: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/51.jpg)
The anatomy of type
Source: ad74.co.uk/good_to_know/anatomy_of_type.html
![Page 52: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/52.jpg)
Rules• Unstressed forms• No excessive descenders• Space efficiency• Include italics• 50-60 chars per line
![Page 53: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/53.jpg)
Mobile usability anddesign patterns
4.
![Page 54: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/54.jpg)
Designing for touch
![Page 55: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/55.jpg)
Touch areas
visual target area
touch area
![Page 56: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/56.jpg)
16-22mm
25mm
![Page 57: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/57.jpg)
Fitts’s lawWhat UX designers love
target
start
![Page 58: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/58.jpg)
Source: static.lukew.com/TouchGestureCards.pdf
![Page 59: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/59.jpg)
Guidelines for devs & designersAndroidhttp://developer.android.com/guide/index.html
iOShttp://developer.apple.com/library/ios/navigation/
Microsofthttp://msdn.microsoft.com/en-us/library/cc872774.aspx
![Page 60: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/60.jpg)
Patterns for navigation
![Page 61: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/61.jpg)
Top navigation
![Page 62: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/62.jpg)
Bottom navigation
![Page 63: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/63.jpg)
Select menu
![Page 64: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/64.jpg)
Toggle
![Page 65: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/65.jpg)
Flyout
![Page 66: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/66.jpg)
Patterns for layouts
![Page 67: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/67.jpg)
Fluid layout
![Page 68: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/68.jpg)
Column drop
![Page 69: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/69.jpg)
Layout shifts
![Page 70: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/70.jpg)
Off canvas flyouts
![Page 71: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/71.jpg)
Recommended reading• Cloud Four blog• Quirksmode• Brad Frost blog• Designing Mobile Interfaces from O’Reilly• Filament group blog • Luke Wroblewski blog
![Page 72: Content strategy for mobile](https://reader030.vdocument.in/reader030/viewer/2022020207/5555ca7cd8b42aaf158b49a1/html5/thumbnails/72.jpg)
thank [email protected]/karolinaszczur