To Infinity ... and Beyond: Mobile at IU

To Infinity ... and Beyond: Mobile at IU

Breakout session at 2013 Statewide IT and IU Communications & Marketing Conference. Watch it here: http://ashleycallahan.net/video/2013-SWIT.html

8d8bfecb23a7f22e38a489f6f56c167a?s=128

Ashley Callahan

June 26, 2013
Tweet

Transcript

  1. 1.

    To Infinity … and Beyond: Mobile at IU Presented by:

    Ashley Callahan Front-End Web Developer, IU Communications
  2. 3.
  3. 4.
  4. 5.
  5. 7.
  6. 10.

    Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your

    Content For Mobile), http://slidesha.re/TvTf8O
  7. 11.

    Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your

    Content For Mobile), http://slidesha.re/TvTf8O
  8. 13.

    Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your

    Content For Mobile), http://slidesha.re/TvTf8O
  9. 14.

    This is mobile • On the go • Distracted •

    “One eyeball and one thumb” • Limited time and attention • Unpredictable or slow internet connection
  10. 15.

    This is also “mobile” • Stationary • Unlimited time and

    attention • Reliable and faster internet connection
  11. 17.

    Total: 212,345 visits Only mobile: 29,220 visits, or 13.8% of

    total traffic That’s more than all international visits combined Mobile traffic has increased 77.95% in one year Most popular device was the Apple iPhone   But 162 people visited with the Kindle Fire Google Analytics for IU Gateway website http://www.iu.edu April 28 – May 28, 2013
  12. 21.

    Mobile (Native) Apps ✔ • Meet your audience where they

    are • Take advantage of native device features • Camera • Gyroscope • Touch sensors • App store / monetization
  13. 22.

    Mobile (Native) Apps Resources • jQuery Mobile: http://jquerymobile.com/ • PhoneGap:

    http://phonegap.com/ • Adobe PhoneGap Build: http://html.adobe.com/edge/phonegap-build/ • IU Mobile - miu@iu.edu • Download the HTML5 Toolkit: http://go.iu.edu/7zW
  14. 23.

    What is it? Responsive design allows your website to adapt

    its presentation and functionality based on how it’s being viewed. http://communications.iu.edu Responsive Web Design
  15. 24.
  16. 28.

    Benefits One website to rule them all: • Consistent URL

    • Maintain one set of content • All pages are available Responsive Web Design
  17. 31.

    Benefits One website to rule them all: • Consistent URL

    • Maintain one set of content • All pages are available • No more pinch-zooming! Responsive Web Design
  18. 34.

    Benefits One website to rule them all: • Consistent URL

    • Maintain one set of content • All pages are available • No more pinch-zooming! • ✔ Google approved Responsive Web Design
  19. 37.

    Fluid Layout • Columns organize content into a grid system

    • Min- and max-width to set absolutes • Relative units instead of pixels • Percentages (%) for layout • Ems (em) for type Responsive Web Design
  20. 38.

    Flexible Images & Media img, embed, object, video { height:

    auto; max-width: 100%; } Responsive Web Design
  21. 39.

    Media Queries • Use media queries to make adjustments to

    the layout when things get “weird.” • Don’t set breakpoints based on device size. @media screen and (min-width: 300px) { /* Tiny Screens */ } @media screen and (min-width: 600px) { /* Medium Screens */ } Responsive Web Design
  22. 40.

    Languages Responsive Web Design • Clean and semantic code •

    Meaningful source order • Meta viewport tag: <meta name=“viewport” content=“width=device-width”>
  23. 41.

    Languages Responsive Web Design • Plug the gaps in legacy

    browsers. • Conditionally load content or scripts based on viewport size. • And more!
  24. 44.

    Content Strategy What is it? Content strategy plans for the

    creation, publication, and governance of useful, usable content. Who is the audience? Why are they here? Content Plan
  25. 50.

    Content Strategy Do • Organize • Optimize • Target Don’t

    • Remove • Truncate • Guess what users want ✔ X “Deliver the same content [to mobile] as your desktop user sees. (If you think some of your content doesn't deserve to be on mobile, guess what — it doesn't deserve to be on the desktop either. Get rid of it.) — Karen McGrane
  26. 57.

    RWD Retrofit • Best for newer sites built using modern

    web standards • A compromise • Mobile now > mobile never • Desktop down using max-width Resources • http://bit.ly/19Qqetj • http://bit.ly/12fpT2v • http://bit.ly/1f2mrv3
  27. 58.

    Can’t RWD? Mobile optimize. Concentrate on performance • Compress images

    • SmushIt • Kraken • Cache and gzip files on server • HTML5 boilerplate .htaccess • Minify CSS and JavaScript • Reduce HTTP requests Source: What Users Want from Mobile, http://bit.ly/qTu8WY
  28. 59.

    Can’t RWD? Mobile optimize. Start using HTML5 and CSS3 •

    Switch the doctype • <!doctype html> • Well supported tags, attributes, & styles • <input type=“ • search • url • number • “> • <video> • Aria roles
  29. 60.

    Can’t RWD? Mobile optimize. Clean up ugly code • Inline

    CSS and JS • Messy or non-semantic HTML User interface and interactions • Limit or enhance hover • Add JS click event handler • Other things that suck • Modal windows • iframes, scroll in scroll