developing a mobile website - highedweb conference 2010
TRANSCRIPT
Developing a mobile website
Erick Beck & John Chivvis
Texas A&M University
TAMU mobile web:
m.tamu.edu
Bob Timm
Jeff Carouth
Callouts
2000
1600
1200
800
400
0
2007E 2008E 2009E 2010E 2011E 2012E 2013E 2014E 2015E
Mobile Users v. Desktop Users (within 5 years)
Morgan Stanley Research – Global Mobile v. Desktop Internet User Projection, 2007-2015
I’ve never gotten good reception in here.
Where have you been living?
www.sxc.hu
Actually it’s time to go mobile.
• 2010: Mobile Web
• 2009: TAMUmobile for iPhone
Elements of Mobile Web Development
Native Apps vs. Web
HTML/CSS for mobile displays
Content for mobile website
Native Apps v. Mobile Web
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 compassThree-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
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 compassThree-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
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
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
The Future
www.sxc.hu
Is there still an appfor that?
That’s so 2009.
Has a smartphone
Has one, too.
Has one, too.
Has one, too.
Has one, too.
So do they.So do they.
But not this lady.
The Future
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.)
Mobile Web Design
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.
Who to design for?
a) rockStar’siPhone.
b) OfficeJim’s Droid.
c) Carg0Dude’s TracFone.
d) creeper’s Blackberry.
e) All of the above.
“Sir, the possibility of successfullynavigating the mobile user-agentfield is approximately 3720 to 1.”
Image - http://hubblesite.org/Quote - Return Of The Mobile Stylesheet by Dominique Hazaël-Massieux, alistapart.com
Design ChoicesIcons
Lists
• Be consistent.
• Follow standard conventions so as not to confuse your users.
• Give the user the navigational/UI experience they expect.
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
Mobile Content
“The user IS mobile, not just HOLDING one.”-Justin Gatewood, Victor Valley Community College District
Mobile girl under trees with mobile device
Mobile Content
• Making a mobile website is not the same as making your website mobile.
• Customize your content.
http://www.flickr.com/photos/46550265@N02/4428701815/
Avg. NYT article length: 1,200 words
Avg. Online article: 250-500 words
Twitter length: 140 char.
Mobile Content
Mobile Content
What do they want?
Mobile Content
But wait, why’s this here?
What’s the “A&M” stand for?
What’s an “Aggie”?
Analyze & offer
0
10,000
20,000
30,000
40,000
50,000
60,000
70,000
11/21/05 11/22/05 11/23/05 11/24/05 11/25/05 11/26/05 11/27/05
Overall
Mobile
Texas A&M overall web traffic v. mobile traffic Nov. 22-28, 2009
Lessons learned
Don't worry about publishing everything at once.
Be willing to make mistakes.
Be flexible.
Look for partners.
Design & redesign.
Campus partners
Bringing it all full circle
• Integrating data
• New partnerships
• New features
• Updates, updates
Questions/Contacts
• Mobile: m.tamu.edu
• TAMUmobile (Apps & Web): www.tamu.edu/mobile
• Blog: webmaster.tamu.edu
• Web: www.tamu.edu
• Erick: [email protected]
• John: [email protected]