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

Transcript

1. To Infinity … and Beyond: Mobile at IU Presented by: Ashley Callahan Front-End Web Developer, IU Communications
2. Please don’t call Disney.
6. Is this fiction, or the future? Or today?
8. Two years earlier than predicted. Source: Luke Wroblewski, Mobile First, http://bit.ly/wJkAen
9. Source: http://on.mash.to/igSelX
10. Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your Content For Mobile), http://slidesha.re/TvTf8O
11. Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your Content For Mobile), http://slidesha.re/TvTf8O
12. Source: Luke Wroblewski, Mobile First, http://bit.ly/wJkAen
13. Source: Karen McGrane, Uncle Sam Wants You (To Optimize Your Content For Mobile), http://slidesha.re/TvTf8O
14. This is mobile • On the go • Distracted • “One eyeball and one thumb” • Limited time and attention • Unpredictable or slow internet connection
15. This is also “mobile” • Stationary • Unlimited time and attention • Reliable and faster internet connection
16. Google Analytics for IU Gateway website http://www.iu.edu Mobile Devices Browsers Operating Systems April 28 – May 28, 2013
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
18. So … where do we go from here?
19. What is your mobile strategy? BUSINESS GOALS MOBILE LANDSCAPE USER NEEDS
20. What is your mobile strategy? MOBILE LANDSCAPE Responsive Web Design Mobile (Native) Apps
21. Mobile (Native) Apps ✔ • Meet your audience where they are • Take advantage of native device features • Camera • Gyroscope • Touch sensors • App store / monetization
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
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
25. Responsive Web Design
26. Benefits One website to rule them all: • Consistent URL Responsive Web Design
27. Responsive Web Design Please don’t do this. Source: xkcd, http://xkcd.com/869/
28. Benefits One website to rule them all: • Consistent URL • Maintain one set of content • All pages are available Responsive Web Design
29. Responsive Web Design Source: WTF Mobile Web: http://wftmobileweb.com
30. Responsive Web Design Sticky Sticky Scrollable. Wee! Yes, please!
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
32. Responsive Web Design
33. Responsive Web Design Source: WTF Mobile Web: http://wftmobileweb.com Content Parity #fail
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
35. CSS HTML JavaScript Languages Responsive Web Design
36. Fluid Layout Flexible Images & Media Media Queries Components Responsive Web Design
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
38. Flexible Images & Media img, embed, object, video { height: auto; max-width: 100%; } Responsive Web Design
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
40. Languages Responsive Web Design • Clean and semantic code • Meaningful source order • Meta viewport tag: <meta name=“viewport” content=“width=device-width”>
41. Languages Responsive Web Design • Plug the gaps in legacy browsers. • Conditionally load content or scripts based on viewport size. • And more!
42. Responsive Web Design, A Book Apart, http://www.abookapart.com/products/responsive-web-design Responsive Web Design
43. Responsive Web Design RWD Mobile Strategy RWD Content Strategy RWD is awesome! But remember:
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
45. Content Strategy
46. Content Strategy http://education.indiana.edu
47. Content Strategy 1 2 3 4
48. Content Strategy 1 2 3 4
49. 1 2 3 4 Content Strategy
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
51. Content Strategy Content Strategy for Mobile, A Book Apart, http://www.abookapart.com/products/content-strategy-for-mobile
52. Mobile First • Focus • Performance • Usability • Future friendly
53. Mobile First
54. Mobile First Mobile First, A Book Apart, http://www.abookapart.com/products/mobile-first
55. If You Build It, They Will Come http://studentcentral.indiana.edu
56. If You Build It, They Will Come March 1, 2013 – October 28, 2013
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
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
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
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
61. Contact Ashley Callahan arc2@iu.edu RWD Listserv rwd-l@indiana.edu Thank you!
62. Questions?