• Like
  • Save
The Future Friendly Campus (Workshop Edition)
Upcoming SlideShare
Loading in...5
×
 

The Future Friendly Campus (Workshop Edition)

on

  • 4,447 views

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 ...

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.

Statistics

Views

Total Views
4,447
Views on SlideShare
4,186
Embed Views
261

Actions

Likes
13
Downloads
80
Comments
0

10 Embeds 261

http://www.conseilsmarketing.com 202
http://eduniverse.org 20
http://www.eduniverse.org 19
https://twitter.com 9
https://si0.twimg.com 4
https://twimg0-a.akamaihd.net 3
http://www.creamty.mx 1
http://www.caucapino4u.com 1
http://us-w1.rockmelt.com 1
http://blog.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Future Friendly Campus (Workshop Edition) The Future Friendly Campus (Workshop Edition) Presentation Transcript

    • The FutureFriendly CampusWorkshop EditionDave Olsen, @dmolsenWest Virginia University
    • Thank You, HighEdWeb Arkansas:hewebar.org Kurogo
    • This Will be Posted to SlideShareslideshare.net/dmolsenwvu Kurogo
    • programmer9 years at wvuwvu has 30,000 students
    • from 30,000 ft. and... http://flic.kr/p/4tdahf
    • ...3 years inthe making. http://flic.kr/p/5Nobj3
    • ask questionsFeel free to ask questions. http://flic.kr/p/93aPCq
    • Getting to Know You http://flic.kr/p/8MC5Ti
    • Introduce YourselvesLet’s get this started! http://flic.kr/p/u71uE
    • What We’ll Talk About•Some Terminology•Why Mobile•Future-Friendly•Developing a FF Strategy•Tools & Resources http://flic.kr/p/86dxVE
    • Clearing Up Some Terminology http://flic.kr/p/7XKTn8
    • TerminologyWhat Are “Apps?”
    • Anything you get from an App Store... Kurogo
    • TerminologyI will refer to these as Native Apps.
    • TerminologyWhat is the “Mobile Web?” Is it separate from the “Desktop Web?”
    • TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
    • TerminologyWhat is “WebKit?”
    • WebKitis a layout engine that powers...
    • Terminology Important!WebKit-based browsers are not all equal.
    • Anything else I can define for you? http://flic.kr/p/8MC5Ti
    • Sowhy http://flic.kr/p/9WjR
    • A History LessonHistory Lesson
    • The FutureFriendlyWhy Campus In the beginning...
    • We Had Print
    • We Had Print Strong Layout Constraintsdefined container
    • We Had Print Strong Layout Constraints Content & Layout Aredefined Tightly Coupled container
    • We Had Print Strong Layout Constraints Content & Layout Aredefined Tightly Coupled container Primarily “Talk At”
    • 20th Century Legacy
    • Social Media suffers “Broadcast Legacy”connect.wvu.edu Kurogo
    • Think about how you can break out of this model. http://flic.kr/p/8MC5Ti
    • The FutureFriendlyWhy times... Campus In more recent
    • Computers
    • Internet
    • InternetFlexible Layouts
    • InternetFlexible LayoutsContent & Layout Can StartTo Be Decoupled
    • InternetFlexible LayoutsContent & Layout Can StartTo Be DecoupledHas Turned Into “Talk With”
    • Which led to a...False Sense of Security Why
    • Fixed Access24-7 access, two way
    • Limited Resolutions24-7 access, two way
    • Content Silos24-7 access, two way
    • The FutureFriendlyWhy Day Campus The Present
    • Mobile24-7 access, two way
    • MobileHighly Constrained Layouts
    • MobileHighly Constrained LayoutsRapidly Evolving Ecosystem
    • MobileHighly Constrained LayoutsRapidly Evolving EcosystemAllows True “Anywhere,Anytime” Access
    • Yes, Anywhere75% of men admit to using theirmobile on the toilet.Source: http://www.11mark.com/IT-in-the-Toilet
    • How many of you... kidding! http://flic.kr/p/8MC5Ti
    • 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
    • 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/
    • How many of you... have an internet- enabled phone? http://flic.kr/p/8MC5Ti
    • 50% of the US population is now using a smartphone.from Asymco, December 2010
    • 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
    • 48% of prospects whovisited a school with a mobile site were positively affected. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012
    • 59% of schoolscurrently provide some sort of mobile solution. from Karine Joly’s “State of the Mobile web”, Feb. 2012
    • How many of you...have a mobile solution? http://flic.kr/p/8MC5Ti
    • 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
    • How many of you... have a solution for prospective students? http://flic.kr/p/8MC5Ti
    • We’re entering...The Hyper-Connected Society
    • So what doesit all mean? http://flic.kr/p/g116c
    • Building New Content Silos?24-7 access, two way
    • Learning New Skills?24-7 access, two way
    • Trying to Keep Up?
    • A Small Taste of the Present
    • WVU’s Solutions standalone responsive designs mobile sitesnative apps mobile templates APIs
    • The Future And then there’s...FriendlyWhy Campus The Near Future
    • Will We Have to Support This?
    • It’s Scary!Scary
    • It’s Overwhelming!
    • You’ll Want To Hide
    • You’re Not AloneYou’re Not Alone in Thinking That http://flic.kr/p/7agpKx
    • There is Ray of Hope
    • The What Whatof Future Friendly
    • who founded it
    • Twitter Handles @brad_frost @scottjenson @adactio @scottjehl @grigs @lukew @bryanrieger @lyzadanger@stephanierieger @globalmoxie https://twitter.com/dmolsen/ffly
    • futurefriend.ly
    • WhatThe Truths What aka “Our Reality”
    • The TruthsDisruption will only Text accelerate.
    • The Truths Our existing standards, Textworkflows, & infrastructure won’t hold up.
    • The TruthsProprietaryText solutions will dominate at first.
    • The TruthsThe standards process will be Text painfully slow.
    • What HopeThere is What Rejoice!
    • A New HopeAcknowledge & embrace Text unpredictability.
    • A New HopeThink & behave in a Textfuture-friendly way.
    • A New Hope TextHelp others do the same.
    • 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
    • HowThe How Howof Future Friendly
    • Future Friendly Tenet Acknowledge & embrace Text#1 unpredictability.
    • Don’t Overreact
    • The Shiny
    • Tech Isn’t Always Besttechnology doesn’t solve all ills (pencil photo)
    • Be Friendly!
    • 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
    • So Breathe & Relax... A Little
    • Future Friendly Tenet Think & Text behave in a#2 future-friendly way.
    • Future-Friendly Strategy
    • that iPhone app you want?
    • it’s not a future-friendly strategy...
    • an iPhone app... ...a mobile website +
    • again, they’re not a future-friendly strategy... +
    • A future-friendly strategy involves more than just the platform you’re targeting. It involves understanding your audience & their needs.
    • Does your school have just onewebsite that is the be-all-end-all forimplementing your web strategy?Then why only one mobile solution?
    • Our users expect access to all ofthis content on their mobile device.
    • There Here http://flic.kr/p/5rTyAh
    • Three Environments forDeveloping Your Strategy3 approaches for developing a strategy http://flic.kr/p/7jqeyj
    • Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
    • Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
    • Guerrilla & Distributed Guerrilla & DistributedYes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
    • Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
    • Go Mobile at Texas A&Mgomobile.tamu.edu
    • Texas A&M’s Mobile Strategy Teamgomobile.tamu.edu
    • Texas A&M’s Mobile Strategygomobile.tamu.edu
    • Texas A&M’s “Why Go Mobile”gomobile.tamu.edu
    • Texas A&M Tech: Twitter Bootstraptwitter.github.com/bootstrap/
    • Texas A&M Tech: UCLA MWFmwf.ucla.edu
    • How many of you...have a formal process? http://flic.kr/p/8MC5Ti
    • Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
    • WVU University Relations - Webweb.ur.wvu.edu
    • Advisor No Policy Advisor PhotoWe Advise No Policy http://flic.kr/p/57Bkm5
    • WVU’s Mobile Presence Aug. 2009 iWVU & m.wvu.edu
    • 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
    • WVU’s Mobile Tech:kurogo.org Kurogo
    • WVU’s Mobile Presence Aug. 2010 wvutoday.wvu.edu
    • WVU’s Mobile Presence Mar. 2011 tournaments.wvu.edu
    • WVU’s Mobile Presence Apr. 2011 studentaffairs.wvu.edu
    • these are just some of our projects... standalone responsive designs mobile sitesnative apps mobile templates APIs
    • How many of you...have an informal process? http://flic.kr/p/8MC5Ti
    • Guerrilla & Distributed Guerrilla & DistributedYes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
    • Worksheet Time!
    • ProgressiveMobile Strategy
    • Prioritize http://flic.kr/p/P22Ry
    • Iterate http://flic.kr/p/aaBZ1
    • Be Platform Neutral Being Platform Neutral fo rm latP http://flic.kr/p/5PyiGh
    • a Progressive Mobile Strategy...is about realistically prioritizing mobile solutions for your organization. Then working one-by-one through them.
    • IS EY ES K IT E BTH LL A SM
    • a ProgressiveMobile Strategy has three stages....
    • Targeting Your Audience http://flic.kr/p/6G32c
    • CraftinConten g t
    • Choosing a Platform http://flic.kr/p/7V85wM
    • Progressive Mobile Strategy (in graphic form)
    • Targeting Your Audience http://flic.kr/p/6G32
    • Let’s constrain these audiences basedon what we know about mobile users.Note: not users that are mobile, users that are using mobile devices.
    • Google’s Mobile User Groups
    • Google’s Mobile User Groups Repetitive Now
    • Google’s Mobile User Groups
    • Other examples? http://flic.kr/p/8MC5Ti
    • Google’s Mobile User Groups Repetitive Now Bored Now
    • Google’s Mobile User Groups
    • Other examples? http://flic.kr/p/8MC5Ti
    • Google’s Mobile User Groups Repetitive Now Bored Now Urgent Now
    • Google’s Mobile User Groups
    • Other examples? http://flic.kr/p/8MC5Ti
    • Urgent Now
    • current student...Urgent Now
    • 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?
    • Local Users95% of smartphone users have searched for local content. from Google’s “The Mobile Movement” report, April 2011
    • Instant Gratification88% of smartphone users took action on a search result within a day from Google’s “The Mobile Movement” report, April 2011
    • 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
    • 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
    • So is context dead? http://flic.kr/p/4dtHWb
    • Now, it’s personal.
    • Targeting Your Audience Review
    • Targeting Your Audience Review Those with Urgent Needs
    • Targeting Your Audience Review Those with Urgent Needs Local Constituencies
    • Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes
    • Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes Don’t Focus on “On the Go”
    • Worksheet Time!
    • CraftinConten g t
    • Content Delivery is Secondary to Tangible Utility Make sure your content is useful, damn it!
    • Which is better?Content Delivery or Tangible Utility from XKCD, http://xkcd.com/773/
    • Boo, Politics!
    • Don’t worry about being known, worry about being useful.
    • Don’t Convert, CreateLook for new ways to combine content.
    • Break Out of Silos Don’t follow org charts when developing mobile solutions.
    • Mobile First mobile first“Mobile devices require software developmentteams to focus on only the most importantdata and actions in an application. - Luke Wroblewski @lukew
    • Crafting Content Review Be able to answer, “What value will thetargeted audiences get from this content?”
    • Worksheet Time!
    • Choosing a Platform http://flic.kr/p/7V85wM
    • an iPhone app... ...a mobile website vs.
    • an iPhone app... ...a mobile website vs.
    • The question is no longer, “Which do wedevelop for, native or mobile web?” but...
    • “How do we develop solutions to handle both mobile web & native now as well as the devices of the future?”
    • these are just some of the options... standalone responsive designs mobile sitesnative apps mobile templates APIs
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • Give your existing content achance to adapt to the future.
    • Mobile Web-Optimized Solutionsresponsive mobile standalone designs templates mobile sites
    • Mobile Web-Optimized Solutions responsive design
    • responsive web design...
    • Why Be ResponsiveOne...URL.
    • Why Be Responsive One...Set of Mark-up.
    • Why Be Responsive One...Deployment.
    • futurefriend.ly
    • Time to Party... balloons http://flic.kr/p/h6McT
    • “Not so fast, my friends...” http://flic.kr/p/8x6b8X
    • RWD Challenges Media...Images & Video
    • RWD Challenges3rd Party Content... Ads & Social Widgets
    • RWD ChallengesOne Set of Mark-up... Double-edged Sword
    • Learned the Hard Way:happyholidays.wvu.edu Kurogo
    • RWD ChallengesIs “display: none” the Dark Matter of RWD? http://flic.kr/p/8BPQ2q
    • 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.
    • 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.
    • The common thread is browser-detection. Common Thread... Browser Detection http://flic.kr/p/capQiq
    • Been Around a While Old doghttp://flic.kr/p/bWQicm
    • Lots of SolutionsWURFL 51Degrees.mobi OpenDDR DeviceAtlas
    • My fav is ua-parser:*github.com/tobie/ua-parser* - I help maintain the project ;) https://github.com/tobie/ua-parser/
    • 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/
    • Kurogo Mobile Framework:kurogo.org Kurogo
    • UCLA Mobile Web Framework:mwf.ucla.edu Kurogo
    • Molly Project at Uni. of Oxford:mollyproject.org Kurogo
    • Building New Content Silos?24-7 access, two way
    • Arms Race? http://flic.kr/p/6RVLY2
    • A New Path?image of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
    • 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.
    • “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
    • RWD + Browser Detection? developers and designers http://flic.kr/p/7Ma9n
    • M-ADVANCED DESKTOP WEB ress.dmolsen.comMOBILE BASIC
    • Server-side Feature-Detection for PHP:detector.dmolsen.com Kurogo
    • RESS is in its Infancy...Infancy http://flic.kr/p/7B7uyp
    • Untested ...and untested.http://flic.kr/p/nNZRV
    • U. of Notre Dame ExampleND data http://weedygarden.net/2012/05/a-case-for-ress/
    • Large Screen: 136 requests @ 2.7MB ND dataSmall Screen:23 requests @ 291K http://weedygarden.net/2012/05/a-case-for-ress/
    • Which One: RWD, Device Exp., or RESS:lukew.com/ff/entry.asp?1509 Kurogo
    • Questions about Mobile Web? http://flic.kr/p/8MC5Ti
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • 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.
    • APIs are the infrastructure for your mobile initiatives... Create Once, Publish Everywhere http://flic.kr/p/7WrxkT
    • We’re really talking content.
    • Next StepsStructure & store data with the future in mind.
    • 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/
    • Recombinable ContentAPI highway slide
    • Structured & Self-Aware Contentstructured & self-aware content
    • Future-Ready Content:alistapart.com/articles/future-ready-content Kurogo
    • 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/
    • Creating and Planning Content for RWD:t.co/MaxGY7Fc Kurogo
    • PRT APIUpdate once. Publishes to: iOS App, Mobile Website, Student Portal, Transportation Website, & Twitter
    • Our next step: Quarry Quarry http://flic.kr/p/6iVN8S
    • Data Portals Are Coming:data.gov Kurogo
    • The Age of the Sensor
    • Questions about APIs? http://flic.kr/p/8MC5Ti
    • A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
    • Native apps will be driven by vendors. http://flic.kr/p/5SikYe
    • Native appsshould be transformative. http://flic.kr/p/zBdU7
    • Branding & Centralization of Apps? Kurogo
    • 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.
    • Questions about Native Apps? http://flic.kr/p/8MC5Ti
    • Worksheet Time!
    • Making the case for mobile web first.
    • Two Possible Solutions Things to Consider http://flic.kr/p/9jatna
    • Discovery #1How UsersDiscover Content http://flic.kr/p/3CaBwQ
    • “Not every mobile device will haveyour app on it but every mobile stat about browser usagedevice will have a browser. - Jason Grigsby @grigs
    • 77% of smartphone users use search. Most visited type of website. from Google’s “The Mobile Movement” report, April 2011
    • Existing Indexed Content
    • the just in time internet The Just In Time Internet
    • 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.
    • #2 How We Already Communicate
    • “ Links don’t open apps. - Jason Grigsby stat about@grigs browser usage
    • 55% of users with an internet-enabledphone use it to check personal email. from Merkle’s “View from the Digital Inbox” report, January 2011
    • Getting social?
    • links + skills + searchmobile web first
    • 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
    • Questions aboutMobile Web First? http://flic.kr/p/8MC5Ti
    • Worksheet Time!
    • Future Friendly Tenet Text#3 Help others do the same.
    • It’s a Starting Point
    • Testing the Future http://flic.kr/p/cfkTiC
    • Web-based Testingbrowserstack.com
    • Mobile Emulatorsmobilexweb.com/emulators
    • Get YourHands onReal Devices http://flic.kr/p/7972f6
    • 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
    • Cellphone StoreLeftovers Text http://flic.kr/p/57nxHB
    • eBay Has Everythingebay.com/electronics/cell-phone-pda
    • MobileKarma Makes it Easymobilekarma.com
    • iPod Touch+ Samsung Fascinate+ HTC Thunderbolt $438
    • WVU’s Device Lab
    • AdobeShadow
    • Latency is the MobilePerformance Bottleneck
    • Throttle Simulates Cell Networksgithub.com/dmolsen/Throttle
    • Wrappingit all up... http://flic.kr/p/4fwjAq
    • #1Identify the audience.
    • #2Identify the content for that audience.
    • #3Implement platform solutions.
    • #4Lather, rinse, & repeat.
    • AudienceOn-campus AdmitsProspects Alumni
    • Audience ContentOn-campus Contact Info Admits MapProspects Emergency Alumni Calendar
    • Audience Content PlatformOn-campus Contact Info Mobile Portal Admits Map Native Apps ResponsiveProspects Emergency Design Alumni Calendar
    • Don’t get stuck on platform. http://flic.kr/p/4zDk7q
    • Focus on your targeted audiences & content. http://flic.kr/p/8Ti584
    • TheThe evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
    • Resources Resources
    • futurefriend.ly
    • mobilewebbestpractices.comTwitter & Stuff
    • On Twitter @dmolsen...
    • Or at dmolsen.com...
    • Many thanks to Mr. Robertson for the snazzy device &progressive strategy graphics
    • The End http://flic.kr/p/9Hac2V