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

    View Slide

  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)

    View Slide

  3. Why should you care
    ?

    View Slide

  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

    View Slide

  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

    View Slide

  6. ND.edu
    Jan 2010 - 1.03%
    Jan 2012 - 4.89%
    Mobile Traffic

    View Slide

  7. ND.edu
    Jan 2010 - 1.03%
    Jan 2012 - 4.89%
    Conductor
    Jan 2012 - 9%
    Mobile Traffic

    View Slide

  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

    View Slide

  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

    View Slide

  10. View Slide

  11. February 2011 Snow Closing

    View Slide

  12. ✤ iOS - 57%
    ✤ Android - 33%
    ✤ Blackberry - 5%
    ✤ Windows - 3%
    m.nd.edu

    View Slide

  13. ✤ iOS - 8%
    ✤ Android - 2%
    Conductor

    View Slide

  14. Devices are
    not mobile,
    people are.

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  18. Content
    ✤ Maintain clarity and focus
    ✤ Does each page have a
    purpose?
    ✤ Focus on your message
    ✤ Know your audience

    View Slide

  19. View Slide

  20. View Slide

  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

    View Slide

  22. Mobile Web (aka One-Web)
    Create web-sites that adapt to the device

    View Slide

  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

    View Slide

  24. View Slide

  25. View Slide

  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.

    View Slide

  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); }
    }

    View Slide

  28. Live demo...

    View Slide

  29. Research the possibilities
    http://mediaqueri.es

    View Slide

  30. Research the possibilities
    http://mediaqueri.es

    View Slide

  31. Recap
    ✤ Information Architecture is more important than ever
    ✤ Focus on concise, well-written content
    ✤ Keep file sizes small
    ✤ Think fluid layouts

    View Slide

  32. Erik Runyon
    AgencyND
    University Communications
    [email protected]
    weedygarden.net
    blogs.nd.edu/nddotedu
    @erunyon

    View Slide