Mobile Web

Meeting the needs of your small-screen visitors. A mobile and responsive overview presented to the Campus Communicators group at the University of Notre Dame.

1. February 28, 2012 Mobile Web - Meeting the needs of your small-screen visitors Erik Runyon
2. Web, not Native Apps Native applications are written for a specific platform using programming languages such as Cocoa (iOS), Java (Android) or C# (Windows Phone)
3. Why should you care ?
4. Research group Canalys estimates that 487.7 million smartphones were shipped in 2011, an increase of over 60 percent from 2010. http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
5. The Mobile Browsing Behaviors and Expectations of College- Bound High School Students www.noellevitz.com ✤ 2300 respondents (juniors, seniors and parents) ✤ 62% considering 4-year private ✤ More than half accessed college site on mobile device ✤ 96% used mobile browser rather than an app
6. ND.edu Jan 2010 - 1.03% Jan 2012 - 4.89% Mobile Traffic
7. ND.edu Jan 2010 - 1.03% Jan 2012 - 4.89% Conductor Jan 2012 - 9% Mobile Traffic
8. ND.edu Jan 2010 - 1.03% Jan 2012 - 4.89% Conductor Jan 2012 - 9% Admissions.ND.edu Feb 2010 - 1.70% Feb 2012 - 11.27% Mobile Traffic
9. ND.edu Jan 2010 - 1.03% Jan 2012 - 4.89% Conductor Jan 2012 - 9% Admissions.ND.edu Feb 2010 - 1.70% Feb 2012 - 11.27% Gameday.ND.edu Nov 2009 - 4.00% Nov 2011 - 33.58% Mobile Traffic
11. February 2011 Snow Closing
12. ✤ iOS - 57% ✤ Android - 33% ✤ Blackberry - 5% ✤ Windows - 3% m.nd.edu
13. ✤ iOS - 8% ✤ Android - 2% Conductor
14. Devices are not mobile, people are.
15. Yahoo interviewed 8,384 U.S. residents age 13-64, with 5,313 of those being mobile Internet users. Of that 5,313, 86% said they used their device while watching TV. That number grows even higher, to 92%, when you look at the 13-24 year old bracket.
16. IA ✤ Information Architecture has never been more important ✤ Provide options for exploration ✤ Emphasize content over navigation
17. IA ✤ Information Architecture has never been more important ✤ Provide options for exploration ✤ Emphasize content over navigation
18. Content ✤ Maintain clarity and focus ✤ Does each page have a purpose? ✤ Focus on your message ✤ Know your audience
21. Images/Files ✤ Be aware of image sizes ✤ Resize images to the correct dimensions ✤ Always use compression (80% is our baseline) ✤ Links to files (pdf, doc) should be noted and include file size
22. Mobile Web (aka One-Web) Create web-sites that adapt to the device
23. Responsive Web Design Creating a site/design that responds to the screen-size of the requesting device through the use of flexible grids, images and CSS3 media queries
26. Design conventions to (re)consider ✤ Screen sizes are getting larger… and smaller ✤ Internet speeds are getting faster… and slower ✤ Envision how content will reformat in the wire-framing stage ✤ There is no “fold”. Especially in mobile.
27. A bit of tech ✤ “960 and down” vs. “mobile first” ✤ Media queries /* base styles */ #header { background-image:url(logo-small.png); } /* media queries */ @media only screen and (min-width:600px) { #header { background-image:url(logo-medium.png); } } @media only screen and (min-width:960px) { #header { background-image:url(logo-large.png); } }
28. Live demo...
29. Research the possibilities http://mediaqueri.es
30. Research the possibilities http://mediaqueri.es
31. Recap ✤ Information Architecture is more important than ever ✤ Focus on concise, well-written content ✤ Keep file sizes small ✤ Think fluid layouts
32. Erik Runyon AgencyND University Communications erunyon@nd.edu weedygarden.net blogs.nd.edu/nddotedu @erunyon