Download
mobile first n.
Skip this Video
Loading SlideShow in 5 Seconds..
Mobile First PowerPoint Presentation
Download Presentation
Mobile First

Mobile First

373 Views Download Presentation
Download Presentation

Mobile First

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Mobile First

  2. Mobile-first RWD

  3. Growth of Mobile Usage • Commerce • Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile • Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M • Social • Amazon: over $1 billion spent via mobile devices in the past 12 months • eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009 • Best Buy: mobile Web users doubling every year: 30M (10), 17M (09), 6M (08) • Productivity & Media • Google: mobile searches grew 130% in Q3 2010 • Pandora: 50% of total user base subscribes to the service on mobile • Email: 70% of smartphone users have accessed email on mobile device

  4. Shift in Usage

  5. Why Go Mobile First? • Prepares you for the explosive growth and new opportunities emerging on mobile today • Forces you to focus and prioritize your products by embracing the constraints inherent in mobile design • Allows you to deliver innovative experiences by building on new capabilities native to mobile devices and modes of use

  6. Embracing Constraints • Screen Size • Speeds of Networks • Modes of Use

  7. Constraint: Screen Size • 1024x768px standard screen size on PC • 320x480px for mobile = 80% of the screen space from the desktop was missing

  8. Example

  9. Example

  10. Constraint: Screen Size • Forces focus • Need to know what matters most • Why should screen size change the priority?

  11. Constraint: Speeds of Networks • Reduce Requests & File Size • Eliminate redirects • Use CSS sprites to serve multiple images • Consolidate CSS & Javascript into a single file • Reduce dependencies on heavy Javascriptlibraries • Minify your code Take Advantage of HTML5, etc. • Use proper http headers for caching • Load contents lazily • Use application cache for local content storage • Use CSS3 and canvas tag instead of images where possible

  12. Image Sprites • .twitter, .facebook, etc{ background: url(‘images/sprites.png') no-repeat; width: 78px; height: 78px;} • .twitter{ background-position: 0 0;} • .facebook{ background-position: 0 78px; } <div class=“twitter”></div> <div class=“facebook”></div>

  13. Constraint: Time and Place • Designing something that can be used anywhere and anytime • Location • “One eyeball and one thumb” • Time • Different Devices at different times • Where people used their smartphones and found • 84% use them at home • 80% use them during miscellaneous downtime throughout he day • 74% use them while waiting in lines or waiting for appointments • 69% use them while shopping • 64% use them at work • 62% use them while watching TV (a different study claims 84%) • 47% use them during their commute

  14. When are we mobile?

  15. When are we mobile?

  16. When are we mobile?

  17. Constraints: Conclusion • Embrace constraints to develop an elegant mobile-appropriate solution • Prioritize what really matters • Require you to be vigilant about performancethey • Force you to think differently about how people will use your products throughout their day

  18. Download Book • Download Luke W’s Mobile First on the course website.