Content strategy for mobile

4,663 views

Published on

Talk given at Appspirina barcamp on March 29th, 2012 in Warsaw organized by http://mobiledeveloper.pl/.

Published in: Design, Technology, Art & Photos
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,663
On SlideShare
0
From Embeds
0
Number of Embeds
217
Actions
Shares
0
Downloads
167
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

Content strategy for mobile

  1. 1. Content strategyfor mobile & WHY THE HECK SHOULD I CARE?by @karolinaszczur
  2. 2. Who’s that girl?Front-end dev and designer with 7years of experience. Earlier workedat AdTaily and Applicake. Currently@XHTMLized. karolinaszczur
  3. 3. 1. Understanding mobile context2. Becoming responsive3. Managing content4. Usable mobile design patterns
  4. 4. 1. Understanding mobile context
  5. 5. Let’s talk some numbers• by 2014 mobile internet usage should exceeddesktop internet usage• smartphone owners outnumbered other mobileusers in US• Nokia 35%, Apple 30%, Samsung 15%, RIM8%, HTC 3.5%, Google 0.3%Source: ComScore reports, TechCrunch
  6. 6. • 61% customers who visit a unfriendly site go tothe competition• 55% increase in smartphone subscriptions in USmaking it 98mln users• 425 milion mobile Facebook users monthlySource: shapshop.com/2012-mobile-marketing-statistics
  7. 7. Browser stats• Safari - 25%• Android - 23%• Opera - 22%• Nokia - 11%• Blackberry - 7%Source: gs.statcounter.com
  8. 8. Apple• 7% of overall iPad traffic comes from „the new”iPad• iPhones take 3 top places in US, and 3 out of 5 inEU5 countries• 60% of connected devices traffic in US comesfrom iPods, iPhones and iPads• iPhone 4 ranked as top acquired phone in US/EU5 in 2011Source: ComScore
  9. 9. Google• Andoid tablets have 27% market share• Half milion Android devices sold daily accordingto Andy Rubin• Android outnumbered iPhone in US• Most popular OS - Android 2.3.3 - 2.3.7Gingerbread with 61.5% distributionSource: ComScore
  10. 10. SizeDOESmatter
  11. 11. Acknowledge shitloads ofresolutions
  12. 12. 320x240
  13. 13. 320x240 320x480
  14. 14. 320x240 320x480 360x480
  15. 15. 640x940 320x240 320x480 360x480
  16. 16. Dealing with differentscreen sizes:• avoid limiting, pixel-perfect layouts• avoid device-specific elements
  17. 17. Start with the content, notthe device.
  18. 18. There are some mythsabout mobile context
  19. 19. Mobile users are distractedand in a rush.
  20. 20. Taps != clicks
  21. 21. The feature set should be muchsmaller for a mobile site than for adesktop site.” Jakob Nielsen, useit.com/alertbox/mobile-ux-guidelines.html
  22. 22. Mobile is about apps.
  23. 23. There’s mobile web!
  24. 24. But what’s content (strategy)anyway?
  25. 25. In the web industry, anything thatconveys meaningful information tohumans is called „content”.” Erin Kissane, The Elements of Content Strategy (A Book Apart)
  26. 26. Content strategy plans for thecreation, publication, and governanceof useful, usable content.” Kristina Halvorson, The Discipline of Content Strategy (A List Apart)
  27. 27. 2. Becoming responsive
  28. 28. Ingredients• fluid layouts• media queries• responsive images
  29. 29. Layoutsfixed / fluid / adaptive / elastic
  30. 30. Layoutsfixed / fluid / adaptive / elastic
  31. 31. Good ’ol rules• widths in percentages• font sizes in ems/rems• concertina paddings
  32. 32. Basic markup<div class=”container”><div id=”content” role=”main”></div><aside id=”sidebar” role=”complementary”></aside></div>
  33. 33. Fixed layout .container { width: 960px; margin: 0 auto; } #content { float: left; width: 700px; margin: 0 20px 0 0; } #sidebar { float: right; width: 340px; }
  34. 34. 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%; } }
  35. 35. Say „hi” to relative font-sizing• set body font-size to 100%• use target/context rule
  36. 36. Font sizes body { font: 100% Helvetica, Arial, sans-serif; } h1 { font-size: 50px; } p { font-size: 13px; }
  37. 37. 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 */ }
  38. 38. Media queriesExpanding media attribute to serve content fordifferent users.
  39. 39. Responsive mediaw3.org/community/respimg
  40. 40. Set proper size img { max-width: 100%; } figure img { overflow: hidden; }
  41. 41. 3. Managing content
  42. 42. Breakpoints vs.reference points
  43. 43. Common breakpoints• 320px - mobile portrait• 480px - mobile landscape• 600px - small tablet• 768px - tablet portrait• 1024px - tablet landscape/netbook• 1280px - desktop
  44. 44. The case of Smashing Magazine400px 560px
  45. 45. 630px 820px
  46. 46. EMs for resolution independence
  47. 47. Goldilocks approach• device independence• adjusting the number of columnsper available width to fill
  48. 48. Mobile typographyMobile and small screen design islargely about communicatinginformation to the user.” Steven Hoober, Designing Mobile Interfaces (O’Reilly)
  49. 49. 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
  50. 50. 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 theirlimitations
  51. 51. The anatomy of typeSource: ad74.co.uk/good_to_know/anatomy_of_type.html
  52. 52. Rules• Unstressed forms• No excessive descenders• Space efficiency• Include italics• 50-60 chars per line
  53. 53. 4. Mobile usability and design patterns
  54. 54. Designing for touch
  55. 55. Touch areas visual target area touch area
  56. 56. 16-22mm 25mm
  57. 57. target startFitts’s lawWhat UX designers love
  58. 58. Source: static.lukew.com/TouchGestureCards.pdf
  59. 59. Guidelines for devs & designersAndroidhttp://developer.android.com/guide/index.htmliOShttp://developer.apple.com/library/ios/navigation/Microsofthttp://msdn.microsoft.com/en-us/library/cc872774.aspx
  60. 60. Patterns for navigation
  61. 61. Top navigation
  62. 62. Bottom navigation
  63. 63. Select menu
  64. 64. Toggle
  65. 65. Flyout
  66. 66. Patterns for layouts
  67. 67. Fluid layout
  68. 68. Column drop
  69. 69. Layout shifts
  70. 70. Off canvas flyouts
  71. 71. Recommended reading• Cloud Four blog• Quirksmode• Brad Frost blog• Designing Mobile Interfaces from O’Reilly• Filament group blog• Luke Wroblewski blog
  72. 72. thank you@karolinaszczurslideshare.net/karolinaszczur

×