Successfully reported this slideshow.

The Future Friendly Campus (Workshop Edition)

14

Share

Upcoming SlideShare
Mobile Learning - Done Right
Mobile Learning - Done Right
Loading in …3
×
1 of 303
1 of 303

The Future Friendly Campus (Workshop Edition)

14

Share

Download to read offline

Slides from my Future Friendly workshop at HighEdWeb Arkansas. Discusses why mobile is important, why we should pursue future friendly solutions and lays out a strategy for making your institution or organization future friendly.

Slides from my Future Friendly workshop at HighEdWeb Arkansas. Discusses why mobile is important, why we should pursue future friendly solutions and lays out a strategy for making your institution or organization future friendly.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

The Future Friendly Campus (Workshop Edition)

  1. The Future Friendly Campus Workshop Edition Dave Olsen, @dmolsen West Virginia University
  2. Thank You, HighEdWeb Arkansas: hewebar.org Kurogo
  3. This Will be Posted to SlideShare slideshare.net/dmolsenwvu Kurogo
  4. programmer 9 years at wvu wvu has 30,000 students
  5. from 30,000 ft. and... http://flic.kr/p/4tdahf
  6. ...3 years in the making. http://flic.kr/p/5Nobj3
  7. ask questions Feel free to ask questions. http://flic.kr/p/93aPCq
  8. Getting to Know You http://flic.kr/p/8MC5Ti
  9. Introduce Yourselves Let’s get this started! http://flic.kr/p/u71uE
  10. What We’ll Talk About •Some Terminology •Why Mobile •Future-Friendly •Developing a FF Strategy •Tools & Resources http://flic.kr/p/86dxVE
  11. Clearing Up Some Terminology http://flic.kr/p/7XKTn8
  12. Terminology What Are “Apps?”
  13. Anything you get from an App Store... Kurogo
  14. Terminology I will refer to these as Native Apps.
  15. Terminology What is the “Mobile Web?” Is it separate from the “Desktop Web?”
  16. TABLET WEB DESKTOP WEB It’s All One Web MOBILE WEB
  17. Terminology What is “WebKit?”
  18. WebKit is a layout engine that powers...
  19. Terminology Important! WebKit-based browsers are not all equal.
  20. Anything else I can define for you? http://flic.kr/p/8MC5Ti
  21. So why http://flic.kr/p/9WjR
  22. A History Lesson History Lesson
  23. The Future FriendlyWhy Campus In the beginning...
  24. We Had Print
  25. We Had Print Strong Layout Constraints defined container
  26. We Had Print Strong Layout Constraints Content & Layout Are defined Tightly Coupled container
  27. We Had Print Strong Layout Constraints Content & Layout Are defined Tightly Coupled container Primarily “Talk At”
  28. 20th Century Legacy
  29. Social Media suffers “Broadcast Legacy” connect.wvu.edu Kurogo
  30. Think about how you can break out of this model. http://flic.kr/p/8MC5Ti
  31. The Future FriendlyWhy times... Campus In more recent
  32. Computers
  33. Internet
  34. Internet Flexible Layouts
  35. Internet Flexible Layouts Content & Layout Can Start To Be Decoupled
  36. Internet Flexible Layouts Content & Layout Can Start To Be Decoupled Has Turned Into “Talk With”
  37. Which led to a... False Sense of Security Why
  38. Fixed Access 24-7 access, two way
  39. Limited Resolutions 24-7 access, two way
  40. Content Silos 24-7 access, two way
  41. The Future FriendlyWhy Day Campus The Present
  42. Mobile 24-7 access, two way
  43. Mobile Highly Constrained Layouts
  44. Mobile Highly Constrained Layouts Rapidly Evolving Ecosystem
  45. Mobile Highly Constrained Layouts Rapidly Evolving Ecosystem Allows True “Anywhere, Anytime” Access
  46. Yes, Anywhere 75% of men admit to using their mobile on the toilet. Source: http://www.11mark.com/IT-in-the-Toilet
  47. How many of you... kidding! http://flic.kr/p/8MC5Ti
  48. And Anytime 83% of young people sleep next to their phones. Source:http://www.prdaily.com/Main/Articles/Infographic_83_percent_of_young_people_sleep_next_9391.aspx
  49. The Wave is Coming 34% of high school students report owning an iPhone. http://www.macrumors.com/2012/04/03/one-third-of-u-s-high-school-students-now-own-an-iphone/
  50. How many of you... have an internet- enabled phone? http://flic.kr/p/8MC5Ti
  51. 50% of the US population is now using a smartphone. from Asymco, December 2010
  52. 52% of prospective students looked at a campus website on a mobile device. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012 http://flic.kr/p/6jX
  53. 48% of prospects who visited a school with a mobile site were positively affected. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012
  54. 59% of schools currently provide some sort of mobile solution. from Karine Joly’s “State of the Mobile web”, Feb. 2012
  55. How many of you... have a mobile solution? http://flic.kr/p/8MC5Ti
  56. 74% plan to implement a solution with 9 out of 10 of those planning to implement a prospective student solution. from Karine Joly’s “State of the Mobile web”, Feb. 2012
  57. How many of you... have a solution for prospective students? http://flic.kr/p/8MC5Ti
  58. We’re entering... The Hyper-Connected Society
  59. So what does it all mean? http://flic.kr/p/g116c
  60. Building New Content Silos? 24-7 access, two way
  61. Learning New Skills? 24-7 access, two way
  62. Trying to Keep Up?
  63. A Small Taste of the Present
  64. WVU’s Solutions standalone responsive designs mobile sites native apps mobile templates APIs
  65. The Future And then there’s... FriendlyWhy Campus The Near Future
  66. Will We Have to Support This?
  67. It’s Scary! Scary
  68. It’s Overwhelming!
  69. You’ll Want To Hide
  70. You’re Not Alone You’re Not Alone in Thinking That http://flic.kr/p/7agpKx
  71. There is Ray of Hope
  72. The What What of Future Friendly
  73. who founded it
  74. Twitter Handles @brad_frost @scottjenson @adactio @scottjehl @grigs @lukew @bryanrieger @lyzadanger @stephanierieger @globalmoxie https://twitter.com/dmolsen/ffly
  75. futurefriend.ly
  76. What The Truths What aka “Our Reality”
  77. The Truths Disruption will only Text accelerate.
  78. The Truths Our existing standards, Text workflows, & infrastructure won’t hold up.
  79. The Truths ProprietaryText solutions will dominate at first.
  80. The Truths The standards process will be Text painfully slow.
  81. What Hope There is What Rejoice!
  82. A New Hope Acknowledge & embrace Text unpredictability.
  83. A New Hope Think & behave in a Text future-friendly way.
  84. A New Hope Text Help others do the same.
  85. Summing It Up “ Future Friendly is more the outcome of a Constitutional Convention than it is a practical set of laws. A “when you do stuff, do it with this in mind” mode of thinking. - Dave Mulder @muldster
  86. How The How How of Future Friendly
  87. Future Friendly Tenet Acknowledge & embrace Text #1 unpredictability.
  88. Don’t Overreact
  89. The Shiny
  90. Tech Isn’t Always Best technology doesn’t solve all ills (pencil photo)
  91. Be Friendly!
  92. Why not? 70% of prospective students are happy to browse your Text current websites on their mobile device. Source: https://www.noellevitz.com/papers-research-higher-education/2012/2012-mobile-expectations-report
  93. So Breathe & Relax... A Little
  94. Future Friendly Tenet Think & Text behave in a #2 future-friendly way.
  95. Future-Friendly Strategy
  96. that iPhone app you want?
  97. it’s not a future-friendly strategy...
  98. an iPhone app... ...a mobile website +
  99. again, they’re not a future-friendly strategy... +
  100. A future-friendly strategy involves more than just the platform you’re targeting. It involves understanding your audience & their needs.
  101. Does your school have just one website that is the be-all-end-all for implementing your web strategy? Then why only one mobile solution?
  102. Our users expect access to all of this content on their mobile device.
  103. There Here http://flic.kr/p/5rTyAh
  104. Three Environments for Developing Your Strategy 3 approaches for developing a strategy http://flic.kr/p/7jqeyj
  105. Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
  106. Informal but Centralized Informal but Centralized http://flic.kr/p/9PDBBY
  107. Guerrilla & Distributed Guerrilla & Distributed Yes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
  108. Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
  109. Go Mobile at Texas A&M gomobile.tamu.edu
  110. Texas A&M’s Mobile Strategy Team gomobile.tamu.edu
  111. Texas A&M’s Mobile Strategy gomobile.tamu.edu
  112. Texas A&M’s “Why Go Mobile” gomobile.tamu.edu
  113. Texas A&M Tech: Twitter Bootstrap twitter.github.com/bootstrap/
  114. Texas A&M Tech: UCLA MWF mwf.ucla.edu
  115. How many of you... have a formal process? http://flic.kr/p/8MC5Ti
  116. Informal but Centralized Informal but Centralized http://flic.kr/p/9PDBBY
  117. WVU University Relations - Web web.ur.wvu.edu
  118. Advisor No Policy Advisor Photo We Advise No Policy http://flic.kr/p/57Bkm5
  119. WVU’s Mobile Presence Aug. 2009 iWVU & m.wvu.edu
  120. m.wvu.edu Traffic by Semester 11000 650%+ increase 8250 in avg. traffic 5500 2750 0 Fall 2009 Spring 2010 Fall 2010 Spring 2011 Fall 2011 Sping 2012 Average page views per day
  121. WVU’s Mobile Tech: kurogo.org Kurogo
  122. WVU’s Mobile Presence Aug. 2010 wvutoday.wvu.edu
  123. WVU’s Mobile Presence Mar. 2011 tournaments.wvu.edu
  124. WVU’s Mobile Presence Apr. 2011 studentaffairs.wvu.edu
  125. these are just some of our projects... standalone responsive designs mobile sites native apps mobile templates APIs
  126. How many of you... have an informal process? http://flic.kr/p/8MC5Ti
  127. Guerrilla & Distributed Guerrilla & Distributed Yes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
  128. Worksheet Time!
  129. Progressive Mobile Strategy
  130. Prioritize http://flic.kr/p/P22Ry
  131. Iterate http://flic.kr/p/aaBZ1
  132. Be Platform Neutral Being Platform Neutral fo rm lat P http://flic.kr/p/5PyiGh
  133. a Progressive Mobile Strategy... is about realistically prioritizing mobile solutions for your organization. Then working one-by-one through them.
  134. IS EY ES K IT E B TH LL A SM
  135. a Progressive Mobile Strategy has three stages....
  136. Targeting Your Audience http://flic.kr/p/6G32c
  137. Craftin Conten g t
  138. Choosing a Platform http://flic.kr/p/7V85wM
  139. Progressive Mobile Strategy (in graphic form)
  140. Targeting Your Audience http://flic.kr/p/6G32
  141. Let’s constrain these audiences based on what we know about mobile users. Note: not users that are mobile, users that are using mobile devices.
  142. Google’s Mobile User Groups
  143. Google’s Mobile User Groups Repetitive Now
  144. Google’s Mobile User Groups
  145. Other examples? http://flic.kr/p/8MC5Ti
  146. Google’s Mobile User Groups Repetitive Now Bored Now
  147. Google’s Mobile User Groups
  148. Other examples? http://flic.kr/p/8MC5Ti
  149. Google’s Mobile User Groups Repetitive Now Bored Now Urgent Now
  150. Google’s Mobile User Groups
  151. Other examples? http://flic.kr/p/8MC5Ti
  152. Urgent Now
  153. current student... Urgent Now
  154. I have a meeting. Where’s Allen Hall? I need to call my professor about a late assignment... current student... Urgent Now How do I reset my WiFi password? When does the bus get here?
  155. Local Users 95% of smartphone users have searched for local content. from Google’s “The Mobile Movement” report, April 2011
  156. Instant Gratification 88% of smartphone users took action on a search result within a day from Google’s “The Mobile Movement” report, April 2011
  157. Action Heroes 61% of smartphone users ended up calling a business based on their search. Tip: make your phone numbers clickable with tel: from Google’s “The Mobile Movement” report, April 2011 http://flic.kr/p/6JYQDR
  158. Not Always “On the Go” 30% of smartphone users used the mobile internet from their couch. 90% used it from home. from Google’s “The Mobile Movement” report, April 2011
  159. So is context dead? http://flic.kr/p/4dtHWb
  160. Now, it’s personal.
  161. Targeting Your Audience Review
  162. Targeting Your Audience Review Those with Urgent Needs
  163. Targeting Your Audience Review Those with Urgent Needs Local Constituencies
  164. Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes
  165. Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes Don’t Focus on “On the Go”
  166. Worksheet Time!
  167. Craftin Conten g t
  168. Content Delivery is Secondary to Tangible Utility Make sure your content is useful, damn it!
  169. Which is better? Content Delivery or Tangible Utility from XKCD, http://xkcd.com/773/
  170. Boo, Politics!
  171. Don’t worry about being known, worry about being useful.
  172. Don’t Convert, Create Look for new ways to combine content.
  173. Break Out of Silos Don’t follow org charts when developing mobile solutions.
  174. Mobile First mobile first “ Mobile devices require software development teams to focus on only the most important data and actions in an application. - Luke Wroblewski @lukew
  175. Crafting Content Review Be able to answer, “What value will the targeted audiences get from this content?”
  176. Worksheet Time!
  177. Choosing a Platform http://flic.kr/p/7V85wM
  178. an iPhone app... ...a mobile website vs.
  179. an iPhone app... ...a mobile website vs.
  180. The question is no longer, “Which do we develop for, native or mobile web?” but...
  181. “How do we develop solutions to handle both mobile web & native now as well as the devices of the future?”
  182. these are just some of the options... standalone responsive designs mobile sites native apps mobile templates APIs
  183. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  184. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  185. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  186. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  187. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  188. Give your existing content a chance to adapt to the future.
  189. Mobile Web-Optimized Solutions responsive mobile standalone designs templates mobile sites
  190. Mobile Web-Optimized Solutions responsive design
  191. responsive web design...
  192. Why Be Responsive One... URL.
  193. Why Be Responsive One... Set of Mark-up.
  194. Why Be Responsive One... Deployment.
  195. futurefriend.ly
  196. Time to Party... balloons http://flic.kr/p/h6McT
  197. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
  198. RWD Challenges Media... Images & Video
  199. RWD Challenges 3rd Party Content... Ads & Social Widgets
  200. RWD Challenges One Set of Mark-up... Double-edged Sword
  201. Learned the Hard Way: happyholidays.wvu.edu Kurogo
  202. RWD Challenges Is “display: none” the Dark Matter of RWD? http://flic.kr/p/8BPQ2q
  203. Mobile Web-Optimized Solutions mobile templates Mobile Templates deliver optimized layouts based on browser classes. Requires server-side technology. Must keep classification up-to-date with newest & latest browsers.
  204. Mobile Web-Optimized Solutions standalone mobile sites Standalone websites can serve as “mobile experiences” for your visitors. Content & functionality are highly optimized. Can be another silo of content that needs to be maintained & advertised.
  205. The common thread is browser-detection. Common Thread... Browser Detection http://flic.kr/p/capQiq
  206. Been Around a While Old dog http://flic.kr/p/bWQicm
  207. Lots of Solutions WURFL 51Degrees.mobi OpenDDR DeviceAtlas
  208. My fav is ua-parser:* github.com/tobie/ua-parser * - I help maintain the project ;) https://github.com/tobie/ua-parser/
  209. Used Quite a Bit “ 82% of the Alexa 100 top sites use some form of server-side mobile device detection to serve content on their main website entry point. - Ronan Cremin @xbs http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
  210. Kurogo Mobile Framework: kurogo.org Kurogo
  211. UCLA Mobile Web Framework: mwf.ucla.edu Kurogo
  212. Molly Project at Uni. of Oxford: mollyproject.org Kurogo
  213. Building New Content Silos? 24-7 access, two way
  214. Arms Race? http://flic.kr/p/6RVLY2
  215. A New Path? image of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
  216. Mobile Web-Optimized Solutions RESS Responsive Web Design with Server Side Components (RESS) is a hybrid of RWD & Mobile Templates. Flexible layout of RWD but finely tunes media & assets on the server. Requires server-side logic & device detection.
  217. “ In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392
  218. RWD + Browser Detection? developers and designers http://flic.kr/p/7Ma9n
  219. M-ADVANCED DESKTOP WEB ress.dmolsen.com MOBILE BASIC
  220. Server-side Feature-Detection for PHP: detector.dmolsen.com Kurogo
  221. RESS is in its Infancy... Infancy http://flic.kr/p/7B7uyp
  222. Untested ...and untested. http://flic.kr/p/nNZRV
  223. U. of Notre Dame Example ND data http://weedygarden.net/2012/05/a-case-for-ress/
  224. Large Screen: 136 requests @ 2.7MB ND data Small Screen: 23 requests @ 291K http://weedygarden.net/2012/05/a-case-for-ress/
  225. Which One: RWD, Device Exp., or RESS: lukew.com/ff/entry.asp?1509 Kurogo
  226. Questions about Mobile Web? http://flic.kr/p/8MC5Ti
  227. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  228. def. APIs stands for Application Programming Interface. APIs allow one program to talk to another program in an agreed-upon format to send & receive data.
  229. APIs are the infrastructure for your mobile initiatives... Create Once, Publish Everywhere http://flic.kr/p/7WrxkT
  230. We’re really talking content.
  231. Next Steps Structure & store data with the future in mind.
  232. Content Challenges “ It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. - Jon Arnes Sæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
  233. Recombinable Content API highway slide
  234. Structured & Self-Aware Content structured & self-aware content
  235. Future-Ready Content: alistapart.com/articles/future-ready-content Kurogo
  236. Content Challenges “ As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional webpage to flow as needed through varied displays and contexts. In the words of futurefriend.ly’s Brad Frost, “get your content ready to go anywhere because it’s going to go everywhere.” - Sara Wachter-Boettcher @sara_ann_marie http://www.alistapart.com/articles/future-ready-content/
  237. Creating and Planning Content for RWD: t.co/MaxGY7Fc Kurogo
  238. PRT API Update once. Publishes to: iOS App, Mobile Website, Student Portal, Transportation Website, & Twitter
  239. Our next step: Quarry Quarry http://flic.kr/p/6iVN8S
  240. Data Portals Are Coming: data.gov Kurogo
  241. The Age of the Sensor
  242. Questions about APIs? http://flic.kr/p/8MC5Ti
  243. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
  244. Native apps will be driven by vendors. http://flic.kr/p/5SikYe
  245. Native apps should be transformative. http://flic.kr/p/zBdU7
  246. Branding & Centralization of Apps? Kurogo
  247. Choosing a Platform Review Start working on your infrastructure. Now. There is a lot of content already out there & users expect access to it. There isn’t one mobile solution for your organization or client.
  248. Questions about Native Apps? http://flic.kr/p/8MC5Ti
  249. Worksheet Time!
  250. Making the case for mobile web first.
  251. Two Possible Solutions Things to Consider http://flic.kr/p/9jatna
  252. Discovery #1How Users Discover Content http://flic.kr/p/3CaBwQ
  253. “ Not every mobile device will have your app on it but every mobile stat about browser usage device will have a browser. - Jason Grigsby @grigs
  254. 77% of smartphone users use search. Most visited type of website. from Google’s “The Mobile Movement” report, April 2011
  255. Existing Indexed Content
  256. the just in time internet The Just In Time Internet
  257. The less often someone needs to find information on a topic the more likely it is that someone will use the web on the device to find it.
  258. #2 How We Already Communicate
  259. “ Links don’t open apps. - Jason Grigsby stat about@grigs browser usage
  260. 55% of users with an internet-enabled phone use it to check personal email. from Merkle’s “View from the Digital Inbox” report, January 2011
  261. Getting social?
  262. links + skills + search mobile web first
  263. 70% of prospective students are happy to browse your Text current websites on their mobile device. Source: https://www.noellevitz.com/papers-research-higher-education/2012/2012-mobile-expectations-report
  264. Questions about Mobile Web First? http://flic.kr/p/8MC5Ti
  265. Worksheet Time!
  266. Future Friendly Tenet Text #3 Help others do the same.
  267. It’s a Starting Point
  268. Testing the Future http://flic.kr/p/cfkTiC
  269. Web-based Testing browserstack.com
  270. Mobile Emulators mobilexweb.com/emulators
  271. Get Your Hands on Real Devices http://flic.kr/p/7972f6
  272. Deciding Which Devices to Get Base on: Analytics Rank, OS, Screen Dimensions, WiFi-capable, & Cost Suggested focus: iPod Touch, mid-level Android, high-end Android, tablet, Blackberry, Windows Phone 7
  273. Cellphone Store Leftovers Text http://flic.kr/p/57nxHB
  274. eBay Has Everything ebay.com/electronics/cell-phone-pda
  275. MobileKarma Makes it Easy mobilekarma.com
  276. iPod Touch + Samsung Fascinate + HTC Thunderbolt $438
  277. WVU’s Device Lab
  278. Adobe Shadow
  279. Latency is the Mobile Performance Bottleneck
  280. Throttle Simulates Cell Networks github.com/dmolsen/Throttle
  281. Wrapping it all up... http://flic.kr/p/4fwjAq
  282. #1 Identify the audience.
  283. #2 Identify the content for that audience.
  284. #3 Implement platform solutions.
  285. #4 Lather, rinse, & repeat.
  286. Audience On-campus Admits Prospects Alumni
  287. Audience Content On-campus Contact Info Admits Map Prospects Emergency Alumni Calendar
  288. Audience Content Platform On-campus Contact Info Mobile Portal Admits Map Native Apps Responsive Prospects Emergency Design Alumni Calendar
  289. Don’t get stuck on platform. http://flic.kr/p/4zDk7q
  290. Focus on your targeted audiences & content. http://flic.kr/p/8Ti584
  291. The The evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
  292. Resources Resources
  293. futurefriend.ly
  294. mobilewebbestpractices.com Twitter & Stuff
  295. On Twitter @dmolsen...
  296. Or at dmolsen.com...
  297. Many thanks to Mr. Robertson for the snazzy device & progressive strategy graphics
  298. The End http://flic.kr/p/9Hac2V

×