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

Mobile Web

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.

Erik Runyon

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. 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. 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. 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
  6. 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
  7. ✤ iOS - 57% ✤ Android - 33% ✤ Blackberry

    - 5% ✤ Windows - 3% m.nd.edu
  8. 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.
  9. IA ✤ Information Architecture has never been more important ✤

    Provide options for exploration ✤ Emphasize content over navigation
  10. IA ✤ Information Architecture has never been more important ✤

    Provide options for exploration ✤ Emphasize content over navigation
  11. Content ✤ Maintain clarity and focus ✤ Does each page

    have a purpose? ✤ Focus on your message ✤ Know your audience
  12. 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
  13. 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
  14. 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.
  15. 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); } }
  16. Recap ✤ Information Architecture is more important than ever ✤

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