The Future Friendly Campus (Workshop Edition)

11,843 views
8,253 views

Published on

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.

Published in: Technology, Business

The Future Friendly Campus (Workshop Edition)

  1. The FutureFriendly CampusWorkshop EditionDave Olsen, @dmolsenWest Virginia University
  2. Thank You, HighEdWeb Arkansas:hewebar.org Kurogo
  3. This Will be Posted to SlideShareslideshare.net/dmolsenwvu Kurogo
  4. programmer9 years at wvuwvu has 30,000 students
  5. from 30,000 ft. and... http://flic.kr/p/4tdahf
  6. ...3 years inthe making. http://flic.kr/p/5Nobj3
  7. ask questionsFeel free to ask questions. http://flic.kr/p/93aPCq
  8. Getting to Know You http://flic.kr/p/8MC5Ti
  9. Introduce YourselvesLet’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. TerminologyWhat Are “Apps?”
  13. Anything you get from an App Store... Kurogo
  14. TerminologyI will refer to these as Native Apps.
  15. TerminologyWhat is the “Mobile Web?” Is it separate from the “Desktop Web?”
  16. TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
  17. TerminologyWhat is “WebKit?”
  18. WebKitis 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. Sowhy http://flic.kr/p/9WjR
  22. A History LessonHistory Lesson
  23. The FutureFriendlyWhy Campus In the beginning...
  24. We Had Print
  25. We Had Print Strong Layout Constraintsdefined container
  26. We Had Print Strong Layout Constraints Content & Layout Aredefined Tightly Coupled container
  27. We Had Print Strong Layout Constraints Content & Layout Aredefined 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 FutureFriendlyWhy times... Campus In more recent
  32. Computers
  33. Internet
  34. InternetFlexible Layouts
  35. InternetFlexible LayoutsContent & Layout Can StartTo Be Decoupled
  36. InternetFlexible LayoutsContent & Layout Can StartTo Be DecoupledHas Turned Into “Talk With”
  37. Which led to a...False Sense of Security Why
  38. Fixed Access24-7 access, two way
  39. Limited Resolutions24-7 access, two way
  40. Content Silos24-7 access, two way
  41. The FutureFriendlyWhy Day Campus The Present
  42. Mobile24-7 access, two way
  43. MobileHighly Constrained Layouts
  44. MobileHighly Constrained LayoutsRapidly Evolving Ecosystem
  45. MobileHighly Constrained LayoutsRapidly Evolving EcosystemAllows True “Anywhere,Anytime” Access
  46. Yes, Anywhere75% of men admit to using theirmobile 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 whovisited a school with a mobile site were positively affected. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012
  54. 59% of schoolscurrently 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 with9 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 doesit 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 sitesnative 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 AloneYou’re Not Alone in Thinking That http://flic.kr/p/7agpKx
  71. There is Ray of Hope
  72. The What Whatof 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. WhatThe Truths What aka “Our Reality”
  77. The TruthsDisruption will only Text accelerate.
  78. The Truths Our existing standards, Textworkflows, & infrastructure won’t hold up.
  79. The TruthsProprietaryText solutions will dominate at first.
  80. The TruthsThe standards process will be Text painfully slow.
  81. What HopeThere is What Rejoice!
  82. A New HopeAcknowledge & embrace Text unpredictability.
  83. A New HopeThink & behave in a Textfuture-friendly way.
  84. A New Hope TextHelp 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. HowThe How Howof Future Friendly
  87. Future Friendly Tenet Acknowledge & embrace Text#1 unpredictability.
  88. Don’t Overreact
  89. The Shiny
  90. Tech Isn’t Always Besttechnology 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 onewebsite that is the be-all-end-all forimplementing your web strategy?Then why only one mobile solution?
  102. Our users expect access to all ofthis content on their mobile device.
  103. There Here http://flic.kr/p/5rTyAh
  104. Three Environments forDeveloping Your Strategy3 approaches for developing a strategy http://flic.kr/p/7jqeyj
  105. Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
  106. Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
  107. Guerrilla & Distributed Guerrilla & DistributedYes, 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&Mgomobile.tamu.edu
  110. Texas A&M’s Mobile Strategy Teamgomobile.tamu.edu
  111. Texas A&M’s Mobile Strategygomobile.tamu.edu
  112. Texas A&M’s “Why Go Mobile”gomobile.tamu.edu
  113. Texas A&M Tech: Twitter Bootstraptwitter.github.com/bootstrap/
  114. Texas A&M Tech: UCLA MWFmwf.ucla.edu
  115. How many of you...have a formal process? http://flic.kr/p/8MC5Ti
  116. Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
  117. WVU University Relations - Webweb.ur.wvu.edu
  118. Advisor No Policy Advisor PhotoWe 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 Semester11000 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 sitesnative apps mobile templates APIs
  126. How many of you...have an informal process? http://flic.kr/p/8MC5Ti
  127. Guerrilla & Distributed Guerrilla & DistributedYes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
  128. Worksheet Time!
  129. ProgressiveMobile Strategy
  130. Prioritize http://flic.kr/p/P22Ry
  131. Iterate http://flic.kr/p/aaBZ1
  132. Be Platform Neutral Being Platform Neutral fo rm latP 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 BTH LL A SM
  135. a ProgressiveMobile Strategy has three stages....
  136. Targeting Your Audience http://flic.kr/p/6G32c
  137. CraftinConten 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 basedon 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 Users95% of smartphone users have searched for local content. from Google’s “The Mobile Movement” report, April 2011
  156. Instant Gratification88% of smartphone users took action on a search result within a day from Google’s “The Mobile Movement” report, April 2011
  157. Action Heroes61% 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 usersused the mobile internetfrom 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. CraftinConten 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, CreateLook 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 developmentteams to focus on only the most importantdata and actions in an application. - Luke Wroblewski @lukew
  175. Crafting Content Review Be able to answer, “What value will thetargeted 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 wedevelop 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 sitesnative apps mobile templates APIs
  183. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  184. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  185. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  186. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  187. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  188. Give your existing content achance to adapt to the future.
  189. Mobile Web-Optimized Solutionsresponsive mobile standalone designs templates mobile sites
  190. Mobile Web-Optimized Solutions responsive design
  191. responsive web design...
  192. Why Be ResponsiveOne...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 Challenges3rd Party Content... Ads & Social Widgets
  200. RWD ChallengesOne Set of Mark-up... Double-edged Sword
  201. Learned the Hard Way:happyholidays.wvu.edu Kurogo
  202. RWD ChallengesIs “display: none” the Dark Matter of RWD? http://flic.kr/p/8BPQ2q
  203. Mobile Web-Optimized Solutions mobiletemplates 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 Solutionsstandalonemobile 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 doghttp://flic.kr/p/bWQicm
  207. Lots of SolutionsWURFL 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 @xbshttp://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 SolutionsRESS 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 adaptivelayouts with server side component(not full page) optimization. So asingle set of page templates define anentire Web site for all devices but keycomponents within that site havedevice-class specific implementationsthat 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.comMOBILE 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 ExampleND data http://weedygarden.net/2012/05/a-case-for-ress/
  224. Large Screen: 136 requests @ 2.7MB ND dataSmall 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 sitesMobile 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 StepsStructure & 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 ContentAPI highway slide
  234. Structured & Self-Aware Contentstructured & self-aware content
  235. Future-Ready Content:alistapart.com/articles/future-ready-content Kurogo
  236. Content Challenges“As we embrace this shift, we need torelinquish control of our content as well,setting it free from the boundaries of atraditional webpage to flow as neededthrough varied displays and contexts. Inthe words of futurefriend.ly’s BradFrost, “get your content ready to goanywhere because it’s going to goeverywhere.” - 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 APIUpdate 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 sitesMobile Web Mobile Templates Responsive Designs
  244. Native apps will be driven by vendors. http://flic.kr/p/5SikYe
  245. Native appsshould be transformative. http://flic.kr/p/zBdU7
  246. Branding & Centralization of Apps? Kurogo
  247. Choosing a Platform ReviewStart 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 UsersDiscover Content http://flic.kr/p/3CaBwQ
  253. “Not every mobile device will haveyour app on it but every mobile stat about browser usagedevice 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 findinformation on a topic the more likely itis 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-enabledphone use it to check personal email. from Merkle’s “View from the Digital Inbox” report, January 2011
  261. Getting social?
  262. links + skills + searchmobile 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 aboutMobile 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 Testingbrowserstack.com
  270. Mobile Emulatorsmobilexweb.com/emulators
  271. Get YourHands onReal 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 StoreLeftovers Text http://flic.kr/p/57nxHB
  274. eBay Has Everythingebay.com/electronics/cell-phone-pda
  275. MobileKarma Makes it Easymobilekarma.com
  276. iPod Touch+ Samsung Fascinate+ HTC Thunderbolt $438
  277. WVU’s Device Lab
  278. AdobeShadow
  279. Latency is the MobilePerformance Bottleneck
  280. Throttle Simulates Cell Networksgithub.com/dmolsen/Throttle
  281. Wrappingit all up... http://flic.kr/p/4fwjAq
  282. #1Identify the audience.
  283. #2Identify the content for that audience.
  284. #3Implement platform solutions.
  285. #4Lather, rinse, & repeat.
  286. AudienceOn-campus AdmitsProspects Alumni
  287. Audience ContentOn-campus Contact Info Admits MapProspects Emergency Alumni Calendar
  288. Audience Content PlatformOn-campus Contact Info Mobile Portal Admits Map Native Apps ResponsiveProspects 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. TheThe evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
  292. Resources Resources
  293. futurefriend.ly
  294. mobilewebbestpractices.comTwitter & 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

×