1 / 18

Mobile First

Mobile First. Mobile-first RWD. 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

geri
Download Presentation

Mobile First

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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.

More Related