Your SlideShare is downloading. ×
0
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              ...
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      Primaril...
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_perc...
The Wave is Coming 34% of high school students report owning an iPhone.http://www.macrumors.com/2012/04/03/one-third-of-u-...
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 ...
48% of prospects whovisited a school with a   mobile site were positively affected.      from Noel Levitz’s “Mobile Expect...
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.       ...
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    ...
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                  @luk...
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 o...
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    ...
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       ...
Does your school have just onewebsite that is the be-all-end-all forimplementing your web strategy?Then why only one mobil...
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                                      ...
Formal & Centralized     Formal & Centralized                            http://flic.kr/p/9odzFK
Informal but CentralizedInformal but Centralized                                 http://flic.kr/p/9PDBBY
Guerrilla &                                                             Distributed                                       ...
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/...
WVU’s Mobile Presence     Aug. 2009   iWVU & m.wvu.edu
m.wvu.edu Traffic by Semester11000                                                                650%+                    ...
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      ...
How many of you...have an informal process?                    http://flic.kr/p/8MC5Ti
Guerrilla &                                                             Distributed                                       ...
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:...
a Progressive Mobile Strategy...is about realistically prioritizing mobile   solutions for your organization. Then    work...
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 us...
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...
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 Move...
Action Heroes61% of smartphone users       ended up calling a  business based on their                  search.           ...
Not Always“On the Go”30% of smartphone usersused the mobile internetfrom their couch.90% used it from home.from Google’s “...
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...
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 important...
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        ...
A poor representation of the ideal      platform pyramid...          Native Apps              APIs                     Sta...
A poor representation of the ideal      platform pyramid...          Native Apps              APIs                     Sta...
A poor representation of the ideal      platform pyramid...          Native Apps              APIs                     Sta...
A poor representation of the ideal      platform pyramid...          Native Apps              APIs                     Sta...
A poor representation of the ideal      platform pyramid...          Native Apps              APIs                     Sta...
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...
Mobile Web-Optimized Solutionsstandalonemobile sites               Standalone websites can serve as                “mobile...
The common thread is browser-detection.    Common Thread... Browser Detection                                         http...
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         detecti...
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 hy...
“In a nutshell, RESS combines adaptivelayouts with server side component(not full page) optimization. So asingle set of pa...
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 ...
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                     Sta...
def. APIs  stands for Application Programming Interface.  APIs allow one program to talk to another  program in an agreed-...
APIs are the infrastructure for your mobile initiatives...       Create Once, Publish Everywhere                          ...
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 o...
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 ...
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                     Sta...
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 & user...
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....
77% of smartphone users use search.   Most visited type of website.    from Google’s “The Mobile Movement” report, April 2...
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       ...
#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” re...
Getting social?
links       + skills       + searchmobile web first
70% of prospective students     are happy to browse your                Text     current websites on their          mobile...
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, &     ...
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         ...
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         ...
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
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
Upcoming SlideShare
Loading in...5
×

The Future Friendly Campus (Workshop Edition)

4,464

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

