The Future Friendly Campus (Workshop Edition)

The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus Workshop Edition Dave Olsen, @dmolsen West Virginia University
Thank You, HighEdWeb Arkansas: hewebar.org Kurogo
This Will be Posted to SlideShare slideshare.net/dmolsenwvu Kurogo
programmer 9 years at wvu wvu has 30,000 students
from 30,000 ft. and... http://flic.kr/p/4tdahf
...3 years in the making. http://flic.kr/p/5Nobj3
ask questions Feel free to ask questions. http://flic.kr/p/93aPCq
Getting to Know You http://flic.kr/p/8MC5Ti
Introduce Yourselves Let’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
Terminology What Are “Apps?”
Anything you get from an App Store... Kurogo
Terminology I will refer to these as Native Apps.
Terminology What is the “Mobile Web?” Is it separate from the “Desktop Web?”
TABLET WEB DESKTOP WEB It’s All One Web MOBILE WEB
Terminology What is “WebKit?”
WebKit is 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
So why http://flic.kr/p/9WjR
A History Lesson History Lesson
The Future FriendlyWhy Campus In the beginning...
We Had Print
We Had Print Strong Layout Constraints defined container
We Had Print Strong Layout Constraints Content & Layout Are defined Tightly Coupled container
We Had Print Strong Layout Constraints Content & Layout Are defined 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 Future FriendlyWhy times... Campus In more recent
Computers
Internet
Internet Flexible Layouts
Internet Flexible Layouts Content & Layout Can Start To Be Decoupled
Internet Flexible Layouts Content & Layout Can Start To Be Decoupled Has Turned Into “Talk With”
Which led to a... False Sense of Security Why
Fixed Access 24-7 access, two way
Limited Resolutions 24-7 access, two way
Content Silos 24-7 access, two way
The Future FriendlyWhy Day Campus The Present
Mobile 24-7 access, two way
Mobile Highly Constrained Layouts
Mobile Highly Constrained Layouts Rapidly Evolving Ecosystem
Mobile Highly Constrained Layouts Rapidly Evolving Ecosystem Allows True “Anywhere, Anytime” Access
Yes, Anywhere 75% of men admit to using their mobile 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 who visited a school with a mobile site were positively affected. from Noel Levitz’s “Mobile Expectations Report,” Feb. 2012
59% of schools currently 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 with 9 out of 10 of those planning to implement a prospective student solution. from Karine Joly’s “State of the Mobile web”, Feb. 2012
How many of you... have a solution for prospective students? http://flic.kr/p/8MC5Ti
We’re entering... The Hyper-Connected Society
So what does it 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 sites native 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 Alone You’re Not Alone in Thinking That http://flic.kr/p/7agpKx
There is Ray of Hope
The What What of 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
What The Truths What aka “Our Reality”
The Truths Disruption will only Text accelerate.
The Truths Our existing standards, Text workflows, & infrastructure won’t hold up.
The Truths ProprietaryText solutions will dominate at first.
The Truths The standards process will be Text painfully slow.
What Hope There is What Rejoice!
A New Hope Acknowledge & embrace Text unpredictability.
A New Hope Think & behave in a Text future-friendly way.
A New Hope Text Help 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
How The How How of Future Friendly
Future Friendly Tenet Acknowledge & embrace Text #1 unpredictability.
Don’t Overreact
The Shiny
Tech Isn’t Always Best technology 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 one website that is the be-all-end-all for implementing your web strategy? Then why only one mobile solution?
Our users expect access to all of this content on their mobile device.
There Here http://flic.kr/p/5rTyAh
Three Environments for Developing Your Strategy 3 approaches for developing a strategy http://flic.kr/p/7jqeyj
Formal & Centralized Formal & Centralized http://flic.kr/p/9odzFK
Informal but Centralized Informal but Centralized http://flic.kr/p/9PDBBY
Guerrilla & Distributed Guerrilla & Distributed Yes, 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&M gomobile.tamu.edu
Texas A&M’s Mobile Strategy Team gomobile.tamu.edu
Texas A&M’s Mobile Strategy gomobile.tamu.edu
Texas A&M’s “Why Go Mobile” gomobile.tamu.edu
Texas A&M Tech: Twitter Bootstrap twitter.github.com/bootstrap/
Texas A&M Tech: UCLA MWF mwf.ucla.edu
How many of you... have a formal process? http://flic.kr/p/8MC5Ti
Informal but Centralized Informal but Centralized http://flic.kr/p/9PDBBY
WVU University Relations - Web web.ur.wvu.edu
Advisor No Policy Advisor Photo We Advise No Policy http://flic.kr/p/57Bkm5
WVU’s Mobile Presence Aug. 2009 iWVU & m.wvu.edu
m.wvu.edu Traffic by Semester 11000 650%+ increase 8250 in avg. traffic 5500 2750 0 Fall 2009 Spring 2010 Fall 2010 Spring 2011 Fall 2011 Sping 2012 Average page views per day
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 sites native apps mobile templates APIs
How many of you... have an informal process? http://flic.kr/p/8MC5Ti
Guerrilla & Distributed Guerrilla & Distributed Yes, I know this is a picture of a gorilla. http://flic.kr/p/8UCuqy
Worksheet Time!
Progressive Mobile Strategy
Prioritize http://flic.kr/p/P22Ry
Iterate http://flic.kr/p/aaBZ1
Be Platform Neutral Being Platform Neutral fo rm lat P 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 B TH LL A SM
a Progressive Mobile Strategy has three stages....
Targeting Your Audience http://flic.kr/p/6G32c
Craftin Conten 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 based on 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
Other examples? http://flic.kr/p/8MC5Ti
Google’s Mobile User Groups Repetitive Now Bored Now
Google’s Mobile User Groups Repetitive Now Bored Now Urgent Now
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 Users 95% of smartphone users have searched for local content. from Google’s “The Mobile Movement” report, April 2011
Instant Gratification 88% of smartphone users took action on a search result within a day from Google’s “The Mobile Movement” report, April 2011
Action Heroes 61% of smartphone users ended up calling a business based on their search. Tip: make your phone numbers clickable with tel: from Google’s “The Mobile Movement” report, April 2011 http://flic.kr/p/6JYQDR
Not Always “On the Go” 30% of smartphone users used the mobile internet from their couch. 90% used it from home. from Google’s “The Mobile Movement” report, April 2011
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!
Craftin Conten 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, Create Look 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 development teams to focus on only the most important data and actions in an application. - Luke Wroblewski @lukew
Crafting Content Review Be able to answer, “What value will the targeted 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 we develop 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 sites native apps mobile templates APIs
A poor representation of the ideal platform pyramid... Native Apps APIs Standalone sites Mobile Web Mobile Templates Responsive Designs
Give your existing content a chance to adapt to the future.
Mobile Web-Optimized Solutions responsive mobile standalone designs templates mobile sites
Mobile Web-Optimized Solutions responsive design
responsive web design...
Why Be Responsive One... 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 Challenges 3rd Party Content... Ads & Social Widgets
RWD Challenges One Set of Mark-up... Double-edged Sword
Learned the Hard Way: happyholidays.wvu.edu Kurogo
RWD Challenges Is “display: none” the Dark Matter of RWD? http://flic.kr/p/8BPQ2q
Mobile Web-Optimized Solutions mobile templates Mobile Templates deliver optimized layouts based on browser classes. Requires server-side technology. Must keep classification up-to-date with newest & latest browsers.
Mobile Web-Optimized Solutions standalone mobile sites Standalone websites can serve as “mobile experiences” for your visitors. Content & functionality are highly optimized. Can be another silo of content that needs to be maintained & advertised.
The common thread is browser-detection. Common Thread... Browser Detection http://flic.kr/p/capQiq
Been Around a While Old dog http://flic.kr/p/bWQicm
Lots of Solutions WURFL 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 @xbs http://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 Solutions RESS Responsive Web Design with Server Side Components (RESS) is a hybrid of RWD & Mobile Templates. Flexible layout of RWD but finely tunes media & assets on the server. Requires server-side logic & device detection.
“ In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392
RWD + Browser Detection? developers and designers http://flic.kr/p/7Ma9n
M-ADVANCED DESKTOP WEB ress.dmolsen.com MOBILE 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 Example ND data http://weedygarden.net/2012/05/a-case-for-ress/
Large Screen: 136 requests @ 2.7MB ND data Small 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
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 Steps Structure & 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 Content API highway slide
Structured & Self-Aware Content structured & self-aware content
Future-Ready Content: alistapart.com/articles/future-ready-content Kurogo
Content Challenges “ As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional webpage to flow as needed through varied displays and contexts. In the words of futurefriend.ly’s Brad Frost, “get your content ready to go anywhere because it’s going to go everywhere.” - Sara Wachter-Boettcher @sara_ann_marie http://www.alistapart.com/articles/future-ready-content/
Creating and Planning Content for RWD: t.co/MaxGY7Fc Kurogo
PRT API Update 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
Native apps will be driven by vendors. http://flic.kr/p/5SikYe
Native apps should be transformative. http://flic.kr/p/zBdU7
Branding & Centralization of Apps? Kurogo
Choosing a Platform Review Start working on your infrastructure. Now. There is a lot of content already out there & users expect access to it. There isn’t one mobile solution for your organization or client.
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 Users Discover Content http://flic.kr/p/3CaBwQ
“ Not every mobile device will have your app on it but every mobile stat about browser usage device will have a browser. - Jason Grigsby @grigs
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 find information on a topic the more likely it is 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-enabled phone use it to check personal email. from Merkle’s “View from the Digital Inbox” report, January 2011
Getting social?
links + skills + search mobile 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 about Mobile 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 Testing browserstack.com
Mobile Emulators mobilexweb.com/emulators
Get Your Hands on Real 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 Store Leftovers Text http://flic.kr/p/57nxHB
eBay Has Everything ebay.com/electronics/cell-phone-pda
MobileKarma Makes it Easy mobilekarma.com
iPod Touch + Samsung Fascinate + HTC Thunderbolt $438
WVU’s Device Lab
Adobe Shadow
Latency is the Mobile Performance Bottleneck
Throttle Simulates Cell Networks github.com/dmolsen/Throttle
Wrapping it all up... http://flic.kr/p/4fwjAq
#1 Identify the audience.
#2 Identify the content for that audience.
#3 Implement platform solutions.
#4 Lather, rinse, & repeat.
Audience On-campus Admits Prospects Alumni
Audience Content On-campus Contact Info Admits Map Prospects Emergency Alumni Calendar
Audience Content Platform On-campus Contact Info Mobile Portal Admits Map Native Apps Responsive Prospects 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
The The evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
Resources Resources
futurefriend.ly
mobilewebbestpractices.com Twitter & 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)

Check these out next

The Future Friendly Campus (Workshop Edition)

Recommended

More Related Content

Similar to The Future Friendly Campus (Workshop Edition)(20)

More from Dave Olsen(20)

Recently uploaded(20)

The Future Friendly Campus (Workshop Edition)