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

Google

• 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 you@karolinaszczurslideshare.net/karolinaszczur