0
Designing YourMobile Site For The Desktop         Joe Hass  hassgocubs@gmail.com       @hassgocubsslideshare.net/hassgocubs
Worldwide Mobile                   Users versus PC                              Mobile Users                      PC Users...
Worldwide Mobile                          Shipments versus PC                        800                        700Global ...
Worldwide Mobile                          Shipments versus PC                        800                        700Global ...
Wi-Fi Device Usage  By OS/Product  1%                                    11%  25%  7%                                    3...
Wi-Fi Device UsageBy PC versus Mobile  33%   4%                                      58%                                  ...
Five Phases Of MobileDevelopmentA New Model Of ThinkingOvercoming TheDisbelieversResponsive Layouts AndMobile
Five Phases Of    Mobile Development
A New Model Of   Thinking
1. Figure out the most important/   frequently done things users do on the   desktop site or in a mobile environment2. “Ad...
PCMobile
PCMobile
PCMobile
Overcoming The  Objectives
Mobile devices are for,you know, being mobile.Our site isn’t like allthose other sites thatneed mobile.
Where Are Video Apps MostOutdoor On           UsedIn A Car               LocationsCommuting      On A Plane               ...
Where Are Video Apps Most Used On•At Home: 74%•In A Car: 55%•Other Indoor Locations: 48%•Outdoor Locations: 47%•While Wait...
One-Third Of Mobile DeviceUsage Is In The          http://advertising.yahoo.com/article/mobile-modes.html
Seven Modes Of Internet Usage         http://advertising.yahoo.com/article/mobile-modes.html
Time Spent On          Each ModeMobile Device               39%            16%         15%         10% 9% 7% 3%  PC Device...
United Mobile Home Page
United Mobile Home Page
United PC Home        PageCheck InFlight StatusMy Reservations“Flight Availability”MileagePlusFlight NotificationMultiple I...
United PC Home        PageCheck InFlight StatusMy Reservations“Flight Availability”MileagePlusFlight NotificationMultiple I...
One Solution: Responsive  Layouts
Bostonglobe.com
Bostonglobe.com
Bostonglobe.com
There are more smartphones andtablets sold than PCs.The native advantages of building formobile apply for PCs.What’s happe...
Acknowledge and embrace          unpredictability.Think and behave in a future-friendly                way.      Help othe...
Special Bonus   Factoid
Designing YourMobile Site For The Desktop         Joe Hass  hassgocubs@gmail.com       @hassgocubsslideshare.net/hassgocubs
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Designing For Mobile First
Upcoming SlideShare
Loading in...5
×

Designing For Mobile First

280

Published on

