Content strategy for mobile &

WHY THE HECK SHOULD I CARE?

by @karolinaszczur

Whos that girl?

Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized.
karolinaszczur

1. 2. 3. 4.

Understanding mobile context Becoming responsive Managing content Usable mobile design patterns

1.

Understanding mobile context

Lets talk some numbers

by 2014 mobile internet usage should exceed
desktop internet usage users in US

smartphone owners outnumbered other mobile 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

Browser stats
Safari - 25% Android - 23% Opera - 22% Nokia - 11% Blackberry - 7%
Source: gs.statcounter.com

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 EU5 in 2011
Source: ComScore

iPhone 4 ranked as top acquired phone in US/

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

DOES
matter

Size

Acknowledge shitloads of resolutions

320x240

320x240 320x480

320x240 320x480

360x480

640x940 320x240 320x480

360x480

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.

Theres mobile web!

But whats 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)

2. Becoming responsive

Ingredients
fluid layouts media queries responsive images

Layouts
fixed / fluid / adaptive / elastic

Layouts
fixed / 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 queries

Expanding media attribute to serve content for different users.

Responsive media
w3.org/community/respimg

Set proper size

img { max-width: 100%; } figure img { overflow: hidden; }

3. Managing content

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 Magazine

400px 560px

630px

820px

EMs for resolution independence

Goldilocks approach
device independence adjusting the number of columns
per available width to fill

Mobile typography
Mobile and small screen design is largely about communicating information to the user.

Steven Hoober, Designing Mobile Interfaces (OReilly)

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 wont 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

4.

Mobile usability and design patterns

Designing for touch

Touch areas
visual target area touch area

16-22mm

25mm

target start

Fittss law

What UX designers love

Source: static.lukew.com/TouchGestureCards.pdf

Guidelines for devs & designers

Android iOS
http://developer.android.com/guide/index.html http://developer.apple.com/library/ios/navigation/

Microsoft

http://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 OReilly Filament group blog Luke Wroblewski blog

thank you
@karolinaszczur slideshare.net/karolinaszczur