Transcript of "The Future Friendly Campus (Workshop Edition)"

  1. 1. The FutureFriendly CampusWorkshop EditionDave Olsen, @dmolsenWest Virginia University
  2. 2. Thank You, HighEdWeb Arkansas:hewebar.org Kurogo
  3. 3. This Will be Posted to SlideShareslideshare.net/dmolsenwvu Kurogo
  4. 4. programmer9 years at wvuwvu has 30,000 students
  5. 5. from 30,000 ft. and... http://flic.kr/p/4tdahf
  6. 6. ...3 years inthe making. http://flic.kr/p/5Nobj3
  7. 7. ask questionsFeel free to ask questions. http://flic.kr/p/93aPCq
  8. 8. Getting to Know You http://flic.kr/p/8MC5Ti
  9. 9. Introduce YourselvesLet’s get this started! http://flic.kr/p/u71uE
  10. 10. What We’ll Talk About•Some Terminology•Why Mobile•Future-Friendly•Developing a FF Strategy•Tools & Resources http://flic.kr/p/86dxVE
  11. 11. Clearing Up Some Terminology http://flic.kr/p/7XKTn8
  12. 12. TerminologyWhat Are “Apps?”
  13. 13. Anything you get from an App Store... Kurogo
  14. 14. TerminologyI will refer to these as Native Apps.
  15. 15. TerminologyWhat is the “Mobile Web?” Is it separate from the “Desktop Web?”
  16. 16. TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
  17. 17. TerminologyWhat is “WebKit?”
  18. 18. WebKitis a layout engine that powers...
  19. 19. Terminology Important!WebKit-based browsers are not all equal.
  20. 20. Anything else I can define for you? http://flic.kr/p/8MC5Ti
  21. 21. Sowhy http://flic.kr/p/9WjR
  22. 22. A History LessonHistory Lesson
  23. 23. The FutureFriendlyWhy Campus In the beginning...
  24. 24. We Had Print
  25. 25. We Had Print Strong Layout Constraintsdefined container
  26. 26. We Had Print Strong Layout Constraints Content & Layout Aredefined Tightly Coupled container
  27. 27. We Had Print Strong Layout Constraints Content & Layout Aredefined Tightly Coupled container Primarily “Talk At”
  28. 28. 20th Century Legacy
  29. 29. Social Media suffers “Broadcast Legacy”connect.wvu.edu Kurogo
  30. 30. Think about how you can break out of this model. http://flic.kr/p/8MC5Ti
  31. 31. The FutureFriendlyWhy times... Campus In more recent
  32. 32. Computers
  33. 33. Internet
  34. 34. InternetFlexible Layouts
  35. 35. InternetFlexible LayoutsContent & Layout Can StartTo Be Decoupled
  36. 36. InternetFlexible LayoutsContent & Layout Can StartTo Be DecoupledHas Turned Into “Talk With”
  37. 37. Which led to a...False Sense of Security Why
  38. 38. Fixed Access24-7 access, two way
  39. 39. Limited Resolutions24-7 access, two way
  40. 40. Content Silos24-7 access, two way
  41. 41. The FutureFriendlyWhy Day Campus The Present
  42. 42. Mobile24-7 access, two way
  43. 43. MobileHighly Constrained Layouts
  44. 44. MobileHighly Constrained LayoutsRapidly Evolving Ecosystem
  45. 45. MobileHighly Constrained LayoutsRapidly Evolving EcosystemAllows True “Anywhere,Anytime” Access
  46. 46. Yes, Anywhere75% of men admit to using theirmobile on the toilet.Source: http://www.11mark.com/IT-in-the-Toilet
  47. 47. How many of you... kidding! http://flic.kr/p/8MC5Ti
  48. 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. 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. 50. How many of you... have an internet- enabled phone? http://flic.kr/p/8MC5Ti
  51. 51. 50% of the US population is now using a smartphone.from Asymco, December 2010
  52. 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. 53. 48% of prospects whovisited a school with a mobile site were positively affected. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012
  54. 54. 59% of schoolscurrently provide some sort of mobile solution. from Karine Joly’s “State of the Mobile web”, Feb. 2012
  55. 55. How many of you...have a mobile solution? http://flic.kr/p/8MC5Ti
  56. 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. 57. How many of you... have a solution for prospective students? http://flic.kr/p/8MC5Ti
  58. 58. We’re entering...The Hyper-Connected Society
  59. 59. So what doesit all mean? http://flic.kr/p/g116c
  60. 60. Building New Content Silos?24-7 access, two way
  61. 61. Learning New Skills?24-7 access, two way
  62. 62. Trying to Keep Up?
  63. 63. A Small Taste of the Present
  64. 64. WVU’s Solutions standalone responsive designs mobile sitesnative apps mobile templates APIs
  65. 65. The Future And then there’s...FriendlyWhy Campus The Near Future
  66. 66. Will We Have to Support This?
  67. 67. It’s Scary!Scary
  68. 68. It’s Overwhelming!
  69. 69. You’ll Want To Hide
  70. 70. You’re Not AloneYou’re Not Alone in Thinking That http://flic.kr/p/7agpKx
  71. 71. There is Ray of Hope
  72. 72. The What Whatof Future Friendly
  73. 73. who founded it
  74. 74. Twitter Handles @brad_frost @scottjenson @adactio @scottjehl @grigs @lukew @bryanrieger @lyzadanger@stephanierieger @globalmoxie https://twitter.com/dmolsen/ffly
  75. 75. futurefriend.ly
  76. 76. WhatThe Truths What aka “Our Reality”
  77. 77. The TruthsDisruption will only Text accelerate.
  78. 78. The Truths Our existing standards, Textworkflows, & infrastructure won’t hold up.
  79. 79. The TruthsProprietaryText solutions will dominate at first.
  80. 80. The TruthsThe standards process will be Text painfully slow.
  81. 81. What HopeThere is What Rejoice!
  82. 82. A New HopeAcknowledge & embrace Text unpredictability.
  83. 83. A New HopeThink & behave in a Textfuture-friendly way.
  84. 84. A New Hope TextHelp others do the same.
  85. 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. 86. HowThe How Howof Future Friendly
  87. 87. Future Friendly Tenet Acknowledge & embrace Text#1 unpredictability.
  88. 88. Don’t Overreact
  89. 89. The Shiny
  90. 90. Tech Isn’t Always Besttechnology doesn’t solve all ills (pencil photo)
  91. 91. Be Friendly!
  92. 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. 93. So Breathe & Relax... A Little
  94. 94. Future Friendly Tenet Think & Text behave in a#2 future-friendly way.
  95. 95. Future-Friendly Strategy
  96. 96. that iPhone app you want?
  97. 97. it’s not a future-friendly strategy...
  98. 98. an iPhone app... ...a mobile website +
  99. 99. again, they’re not a future-friendly strategy... +
  100. 100. A future-friendly strategy involves more than just the platform you’re targeting. It involves understanding your audience & their needs.
  101. 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. 102. Our users expect access to all ofthis content on their mobile device.
  103. 103. There Here http://flic.kr/p/5rTyAh
  104. 104. Three Environments forDeveloping Your Strategy3 approaches for developing a strategy http://flic.kr/p/7jqeyj
  105. 105. Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
  106. 106. Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
  107. 107. Guerrilla & Distributed Guerrilla & DistributedYes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
  108. 108. Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
  109. 109. Go Mobile at Texas A&Mgomobile.tamu.edu
  110. 110. Texas A&M’s Mobile Strategy Teamgomobile.tamu.edu
  111. 111. Texas A&M’s Mobile Strategygomobile.tamu.edu
  112. 112. Texas A&M’s “Why Go Mobile”gomobile.tamu.edu
  113. 113. Texas A&M Tech: Twitter Bootstraptwitter.github.com/bootstrap/
  114. 114. Texas A&M Tech: UCLA MWFmwf.ucla.edu
  115. 115. How many of you...have a formal process? http://flic.kr/p/8MC5Ti
  116. 116. Informal but CentralizedInformal but Centralized http://flic.kr/p/9PDBBY
  117. 117. WVU University Relations - Webweb.ur.wvu.edu
  118. 118. Advisor No Policy Advisor PhotoWe Advise No Policy http://flic.kr/p/57Bkm5
  119. 119. WVU’s Mobile Presence Aug. 2009 iWVU & m.wvu.edu
  120. 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. 121. WVU’s Mobile Tech:kurogo.org Kurogo
  122. 122. WVU’s Mobile Presence Aug. 2010 wvutoday.wvu.edu
  123. 123. WVU’s Mobile Presence Mar. 2011 tournaments.wvu.edu
  124. 124. WVU’s Mobile Presence Apr. 2011 studentaffairs.wvu.edu
  125. 125. these are just some of our projects... standalone responsive designs mobile sitesnative apps mobile templates APIs
  126. 126. How many of you...have an informal process? http://flic.kr/p/8MC5Ti
  127. 127. Guerrilla & Distributed Guerrilla & DistributedYes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
  128. 128. Worksheet Time!
  129. 129. ProgressiveMobile Strategy
  130. 130. Prioritize http://flic.kr/p/P22Ry
  131. 131. Iterate http://flic.kr/p/aaBZ1
  132. 132. Be Platform Neutral Being Platform Neutral fo rm latP http://flic.kr/p/5PyiGh
  133. 133. a Progressive Mobile Strategy...is about realistically prioritizing mobile solutions for your organization. Then working one-by-one through them.
  134. 134. IS EY ES K IT E BTH LL A SM
  135. 135. a ProgressiveMobile Strategy has three stages....
  136. 136. Targeting Your Audience http://flic.kr/p/6G32c
  137. 137. CraftinConten g t
  138. 138. Choosing a Platform http://flic.kr/p/7V85wM
  139. 139. Progressive Mobile Strategy (in graphic form)
  140. 140. Targeting Your Audience http://flic.kr/p/6G32
  141. 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. 142. Google’s Mobile User Groups
  143. 143. Google’s Mobile User Groups Repetitive Now
  144. 144. Google’s Mobile User Groups
  145. 145. Other examples? http://flic.kr/p/8MC5Ti
  146. 146. Google’s Mobile User Groups Repetitive Now Bored Now
  147. 147. Google’s Mobile User Groups
  148. 148. Other examples? http://flic.kr/p/8MC5Ti
  149. 149. Google’s Mobile User Groups Repetitive Now Bored Now Urgent Now
  150. 150. Google’s Mobile User Groups
  151. 151. Other examples? http://flic.kr/p/8MC5Ti
  152. 152. Urgent Now
  153. 153. current student...Urgent Now
  154. 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. 155. Local Users95% of smartphone users have searched for local content. from Google’s “The Mobile Movement” report, April 2011
  156. 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. 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. 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. 159. So is context dead? http://flic.kr/p/4dtHWb
  160. 160. Now, it’s personal.
  161. 161. Targeting Your Audience Review
  162. 162. Targeting Your Audience Review Those with Urgent Needs
  163. 163. Targeting Your Audience Review Those with Urgent Needs Local Constituencies
  164. 164. Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes
  165. 165. Targeting Your Audience Review Those with Urgent Needs Local Constituencies Short Timeframes Don’t Focus on “On the Go”
  166. 166. Worksheet Time!
  167. 167. CraftinConten g t
  168. 168. Content Delivery is Secondary to Tangible Utility Make sure your content is useful, damn it!
  169. 169. Which is better?Content Delivery or Tangible Utility from XKCD, http://xkcd.com/773/
  170. 170. Boo, Politics!
  171. 171. Don’t worry about being known, worry about being useful.
  172. 172. Don’t Convert, CreateLook for new ways to combine content.
  173. 173. Break Out of Silos Don’t follow org charts when developing mobile solutions.
  174. 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. 175. Crafting Content Review Be able to answer, “What value will thetargeted audiences get from this content?”
  176. 176. Worksheet Time!
  177. 177. Choosing a Platform http://flic.kr/p/7V85wM
  178. 178. an iPhone app... ...a mobile website vs.
  179. 179. an iPhone app... ...a mobile website vs.
  180. 180. The question is no longer, “Which do wedevelop for, native or mobile web?” but...
  181. 181. “How do we develop solutions to handle both mobile web & native now as well as the devices of the future?”
  182. 182. these are just some of the options... standalone responsive designs mobile sitesnative apps mobile templates APIs
  183. 183. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  184. 184. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  185. 185. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  186. 186. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  187. 187. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  188. 188. Give your existing content achance to adapt to the future.
  189. 189. Mobile Web-Optimized Solutionsresponsive mobile standalone designs templates mobile sites
  190. 190. Mobile Web-Optimized Solutions responsive design
  191. 191. responsive web design...
  192. 192. Why Be ResponsiveOne...URL.
  193. 193. Why Be Responsive One...Set of Mark-up.
  194. 194. Why Be Responsive One...Deployment.
  195. 195. futurefriend.ly
  196. 196. Time to Party... balloons http://flic.kr/p/h6McT
  197. 197. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
  198. 198. RWD Challenges Media...Images & Video
  199. 199. RWD Challenges3rd Party Content... Ads & Social Widgets
  200. 200. RWD ChallengesOne Set of Mark-up... Double-edged Sword
  201. 201. Learned the Hard Way:happyholidays.wvu.edu Kurogo
  202. 202. RWD ChallengesIs “display: none” the Dark Matter of RWD? http://flic.kr/p/8BPQ2q
  203. 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. 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. 205. The common thread is browser-detection. Common Thread... Browser Detection http://flic.kr/p/capQiq
  206. 206. Been Around a While Old doghttp://flic.kr/p/bWQicm
  207. 207. Lots of SolutionsWURFL 51Degrees.mobi OpenDDR DeviceAtlas
  208. 208. My fav is ua-parser:*github.com/tobie/ua-parser* - I help maintain the project ;) https://github.com/tobie/ua-parser/
  209. 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. 210. Kurogo Mobile Framework:kurogo.org Kurogo
  211. 211. UCLA Mobile Web Framework:mwf.ucla.edu Kurogo
  212. 212. Molly Project at Uni. of Oxford:mollyproject.org Kurogo
  213. 213. Building New Content Silos?24-7 access, two way
  214. 214. Arms Race? http://flic.kr/p/6RVLY2
  215. 215. A New Path?image of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
  216. 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. 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. 218. RWD + Browser Detection? developers and designers http://flic.kr/p/7Ma9n
  219. 219. M-ADVANCED DESKTOP WEB ress.dmolsen.comMOBILE BASIC
  220. 220. Server-side Feature-Detection for PHP:detector.dmolsen.com Kurogo
  221. 221. RESS is in its Infancy...Infancy http://flic.kr/p/7B7uyp
  222. 222. Untested ...and untested.http://flic.kr/p/nNZRV
  223. 223. U. of Notre Dame ExampleND data http://weedygarden.net/2012/05/a-case-for-ress/
  224. 224. Large Screen: 136 requests @ 2.7MB ND dataSmall Screen:23 requests @ 291K http://weedygarden.net/2012/05/a-case-for-ress/
  225. 225. Which One: RWD, Device Exp., or RESS:lukew.com/ff/entry.asp?1509 Kurogo
  226. 226. Questions about Mobile Web? http://flic.kr/p/8MC5Ti
  227. 227. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  228. 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. 229. APIs are the infrastructure for your mobile initiatives... Create Once, Publish Everywhere http://flic.kr/p/7WrxkT
  230. 230. We’re really talking content.
  231. 231. Next StepsStructure & store data with the future in mind.
  232. 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. 233. Recombinable ContentAPI highway slide
  234. 234. Structured & Self-Aware Contentstructured & self-aware content
  235. 235. Future-Ready Content:alistapart.com/articles/future-ready-content Kurogo
  236. 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. 237. Creating and Planning Content for RWD:t.co/MaxGY7Fc Kurogo
  238. 238. PRT APIUpdate once. Publishes to: iOS App, Mobile Website, Student Portal, Transportation Website, & Twitter
  239. 239. Our next step: Quarry Quarry http://flic.kr/p/6iVN8S
  240. 240. Data Portals Are Coming:data.gov Kurogo
  241. 241. The Age of the Sensor
  242. 242. Questions about APIs? http://flic.kr/p/8MC5Ti
  243. 243. A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sitesMobile Web Mobile Templates Responsive Designs
  244. 244. Native apps will be driven by vendors. http://flic.kr/p/5SikYe
  245. 245. Native appsshould be transformative. http://flic.kr/p/zBdU7
  246. 246. Branding & Centralization of Apps? Kurogo
  247. 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. 248. Questions about Native Apps? http://flic.kr/p/8MC5Ti
  249. 249. Worksheet Time!
  250. 250. Making the case for mobile web first.
  251. 251. Two Possible Solutions Things to Consider http://flic.kr/p/9jatna
  252. 252. Discovery #1How UsersDiscover Content http://flic.kr/p/3CaBwQ
  253. 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. 254. 77% of smartphone users use search. Most visited type of website. from Google’s “The Mobile Movement” report, April 2011
  255. 255. Existing Indexed Content
  256. 256. the just in time internet The Just In Time Internet
  257. 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. 258. #2 How We Already Communicate
  259. 259. “ Links don’t open apps. - Jason Grigsby stat about@grigs browser usage
  260. 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. 261. Getting social?
  262. 262. links + skills + searchmobile web first
  263. 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. 264. Questions aboutMobile Web First? http://flic.kr/p/8MC5Ti
  265. 265. Worksheet Time!
  266. 266. Future Friendly Tenet Text#3 Help others do the same.
  267. 267. It’s a Starting Point
  268. 268. Testing the Future http://flic.kr/p/cfkTiC
  269. 269. Web-based Testingbrowserstack.com
  270. 270. Mobile Emulatorsmobilexweb.com/emulators
  271. 271. Get YourHands onReal Devices http://flic.kr/p/7972f6
  272. 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. 273. Cellphone StoreLeftovers Text http://flic.kr/p/57nxHB
  274. 274. eBay Has Everythingebay.com/electronics/cell-phone-pda
  275. 275. MobileKarma Makes it Easymobilekarma.com
  276. 276. iPod Touch+ Samsung Fascinate+ HTC Thunderbolt $438
  277. 277. WVU’s Device Lab
  278. 278. AdobeShadow
  279. 279. Latency is the MobilePerformance Bottleneck
  280. 280. Throttle Simulates Cell Networksgithub.com/dmolsen/Throttle
  281. 281. Wrappingit all up... http://flic.kr/p/4fwjAq
  282. 282. #1Identify the audience.
  283. 283. #2Identify the content for that audience.
  284. 284. #3Implement platform solutions.
  285. 285. #4Lather, rinse, & repeat.
  286. 286. AudienceOn-campus AdmitsProspects Alumni
  287. 287. Audience ContentOn-campus Contact Info Admits MapProspects Emergency Alumni Calendar
  288. 288. Audience Content PlatformOn-campus Contact Info Mobile Portal Admits Map Native Apps ResponsiveProspects Emergency Design Alumni Calendar
  289. 289. Don’t get stuck on platform. http://flic.kr/p/4zDk7q
  290. 290. Focus on your targeted audiences & content. http://flic.kr/p/8Ti584
  291. 291. TheThe evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
  292. 292. Resources Resources
  293. 293. futurefriend.ly
  294. 294. mobilewebbestpractices.comTwitter & Stuff
  295. 295. On Twitter @dmolsen...
  296. 296. Or at dmolsen.com...
  297. 297. Many thanks to Mr. Robertson for the snazzy device &progressive strategy graphics
  298. 298. The End http://flic.kr/p/9Hac2V
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×