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

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

Similar to Content strategy for mobile (20)

Recently uploaded (20)

Content strategy for mobile