Presented at IUE 2011.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
280
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • Mary Meeker\nWorked for Morgan Stanley as a Internet Analyst since 1994 until December 2010\nOrganized the IPO for Netscape in August 1995\nBarron’s magazine called her “The Queen Of The Net” in 1998\nCalled the tech bubble in 1999\nHelped with the IPO for Google in August 2004\n\nApril 12, 2010, before leaving MS, she presented to Google. The eighth slide was this\n
  • This is April, 2010. She figured we were three years away from the point when there would be more mobile users worldwide than in desktop users.\n\nFast forward a whopping 10 months. She’s now at Kleiner Perkins Caufield & Byers, a VC. She did another presentation, where she dropped this data\n\n
  • http://www.businessinsider.com/mary-meeker-matt-murphy-2011-2#-7\n\n\n
  • \n
  • http://www.businessinsider.com/mary-meeker-matt-murphy-2011-2#-7\n\n\n
  • Fast forward to June of this year. Company called Meraki (manages wi-fi spots) pulled their annual data of who’s tapping their wi-fi. \n\nThey’re able to figure out who is tapping their networks. And this data shows some interesting points, but what if we simply flip it to two categories: Mobile and PCs\n\nhttp://gigaom.com/2011/06/21/mobile-devices-overtake-computers-on-wi-fi-networks/\nhttp://meraki.com/press-releases/2011/06/22/meraki-reveals-ipads-use-400-more-wi-fi-data-than-the-average-mobile-device/\n
  • http://gigaom.com/2011/06/21/mobile-devices-overtake-computers-on-wi-fi-networks/\n
  • \n
  • \n
  • \n
  • Phase 0: Who’s going to use the web on their phone?\n
  • Phase 1: The only people who’ll visit this are the techies.\n
  • Phase 2: The iPhone is the real Web. Steve Jobs said so!\n
  • Phase 3: Yeah, we’ll do something mobile right after we finish the real site.\n
  • Phase 4: We’re doing the mobile site hand-in-hand with the desktop site.\n\nIt’s Ebony & Ivory. But Paul’s still Paul, and Stevie’s still Stevie\n\nOn a marquee, you’re putting Sir Paul on top\n
  • \n
  • Key points for step 3\nSmaller screen size\nLower bandwidth\nTouch screen interaction\n\n
  • \n
  • What if there were no desktop?\n\nIf you were building only a mobile site today, what primary things you put on it?\nHow would a user manage and work their way through those things?\nWhat accommodations would you have to make to let the user do what they need to do?\n
  • Keep in mind that we’re aware that the capabilities of a mobile device aren’t nearly as good as a PC, for a variety of reasons: bandwidth, “multitasking”, \n
  • This doesn’t mean we’re going to build a desktop site that’s just the mobile site expanded to fill a 1024x768 space\n
  • We’re taking that streamline knowledge of the mobile site, with all the rules and restrictions, and filling it in. We’re taking advantage of the PC.\n
  • This does not mean that everything else just fills the space\n
  • \n
  • \n
  • \n
  • \n
  • Mobile devices are designed to be used, you know, mobilly.\nCable & Telecommunications Association for Marketing asked \n\nhttp://allthingsd.com/20110801/why-watch-tv-at-home-when-you-have-a-perfectly-good-iphone-to-squint-at/\n\nhttp://www.ctam.com/html/news/releases/2011-08-01.htm\n
  • http://allthingsd.com/20110801/why-watch-tv-at-home-when-you-have-a-perfectly-good-iphone-to-squint-at/\n\nhttp://www.ctam.com/html/news/releases/2011-08-01.htm\n
  • One-Third Of Mobile Device Usage Is In The Home\n\nhttp://advertising.yahoo.com/article/mobile-modes.html\n
  • Connect: SMS, IM, email, photo sharing, and social networking\nSearch: using a search engine to find information\nEntertain: music, virtual games, videos, articles\nManage: coordinating life (schedules, banking)\nInform: viewing news sites, portals, and blogs for news or educational material\nShop: shopping sites, comparison sites, coupon codes\nNavigate: finding destinations and using an online map or GPS system to give directions\n
  • The only group that shows a more than 7 percentage point drop is entertainment. Everything else is being done on in the same amount \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Reservations & check-in has My Reservations, Check In, Flight Status and Flight Notification\nLog In has MileagePlus and My Reservations\n
  • Reservations & check-in has My Reservations, Check In, Flight Status and Flight Notification\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • It has to be coded right to prevent excess download time.\nIt doesn’t absolve you of the need to do leg work.\n
  • \n
  • Luke Wroblewski has been a thought leader when it comes to this.\n\nA month ago, he and a bunch of folks had a little pow wow. They spent a couple days together, and they came up with the idea of being Future Friendly.\n\nThere’s a longer manifesto, but there are three points they ended with.\n\nMobile is future friendly. Building for mobile is future friendly. We as IXDs need to take this call to arms.\n\nWHAT QUESTIONS DO YOU HAVE FOR ME?\n
  • \n
  • \n
  • \n
  • http://mashable.com/2010/04/13/mobile-web-stats/\nhttp://venturebeat.com/2010/04/12/mary-meeker-mobile-internet/\nhttp://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/\nhttp://advertising.yahoo.com/article/mobile-modes.html\n
  • \n
  • http://blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011/\nhttp://gigaom.com/2011/06/21/mobile-devices-overtake-computers-on-wi-fi-networks/http://pewinternet.org/Reports/2011/Smartphones/Summary.aspx\n
  • Transcript of "Designing For Mobile First"

    1. 1. Designing YourMobile Site For The Desktop Joe Hass hassgocubs@gmail.com @hassgocubsslideshare.net/hassgocubs
    2. 2. Worldwide Mobile Users versus PC Mobile Users PC Users 2000 1600Users (Millions) 1200 800 400 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overta
    3. 3. Worldwide Mobile Shipments versus PC 800 700Global Unit Sales (M) 600 500 400 300 200 100 0 2005 2006 2007 2008 2009 2010 2011 2012 2013 Desktop PC Notebook PC Smartphones Tablets http://www.businessinsider.com/mary-meeker-matt-
    4. 4. Worldwide Mobile Shipments versus PC 800 700Global Unit Sales (M) 600 500 400 300 200 100 0 2005 2006 2007 2008 2009 2010 2011 2012 2013 PC Mobile http://www.businessinsider.com/mary-meeker-matt-
    5. 5. Wi-Fi Device Usage By OS/Product 1% 11% 25% 7% 32% 4% Android 18% 4% Apple iPhone 11% Apple iPad 6% Apple iPod 25% 7% Other 16% Windows XP 21% Windows 7/Vista 13% Mac OS X 2010 2011 http://meraki.com/press-releases/2011/06/22/meraki-reveals-ipads-use-400-more-wi-fi-data-than-
    6. 6. Wi-Fi Device UsageBy PC versus Mobile 33% 4% 58% Mobile 6% Other 64% PC 36% 2010 2011 http://meraki.com/press-releases/2011/06/22/meraki-reveals-ipads-use-400-more-wi-fi-data-than-
    7. 7. Five Phases Of MobileDevelopmentA New Model Of ThinkingOvercoming TheDisbelieversResponsive Layouts AndMobile
    8. 8. Five Phases Of Mobile Development
    9. 9. A New Model Of Thinking
    10. 10. 1. Figure out the most important/ frequently done things users do on the desktop site or in a mobile environment2. “Adjust them” for mobile3. Build within the limitations of portable devices4. ???5. PROFIT!!!
    11. 11. PCMobile
    12. 12. PCMobile
    13. 13. PCMobile
    14. 14. Overcoming The Objectives
    15. 15. Mobile devices are for,you know, being mobile.Our site isn’t like allthose other sites thatneed mobile.
    16. 16. Where Are Video Apps MostOutdoor On UsedIn A Car LocationsCommuting On A Plane At Restaurant/At Home CafeOther Indoor In SchoolLocations While Waiting InAt Malls LineIn Office http://www.ctam.com/html/news/releases/2011-08-01.htm
    17. 17. Where Are Video Apps Most Used On•At Home: 74%•In A Car: 55%•Other Indoor Locations: 48%•Outdoor Locations: 47%•While Waiting In Line: 47% http://www.ctam.com/html/news/releases/2011-08-01.htm
    18. 18. One-Third Of Mobile DeviceUsage Is In The http://advertising.yahoo.com/article/mobile-modes.html
    19. 19. Seven Modes Of Internet Usage http://advertising.yahoo.com/article/mobile-modes.html
    20. 20. Time Spent On Each ModeMobile Device 39% 16% 15% 10% 9% 7% 3% PC Devices 32% 10% 9% 27% 11% 13% Connect Search Manage Entertain Inform Shop Navigate http://advertising.yahoo.com/article/mobile-modes.html
    21. 21. United Mobile Home Page
    22. 22. United Mobile Home Page
    23. 23. United PC Home PageCheck InFlight StatusMy Reservations“Flight Availability”MileagePlusFlight NotificationMultiple Items
    24. 24. United PC Home PageCheck InFlight StatusMy Reservations“Flight Availability”MileagePlusFlight NotificationMultiple Items
    25. 25. One Solution: Responsive Layouts
    26. 26. Bostonglobe.com
    27. 27. Bostonglobe.com
    28. 28. Bostonglobe.com
    29. 29. There are more smartphones andtablets sold than PCs.The native advantages of building formobile apply for PCs.What’s happening on mobile devicesare the same things happeningon desktop machines.Users are treating their mobile devicesas primary machines rather thanalternate ones.
    30. 30. Acknowledge and embrace unpredictability.Think and behave in a future-friendly way. Help others do the same. futurefriend.ly
    31. 31. Special Bonus Factoid
    32. 32. Designing YourMobile Site For The Desktop Joe Hass hassgocubs@gmail.com @hassgocubsslideshare.net/hassgocubs
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×