1 / 27

Developing a mobile website

Developing a mobile website. Erick Beck & John Chivvis Texas A&M University. TAMU mobile web: m.tamu.edu. Callouts. Jeff Carouth. Bob Timm. Mobile Users v . Desktop Users (within 5 years). Morgan Stanley Research – Global Mobile v . Desktop Internet User Projection, 2007-2015. 2000

ima
Télécharger la présentation

Developing a mobile website

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. Developing a mobile website Erick Beck & John Chivvis Texas A&M University

  2. TAMU mobile web: m.tamu.edu Callouts Jeff Carouth Bob Timm

  3. Mobile Users v. Desktop Users (within 5 years) Morgan Stanley Research – Global Mobilev. Desktop Internet User Projection, 2007-2015 2000 1600 1200 800 400 0 2007E 2008E 2009E 2010E 2011E 2012E 2013E 2014E 2015E

  4. I’ve never gotten good reception in here. Where have you been living? www.sxc.hu

  5. 2009: TAMUmobile for iPhone • 2010: Mobile Web Actually it’s time to go mobile.

  6. Elements of Mobile Web Development Native Apps vs. Web Content for mobile website HTML/CSS for mobile displays

  7. Native Apps v. Mobile Web Experience + Content Delivery Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video

  8. Pros/Cons of Native Apps • Pros • Controlled user experience • Use of hardware features • Off-line usage • Uses app code on device • Cons • Develop for each platform • Different experiences based on device • Cost/time of development/deployment • Testing not as easy • Upgrades/version require new downloads Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5-MP still camera | Internet access | Three-axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi-Fi | Cellular | Bluetooth 2.1 | Video

  9. Pros/Cons of Mobile Web • Pros • Cost/time to develop less • Upgrades quicker • Accessible to all/no installation • More discoverable • Cons • Customer satisfaction • User experience/performance depends on design • More difficult to access native device capabilities • No offline mode

  10. The Future That’s so 2009. Is there still an app for that? www.sxc.hu

  11. The Future But not this lady. Has one, too. Has one, too. Has one, too. So do they. So do they. Has one, too. Has a smartphone

  12. Making the Transition • Websites: • fast, inexpensive development • quickly conveying content • Tapping into AJAX/CSS, improved browsers for similar experiences across devices. • App: • high profile projects • intensive graphics/animations • self-contained/offline • tapping into the device's hardware (camera, GPS, accelerometer, etc.)

  13. Mobile Web Design Déjà vu, man. • We've come full circle to what those communicators in the audience already knew, “Content is King.” • Focus on your content and user experience and then design accordingly. This looks familiar. Welcome back.

  14. Who to design for? b) OfficeJim’s Droid. a)rockStar’s iPhone. c) Carg0Dude’s TracFone. e) All of the above. d) creeper’s Blackberry.

  15. “Sir, the possibility of successfully navigating the mobile user-agent field is approximately 3720 to 1.” Image - http://hubblesite.org/ Quote - Return Of The Mobile Stylesheet by Dominique Hazaël-Massieux, alistapart.com

  16. Design Choices Icons • Be consistent. • Follow standard conventions so as not to confuse your users. • Give the user the navigational/UI experience they expect. Lists

  17. Content Design Mobile site needs to be lean, fast • Display the content • Need a faster method of getting to their content • Attracts high traffic from desktop users

  18. Mobile Content “The user IS mobile, not just HOLDING one.” -Justin Gatewood, Victor Valley Community College District Mobile girl under trees with mobile device

  19. Mobile Content Avg. NYT article length: 1,200 words Avg. Online article: 250-500 words • Making a mobile website is not the same as making your website mobile. • Customize your content. Twitter length: 140 char. http://www.flickr.com/photos/46550265@N02/4428701815/

  20. Mobile Content

  21. Mobile Content What do they want?

  22. Mobile Content But wait, why’s this here?

  23. Analyze & offer What’s the “A&M” stand for? What’s an “Aggie”?

  24. Lessons learned • Don't worry about publishing everything at once. • Be willing to make mistakes. • Be flexible. • Look for partners. • Design & redesign.

  25. Campus partners

  26. Bringing it all full circle • Integrating data • New partnerships • New features • Updates, updates

  27. Questions/Contacts • Mobile: m.tamu.edu • TAMUmobile (Apps & Web): www.tamu.edu/mobile • Blog: webmaster.tamu.edu • Web: www.tamu.edu • Erick: ebeck@tamu.edu • John: chiv@tamu.edu

More Related