Post on 27-Jan-2015
description
The Future Friendly Campus
Dave Olsen, @dmolsenWest Virginia University
Workshop Edition
Kurogo
Thank You, HighEdWeb Arkansas: hewebar.org
Kurogo
This Will be Posted to SlideShareslideshare.net/dmolsenwvu
programmer9 years at wvuwvu has 30,000 students
ask questions
Feel free to ask questions.http://flic.kr/p/93aPCq
Introduce Yourselves
http://flic.kr/p/u71uE
Let’s get this started!
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
What Are “Apps?”
Terminology
Kurogo
Anything you get from an App Store...
I will refer to these as Native Apps.
Terminology
What is the “Mobile Web?” Is it separate from the “Desktop Web?”
Terminology
DES
KTO
P W
EBTA
BLET
WEB
MO
BILE WEB
It’s All One Web
What is “WebKit?”
Terminology
WebKit
is a layout engine that powers...
WebKit-based browsers are not all equal.
Important!
Terminology
Anything else I can define for you?
http://flic.kr/p/8MC5Ti
History Lesson
A History Lesson
Why
The Future Friendly CampusIn the beginning...
We Had Print
defined container
Strong Layout Constraints
We Had Print
defined container
Strong Layout Constraints
Content & Layout Are Tightly Coupled
We Had Print
defined container
Strong Layout Constraints
Content & Layout Are Tightly Coupled
Primarily “Talk At”
We Had Print
20th Century Legacy
Kurogo
Social Media suffers “Broadcast Legacy”connect.wvu.edu
Think about how you can break out of this model.
http://flic.kr/p/8MC5Ti
Why
The Future Friendly CampusIn more recent times...
Computers
Internet
Internet
Flexible Layouts
Internet
Flexible Layouts
Content & Layout Can StartTo Be Decoupled
Flexible Layouts
Content & Layout Can StartTo Be Decoupled
Has Turned Into “Talk With”
Internet
Why
Which led to a...
False Sense of Security
24-7 access, two way
Fixed Access
24-7 access, two way
Limited Resolutions
24-7 access, two way
Content Silos
Why
The Future Friendly CampusThe Present Day
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
Mobile
Yes, Anywhere
75% of men admit to using their mobile on the toilet.Source: http://www.11mark.com/IT-in-the-Toilet
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
http://www.macrumors.com/2012/04/03/one-third-of-u-s-high-school-students-now-own-an-iphone/
34% of high school students report owning an iPhone.
How many of you...
http://flic.kr/p/8MC5Ti
have an internet-enabled phone?
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/6jXfcb
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...
http://flic.kr/p/8MC5Ti
have a mobile solution?
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...
http://flic.kr/p/8MC5Ti
have a solution for prospective
students?
The Hyper-Connected Society
We’re entering...
24-7 access, two way
Building New Content Silos?
24-7 access, two way
Learning New Skills?
Trying to Keep Up?
A Small Taste of the Present
native apps
standalonemobile sites
mobile templates
responsive designs
APIs
WVU’s Solutions
Why
The Future Friendly Campus
And then there’s...
The Near Future
Will We Have to Support This?
Scary
It’s Scary!
It’s Overwhelming!
You’ll Want To Hide
You’re Not Alone in Thinking That
http://flic.kr/p/7agpKx
You’re Not Alone
There is Ray of Hope
WhatThe Whatof Future Friendly
who founded it
@grigs
@adactio
@brad_frost
@lyzadanger
@scottjehl
@bryanrieger
@stephanierieger @globalmoxie
@lukew
@scottjenson
Twitter Handles
https://twitter.com/dmolsen/ffly
futurefriend.ly
WhatWhatThe Truthsaka “Our Reality”
Text
The Truths
Disruption will only accelerate.
Text
The Truths
Our existing standards, workflows, & infrastructure
won’t hold up.
Text
The Truths
Proprietary solutions will dominate at first.
Text
The Truths
The standards process will be painfully slow.
WhatWhatThere is HopeRejoice!
Text
A New Hope
Acknowledge & embraceunpredictability.
Text
A New Hope
Think & behave in a future-friendly way.
Text
A New Hope
Help others do the same.
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
Summing It Up
“
HowHowThe Howof Future Friendly
Text
Future Friendly Tenet
Acknowledge & embraceunpredictability.#1
Don’t Overreact
The Shiny
technology doesn’t solve all ills (pencil photo)
Tech Isn’t Always Best
Be Friendly!
Text
Why not?
70% of prospective students are happy to browse your 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
Text
Future Friendly Tenet
Think & behave in a future-friendly way.#2
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.
3 approaches for developing a strategy
Three Environments for Developing Your Strategy
http://flic.kr/p/7jqeyj
Formal & Centralized
Formal & Centralized
http://flic.kr/p/9odzFK
Informal but Centralized
Informal but Centralizedhttp://flic.kr/p/9PDBBY
Guerrilla & Distributed
Guerrilla & Distributed
http://flic.kr/p/8UCuqyYes, I know this is a picture of a gorilla.
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 Bootstraptwitter.github.com/bootstrap/
Texas A&M Tech: UCLA MWFmwf.ucla.edu
How many of you...
http://flic.kr/p/8MC5Ti
have a formal process?
Informal but Centralized
Informal but Centralizedhttp://flic.kr/p/9PDBBY
WVU University Relations - Web web.ur.wvu.edu
Advisor Photo
Advisor No Policy
We Advise No Policyhttp://flic.kr/p/57Bkm5
Aug. 2009iWVU & m.wvu.edu
WVU’s Mobile Presence
0
2750
5500
8250
11000
Fall 2009 Spring 2010 Fall 2010 Spring 2011 Fall 2011 Sping 2012
Average page views per day
m.wvu.edu Traffic by Semester
650%+ increase in avg. traffic
Kurogo
WVU’s Mobile Tech: kurogo.org
Aug. 2010wvutoday.wvu.edu
WVU’s Mobile Presence
Mar. 2011tournaments.wvu.edu
WVU’s Mobile Presence
Apr. 2011studentaffairs.wvu.edu
WVU’s Mobile Presence
these are just some of our projects...
native apps
standalonemobile sites
mobile templates
responsive designs
APIs
How many of you...
http://flic.kr/p/8MC5Ti
have an informal process?
Guerrilla & Distributed
Guerrilla & Distributed
http://flic.kr/p/8UCuqyYes, I know this is a picture of a gorilla.
Worksheet Time!
Progressive Mobile Strategy
Being Platform Neutral
Platform
Be Platform Neutral
http://flic.kr/p/5PyiGh
is about realistically prioritizing mobile solutions for your organization. Then working one-by-one through them.
a Progressive Mobile Strategy...
THE KEY IS
SMALL BITES
has three stages....
a
Progressive Mobile Strategy
Crafting Content
Progressive Mobile Strategy(in graphic form)
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
Repetitive Now
Google’s Mobile User Groups
Google’s Mobile User Groups
Repetitive Now
Bored Now
Google’s Mobile User Groups
Google’s Mobile User Groups
Repetitive Now
Bored Now
Urgent Now
Google’s Mobile User Groups
Google’s Mobile User Groups
Urgent Now
Urgent Nowcurrent student...
I have a meeting. Where’s Allen Hall?
I need to call my professor about a late assignment...
How do I reset my WiFi password?
When does the bus get here?
Urgent Nowcurrent student...
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 users used the mobile internet from their couch. 90% used it from home.
from Google’s “The Mobile Movement” report, April 2011
Now, it’s personal.
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”
Targeting Your Audience Review
Worksheet Time!
Crafting Content
Content Delivery is Secondary to Tangible Utility
Make sure your content is useful, damn it!
Content Delivery Tangible Utility
Which is better?
or
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 SilosDon’t follow org charts when developing mobile solutions.
mobile first
“Mobile devices require software development teams to focus on only the most important data and actions in an application.
Mobile First
- Luke Wroblewski @lukew
Crafting Content ReviewBe able to answer, “What value will the
targeted audiences get from this content?”
Worksheet Time!
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...
native apps
standalonemobile sites
mobile templates
responsive designs
APIs
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
Give your existing content a chance to adapt to the future.
standalonemobile sites
mobiletemplates
responsivedesigns
Mobile Web-Optimized Solutions
responsivedesign
Mobile Web-Optimized Solutions
responsive web design...
One...
URL.
Why Be Responsive
One...
Set of Mark-up.
Why Be Responsive
One...
Deployment.
Why Be Responsive
futurefriend.ly
http://flic.kr/p/8x6b8X
“Not so fast, my friends...”
Media...
Images & Video
RWD Challenges
3rd Party Content...Ads & Social Widgets
RWD Challenges
One Set of Mark-up...Double-edged Sword
RWD Challenges
Kurogo
Learned the Hard Way: happyholidays.wvu.edu
RWD Challenges
Is “display: none” the Dark Matter of RWD?http://flic.kr/p/8BPQ2q
Mobile Web-Optimized Solutions
Mobile Templates deliver optimized layouts based on browser classes.
Requires server-side technology.
Must keep classification up-to-date with newest & latest browsers.
mobiletemplates
Mobile Web-Optimized Solutions
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.
standalonemobile sites
Common Thread... Browser Detection
http://flic.kr/p/capQiq
The common thread is browser-detection.
WURFL
DeviceAtlasOpenDDR
51Degrees.mobi
Lots of Solutions
https://github.com/tobie/ua-parser/
My fav is ua-parser:*github.com/tobie/ua-parser
* - I help maintain the project ;)
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/
Used Quite a Bit
Kurogo
Kurogo Mobile Framework: kurogo.org
Kurogo
UCLA Mobile Web Framework: mwf.ucla.edu
Kurogo
Molly Project at Uni. of Oxford: mollyproject.org
24-7 access, two way
Building New Content Silos?
image of a path for showing RESS as a way forward
A New Path?
http://flic.kr/p/7cGN8g
Mobile Web-Optimized Solutions
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.
RESS
“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
developers and designers
RWD + Browser Detection?
http://flic.kr/p/7Ma9n
DES
KTO
P W
EBM
-AD
VAN
CED
ress.dmolsen.com
MO
BILE BA
SIC
Kurogo
Server-side Feature-Detection for PHP: detector.dmolsen.com
Infancy
RESS is in its Infancy...
http://flic.kr/p/7B7uyp
ND data
http://weedygarden.net/2012/05/a-case-for-ress/
U. of Notre Dame Example
ND data
http://weedygarden.net/2012/05/a-case-for-ress/
Large Screen: 136 requests @ 2.7MB
Small Screen: 23 requests @ 291K
Kurogo
Which One: RWD, Device Exp., or RESS: lukew.com/ff/entry.asp?1509
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
A poor representation of the ideal platform pyramid...
def. APIsstands 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.
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.
Content Challenges
“ - Jon Arnes Sæterås @jonarnes
http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
API highway slide
Recombinable Content
structured & self-aware content
Structured & Self-Aware Content
Kurogo
Future-Ready Content: alistapart.com/articles/future-ready-content
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.”
Content Challenges
“ - Sara Wachter-Boettcher @sara_ann_marie
http://www.alistapart.com/articles/future-ready-content/
Kurogo
Creating and Planning Content for RWD: t.co/MaxGY7Fc
PRT APIUpdate once. Publishes to: iOS App, Mobile Website, Student Portal, Transportation Website, & Twitter
Quarry
Our next step: Quarry
http://flic.kr/p/6iVN8S
Kurogo
Data Portals Are Coming: data.gov
The Age of the Sensor
A poor representation of the ideal platform pyramid...
APIs
Mobile Web
Native Apps
Mobile TemplatesStandalone sites
Responsive Designs
Native apps will be driven by vendors.
http://flic.kr/p/5SikYe
Native apps should be transformative.
http://flic.kr/p/zBdU7
Kurogo
Branding & Centralization of Apps?
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
How Users Discover Content
#1
http://flic.kr/p/3CaBwQ
stat about browser usage
Not every mobile device will have your app on it but every mobile 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
TheJust 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.
How We Already Communicate#2
stat about browser usage
Links don’t open apps. - Jason Grigsby @grigs“
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
+ searchmobile web first
Text
70% of prospective students are happy to browse your 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!
Text
Future Friendly Tenet
Help others do the same.#3
It’s a Starting Point
Web-based Testingbrowserstack.com
Mobile Emulatorsmobilexweb.com/emulators
http://flic.kr/p/7972f6
Get Your Hands on Real Devices
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
Text
http://flic.kr/p/57nxHB
Cellphone Store Leftovers
eBay Has Everythingebay.com/electronics/cell-phone-pda
MobileKarma Makes it Easymobilekarma.com
$438
iPod Touch + Samsung Fascinate
+ HTC Thunderbolt
WVU’s Device Lab
Adobe Shadow
Latency is the Mobile Performance Bottleneck
Throttle Simulates Cell Networksgithub.com/dmolsen/Throttle
#1Identify the audience.
#2 Identify the content for that audience.
#3Implement platform solutions.
#4Lather, rinse, & repeat.
Audience
On-campus
Admits
Prospects
Alumni
Audience Content
On-campus
Admits
Prospects
Alumni
Contact Info
Map
Emergency
Calendar
Audience Content Platform
On-campus
Admits
Prospects
Alumni
Contact Info
Map
Emergency
Calendar
Mobile Portal
ResponsiveDesign
Native Apps
Focus on your targeted audiences & content.
http://flic.kr/p/8Ti584
The evolution of web development continues...
The
of Web Development Continues
http://flic.kr/p/3Q4To4
ResourcesResources
futurefriend.ly
Twitter & Stuff
mobilewebbestpractices.com
On Twitter @dmolsen...
Or at dmolsen.com...
Many thanks to Mr. Robertsonfor the snazzy device &
progressive strategy graphics