Mobile Web

A29a6c1d19522038ed28114c313d5fab?s=47 Erik Runyon
February 28, 2012

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.

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

February 28, 2012
Tweet

Transcript

  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
  10. None
  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
  19. None
  20. None
  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
  24. None
  25. None
  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