際際滷

際際滷Share a Scribd company logo
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.   Understanding mobile context
2.   Becoming responsive
3.   Managing content
4.   Usable mobile design patterns
1.
     Understanding mobile
     context
Lets 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
Size
DOES
matter
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 {            .container {
   width: 960px;           width: 90%;
   margin: 0 auto;         margin: 0 auto;
 }                       }

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

 #sidebar {              #sidebar {
   float: right;           float: right;
   width: 340px;           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 {
 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;
 }
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    Some fonts wont 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
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
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
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

More Related Content

Content strategy for mobile