Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web

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.

Erik Runyon
PRO

February 28, 2012
Tweet

More Decks by Erik Runyon

Other Decks in Technology

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 [email protected] weedygarden.net blogs.nd.edu/nddotedu @erunyon