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://ﬂic.kr/p/4tdahf

...3 years in
the making.

http://ﬂic.kr/p/5Nobj3

ask questions

Feel free to ask questions.
http://ﬂic.kr/p/93aPCq

Getting to Know You

http://ﬂic.kr/p/8MC5Ti

Introduce Yourselves

Let’s get this started! http://ﬂic.kr/p/u71uE

What We’ll Talk About

•Some Terminology
•Why Mobile
•Future-Friendly
•Developing a FF Strategy
•Tools & Resources
http://ﬂic.kr/p/86dxVE

Clearing Up Some Terminology

http://ﬂic.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
deﬁne for you?


So
why

http://ﬂic.kr/p/9WjR

A History Lesson

History Lesson

The Future
FriendlyWhy Campus
In the beginning...

We Had Print

Strong Layout Constraints

deﬁned container

We Had Print


Content & Layout Are
deﬁned Tightly Coupled
container

We Had Print


Content & Layout Are
deﬁned Tightly Coupled
container

Primarily “Talk At”

Social Media suffers “Broadcast Legacy”
connect.wvu.edu

Kurogo

Think about how you can
break out of this model.


The Future
FriendlyWhy times...
Campus
In more recent

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


Content Silos


The Future
FriendlyWhy Day
Campus
The Present

Mobile


Mobile

Highly Constrained Layouts

Mobile


Rapidly Evolving Ecosystem

Mobile


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!


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?


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://ﬂic.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?


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?


We’re entering...
The Hyper-Connected
Society

So what does
it all mean?

http://ﬂic.kr/p/g116c

Building New Content Silos?


Learning New Skills?


WVU’s Solutions

standalone responsive designs
mobile sites
native apps mobile templates

APIs

The Future
And then there’s...
FriendlyWhy Campus
The Near Future

You’re Not Alone

You’re Not Alone in Thinking That

http://ﬂic.kr/p/7agpKx

The What
What

of Future Friendly

Twitter Handles

@brad_frost @scottjenson
@adactio @scottjehl
@grigs @lukew
@bryanrieger @lyzadanger
@stephanierieger @globalmoxie

https://twitter.com/dmolsen/fﬂy

What
The Truths
What

aka “Our Reality”

The Truths

Disruption will only
Text
accelerate.

The Truths

Our existing standards,
Text
workﬂows, & infrastructure
won’t hold up.

The Truths

ProprietaryText
solutions will
dominate at ﬁrst.

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.

Tech Isn’t Always Best

technology doesn’t solve all ills (pencil photo)

Why not?

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


Think & Text
behave in a
#2
future-friendly way.

Future-Friendly
Strategy

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://ﬂic.kr/p/5rTyAh

Three Environments for
Developing Your Strategy

3 approaches for developing a strategy

http://ﬂic.kr/p/7jqeyj

Formal & Centralized

Formal & Centralized

http://ﬂic.kr/p/9odzFK

Informal but Centralized

Informal but Centralized
http://ﬂic.kr/p/9PDBBY

Guerrilla &
Distributed

Guerrilla & Distributed

Yes, I know this is a picture of a gorilla. http://ﬂic.kr/p/8UCuqy

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?


WVU University Relations - Web
web.ur.wvu.edu

Advisor No Policy

Advisor Photo

We Advise No Policy
http://ﬂic.kr/p/57Bkm5

WVU’s Mobile Presence

Aug. 2009
iWVU & m.wvu.edu

m.wvu.edu Trafﬁc by Semester

11000

650%+
increase
8250 in avg.
trafﬁc

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


Aug. 2010
wvutoday.wvu.edu


Mar. 2011
tournaments.wvu.edu


Apr. 2011
studentaffairs.wvu.edu

these are just some of our projects...

mobile sites

APIs

How many of you...
have an informal process?


Prioritize

http://ﬂic.kr/p/P22Ry

Iterate
http://ﬂic.kr/p/aaBZ1

Be Platform Neutral

Being Platform Neutral
fo rm
lat
P

