Content strategy for mobile
32 likes2,558 views
Talk given at Appspirina barcamp on March 29th, 2012 in Warsaw organized by http://mobiledeveloper.pl/.
Content strategy for mobile
- 1. Content strategy for mobile & WHY THE HECK SHOULD I CARE? by @karolinaszczur
- 2. Whos that girl? Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized. karolinaszczur
- 3. 1. Understanding mobile context 2. Becoming responsive 3. Managing content 4. Usable mobile design patterns
- 4. 1. Understanding mobile context
- 5. 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
- 6. 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
- 7. Browser stats Safari - 25% Android - 23% Opera - 22% Nokia - 11% Blackberry - 7% Source: gs.statcounter.com
- 8. 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
- 9. 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
- 10. Size DOES matter
- 12. 320x240
- 13. 320x240 320x480
- 14. 320x240 320x480 360x480
- 15. 640x940 320x240 320x480 360x480
- 16. Dealing with different screen sizes: avoid limiting, pixel-perfect layouts avoid device-specific elements
- 17. Start with the content, not the device.
- 18. There are some myths about mobile context
- 19. Mobile users are distracted and in a rush.
- 20. Taps != clicks
- 21. 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
- 22. Mobile is about apps.
- 24. But whats content (strategy) anyway?
- 25. In the web industry, anything that conveys meaningful information to humans is called content. Erin Kissane, The Elements of Content Strategy (A Book Apart)
- 26. Content strategy plans for the creation, publication, and governance of useful, usable content. Kristina Halvorson, The Discipline of Content Strategy (A List Apart)
- 27. 2. Becoming responsive
- 28. Ingredients fluid layouts media queries responsive images
- 29. Layouts fixed / fluid / adaptive / elastic
- 30. Layouts fixed / fluid / adaptive / elastic
- 31. Good ol rules widths in percentages font sizes in ems/rems concertina paddings
- 32. Basic markup <div class=container> <div id=content role=main></div> <aside id=sidebar role=complementary> </aside> </div>
- 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. 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. Say hi to relative font-sizing set body font-size to 100% use target/context rule
- 36. Font sizes body { font: 100% Helvetica, Arial, sans-serif; } h1 { font-size: 50px; } p { font-size: 13px; }
- 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. Media queries Expanding media attribute to serve content for different users.
- 40. Set proper size img { max-width: 100%; } figure img { overflow: hidden; }
- 41. 3. Managing content
- 43. Common breakpoints 320px - mobile portrait 480px - mobile landscape 600px - small tablet 768px - tablet portrait 1024px - tablet landscape/netbook 1280px - desktop
- 44. The case of Smashing Magazine 400px 560px
- 45. 630px 820px
- 46. EMs for resolution independence
- 47. Goldilocks approach device independence adjusting the number of columns per available width to fill
- 48. Mobile typography Mobile and small screen design is largely about communicating information to the user. Steven Hoober, Designing Mobile Interfaces (OReilly)
- 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. 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
- 51. The anatomy of type Source: ad74.co.uk/good_to_know/anatomy_of_type.html
- 52. Rules Unstressed forms No excessive descenders Space efficiency Include italics 50-60 chars per line
- 53. 4. Mobile usability and design patterns
- 54. Designing for touch
- 55. Touch areas visual target area touch area
- 56. 16-22mm 25mm
- 57. target start Fittss law What UX designers love
- 59. 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
- 61. Top navigation
- 63. Select menu
- 64. Toggle
- 65. Flyout
- 67. Fluid layout
- 68. Column drop
- 69. Layout shifts
- 71. Recommended reading Cloud Four blog Quirksmode Brad Frost blog Designing Mobile Interfaces from OReilly Filament group blog Luke Wroblewski blog