Mobile Web - Speaker Deck

Slide 1

Slide 1 text

February 28, 2012 Mobile Web - Meeting the needs of your small-screen visitors Erik Runyon

Slide 2

Slide 2 text

Web, not Native Apps Native applications are written for a speciﬁc platform using programming languages such as Cocoa (iOS), Java (Android) or C# (Windows Phone)

Slide 3

Slide 3 text

Why should you care ?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

February 2011 Snow Closing

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

✤ iOS - 8% ✤ Android - 2% Conductor

Slide 14

Slide 14 text

Devices are not mobile, people are.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Images/Files ✤ Be aware of image sizes ✤ Resize images to the correct dimensions ✤ Always use compression (80% is our baseline) ✤ Links to ﬁles (pdf, doc) should be noted and include ﬁle size

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Responsive Web Design Creating a site/design that responds to the screen-size of the requesting device through the use of ﬂexible grids, images and CSS3 media queries

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

A bit of tech ✤ “960 and down” vs. “mobile ﬁrst” ✤ 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); } }

Slide 28

Slide 28 text

Live demo...

Slide 29

Slide 29 text

Research the possibilities http://mediaqueri.es

Slide 30

Slide 30 text

Research the possibilities http://mediaqueri.es

Slide 31

Slide 31 text

Recap ✤ Information Architecture is more important than ever ✤ Focus on concise, well-written content ✤ Keep ﬁle sizes small ✤ Think ﬂuid layouts

Slide 32

Slide 32 text

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