180 likes | 578 Views
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
E N D
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
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
Embracing Constraints • Screen Size • Speeds of Networks • Modes of Use
Constraint: Screen Size • 1024x768px standard screen size on PC • 320x480px for mobile = 80% of the screen space from the desktop was missing
Constraint: Screen Size • Forces focus • Need to know what matters most • Why should screen size change the priority?
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
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>
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
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
Download Book • Download Luke W’s Mobile First on the course website.