http://ﬂic.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://ﬂic.kr/p/6G32c

Choosing a Platform
http://ﬂic.kr/p/7V85wM

Progressive Mobile Strategy
(in graphic form)

Targeting Your Audience

http://ﬂic.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

Repetitive Now

Other examples?



Repetitive Now

Bored Now


Repetitive Now

Bored Now

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 Gratiﬁcation
88% of smartphone users took action
on a search result within a day


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://ﬂic.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://ﬂic.kr/p/4dtHWb

Targeting Your Audience Review


Those with Urgent Needs


Local Constituencies


Short Timeframes


Short Timeframes
Don’t Focus on “On the Go”

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/

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 ﬁrst

“
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?”

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

mobile sites

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


responsive
design

Why Be Responsive

One...
URL.

Why Be Responsive

One...
Set of Mark-up.

Why Be Responsive

One...
Deployment.

Time to Party...

balloons

http://ﬂic.kr/p/h6McT

“Not so fast, my friends...”

http://ﬂic.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://ﬂic.kr/p/8BPQ2q

mobile
templates

Mobile Templates deliver
optimized layouts based on
browser classes.

Requires server-side technology.

Must keep classiﬁcation up-to-date
with newest & latest browsers.

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://ﬂic.kr/p/capQiq

Been Around a While

Old dog

http://ﬂic.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

Arms Race?

http://ﬂic.kr/p/6RVLY2

A New Path?

image of a path for showing RESS as a way forward

http://ﬂic.kr/p/7cGN8g


RESS
Responsive Web Design with
Server Side Components
(RESS) is a hybrid of RWD &
Mobile Templates.

Flexible layout of RWD but ﬁnely
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 deﬁne an
entire Web site for all devices but key
components within that site have
device-class speciﬁc implementations
that are rendered server side.
- Luke Wroblewski
@lukew

http://www.lukew.com/ff/entry.asp?1392

RWD + Browser Detection?

developers and designers

http://ﬂic.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://ﬂic.kr/p/7B7uyp

Untested

...and untested.
http://ﬂic.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?


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://ﬂic.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 ﬂow 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://ﬂic.kr/p/6iVN8S

Data Portals Are Coming:
data.gov

Kurogo

Questions about
APIs?


Native apps will be driven by vendors.

http://ﬂic.kr/p/5SikYe

Native apps
should be transformative.

http://ﬂic.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?


Making the case for mobile web ﬁrst.

Two Possible Solutions

Things to
Consider
http://ﬂic.kr/p/9jatna

Discovery

#1How Users
Discover Content http://ﬂic.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.


the just in time internet

The
Just In Time
Internet

The less often someone needs to ﬁnd
information on a topic the more likely it
is that someone will use the web on the
device to ﬁnd 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

links
+ skills
+ search
mobile web ﬁrst

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?



Text
#3 Help others do the same.

Testing the
Future

http://ﬂic.kr/p/cfkTiC

Web-based Testing
browserstack.com

Mobile Emulators
mobilexweb.com/emulators

Get Your
Hands on
Real Devices http://ﬂic.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://ﬂic.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

Latency is the Mobile
Performance Bottleneck

Throttle Simulates Cell Networks
github.com/dmolsen/Throttle

Wrapping
it all up...

http://ﬂic.kr/p/4fwjAq

#2
Identify the content for that audience.

#3
Implement platform solutions.

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://ﬂic.kr/p/4zDk7q

Focus on your targeted
audiences & content.

http://ﬂic.kr/p/8Ti584

The

The evolution of web development continues...

of Web
Development
Continues
http://ﬂic.kr/p/3Q4To4

mobilewebbestpractices.com

Twitter & Stuff

Many thanks to Mr. Robertson
for the snazzy device &
progressive strategy graphics

The End

http://ﬂic.kr/p/9Hac2V

The Future Friendly Campus (Workshop Edition)

More Related Content

Viewers also liked

Similar to The Future Friendly Campus (Workshop Edition)

More from Dave Olsen

Recently uploaded

The Future Friendly Campus (Workshop Edition)