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. 1.

    February 28, 2012 Mobile Web - Meeting the needs of

    your small-screen visitors Erik Runyon
  2. 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. 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
  4. 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
  5. 7.
  6. 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
  7. 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
  8. 10.
  9. 12.

    ✤ iOS - 57% ✤ Android - 33% ✤ Blackberry

    - 5% ✤ Windows - 3% m.nd.edu
  10. 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.
  11. 16.

    IA ✤ Information Architecture has never been more important ✤

    Provide options for exploration ✤ Emphasize content over navigation
  12. 17.

    IA ✤ Information Architecture has never been more important ✤

    Provide options for exploration ✤ Emphasize content over navigation
  13. 18.

    Content ✤ Maintain clarity and focus ✤ Does each page

    have a purpose? ✤ Focus on your message ✤ Know your audience
  14. 19.
  15. 20.
  16. 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
  17. 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
  18. 24.
  19. 25.
  20. 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.
  21. 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); } }
  22. 31.

    Recap ✤ Information Architecture is more important than ever ✤

    Focus on concise, well-written content ✤ Keep file sizes small ✤ Think fluid layouts