Content strategy for mobile
-
Upload
karolina-szczur -
Category
Design
-
view
4.034 -
download
2
description
Transcript of Content strategy for mobile
Content strategy for mobile WHY THE HECK
SHOULD I CARE?
by @karolinaszczur
&
Who’s that girl?Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized.
karolinaszczur
Understanding mobile context1.
Becoming responsive2.
Managing content3.
Usable mobile design patterns4.
Understanding mobile context
1.
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
• 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
• Safari - 25%• Android - 23%• Opera - 22%• Nokia - 11%• Blackberry - 7%Source: gs.statcounter.com
Browser stats
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
• 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
Size DOESmatter
Acknowledge shitloads ofresolutions
320x240
320x240320x480
320x240320x480
360x480
320x240320x480
360x480
640x940
Dealing with different screen sizes:• avoid limiting, pixel-perfect layouts• avoid device-specific elements
Start with the content, not the device.
There are some myths about mobile context
Mobile users are distracted and in a rush.
Taps != clicks
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
”
Mobile is about apps.
There’s mobile web!
But what’s content (strategy)anyway?
In the web industry, anything that conveys meaningful information to humans is called „content”.
Erin Kissane, The Elements of Content Strategy (A Book Apart)
”
Content strategy plans for the creation, publication, and governance of useful, usable content.
Kristina Halvorson, The Discipline of Content Strategy (A List Apart)
”
Becoming responsive2.
Ingredients• fluid layouts• media queries• responsive images
Layoutsfixed / fluid / adaptive / elastic
Layoutsfixed / fluid / adaptive / elastic
Good ’ol rules• widths in percentages• font sizes in ems/rems • concertina paddings
Basic markup<div class=”container”><div id=”content” role=”main”></div><aside id=”sidebar” role=”complementary”></aside></div>
Fixed layout.container { width: 960px; margin: 0 auto;}
#content { float: left; width: 700px; margin: 0 20px 0 0;}
#sidebar { float: right; width: 340px;}
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%;}
Say „hi” to relative font-sizing• set body font-size to 100%• use target/context rule
Font sizes
body { font: 100% Helvetica, Arial, sans-serif;}
h1 { font-size: 50px;}
p { font-size: 13px;}
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 */}
Media queriesExpanding media attribute to serve content for different users.
Responsive mediaw3.org/community/respimg
Set proper sizeimg { max-width: 100%;}
figure img { overflow: hidden;}
Managing content3.
Breakpoints vs. reference points
Common breakpoints• 320px - mobile portrait• 480px - mobile landscape• 600px - small tablet• 768px - tablet portrait• 1024px - tablet landscape/netbook• 1280px - desktop
The case of Smashing Magazine400px 560px
630px 820px
EMs for resolution independence
Goldilocks approach
• device independence• adjusting the number of columns per available width to fill
Mobile typographyMobile and small screen design is largely about communicating information to the user.
Steven Hoober, Designing Mobile Interfaces (O’Reilly)
”
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
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
The anatomy of type
Source: ad74.co.uk/good_to_know/anatomy_of_type.html
Rules• Unstressed forms• No excessive descenders• Space efficiency• Include italics• 50-60 chars per line
Mobile usability anddesign patterns
4.
Designing for touch
Touch areas
visual target area
touch area
16-22mm
25mm
Fitts’s lawWhat UX designers love
target
start
Source: static.lukew.com/TouchGestureCards.pdf
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
Patterns for navigation
Top navigation
Bottom navigation
Select menu
Toggle
Flyout
Patterns for layouts
Fluid layout
Column drop
Layout shifts
Off canvas flyouts
Recommended reading• Cloud Four blog• Quirksmode• Brad Frost blog• Designing Mobile Interfaces from O’Reilly• Filament group blog • Luke Wroblewski blog
thank [email protected]/karolinaszczur