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.

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

    View Slide