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