狠狠撸

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

1. Understanding mobile context
2. Becoming responsive
3. Managing content
4. Usable mobile design patterns

1.
Understanding mobile
context

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

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

? 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

Acknowledge shitloads of
resolutions

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.

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

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)

Ingredients
? fluid layouts
? media queries
? responsive images

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 { .container {
width: 960px; width: 90%;
margin: 0 auto; margin: 0 auto;
} }

#content { #content {
float: left; float: left;
margin: 0 20px 0 0; margin: 0 5% 0 0;
} }

#sidebar { #sidebar {
float: right; float: right;
} }

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 {
body { font: 100% Helvetica,
font: 100% Helvetica, Arial, sans-serif;
Arial, sans-serif; }
}
h1 {
h1 { font-size: 3.125rem;
font-size: 50px; /* 50px / 16px */
} }

p { p {
font-size: 13px; 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;
}

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

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 (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 ? Some fonts won’t work on
? No Blackberry support iOS 4 and below
? Cannot download fonts
? Pricing plans and their
limitations

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

Touch areas
visual target area

touch area

target

start

Fitts’s law
What UX designers love

Source: static.lukew.com/TouchGestureCards.pdf

Guidelines for devs & designers
Android
http://developer.android.com/guide/index.html

iOS
http://developer.apple.com/library/ios/navigation/

Microsoft
http://msdn.microsoft.com/en-us/library/cc872774.aspx

Recommended reading
? Cloud Four blog
? Quirksmode
? Brad Frost blog
? Designing Mobile Interfaces from O’Reilly
? Filament group blog
? Luke Wroblewski blog

thank you
@karolinaszczur
slideshare.net/karolinaszczur

狠狠撸

Content strategy for mobile

More Related Content

Content strategy for mobile