by Doug GapinskiPostdesktop

Please share.

#psuweb12 #postdesktop @thedougco

clients.mstoner.com/postdesktop

Doug Gapinski mStoner.com@thedougco

Postdesktop:A look at how ubiquitous computing is changing the world and education

Purpose:To view responsive design and mobile techology in a larger context of computing, the web, and the world.

70s 80s

90s 00s

I. Three point four mainframes to every newbornII. Device-iveness

III. Postclassroom, postcampusIV. Steal these ideas

Everything in here should be shared.Part 1

3.4 mainframes to every newborn:an introduction to pervasive computing

Pervasive computing is the idea of seamless human-computer interaction, where information processing is thoroughly integrated into human life.

Source: @erunyonnd.edu

Google glass source: Google

Tesco virtual supermarket source: designboom

frvnt.com

aws.amazon.com/mturk

Source: @nickdenardis

Wayne State mobile vs. desktop traffic trajectory

Properties• small, inexpensive, interconnected

devices• interaction with computer is intuitive

• computer provides human with enhanced capability

Related topics• the Internet of Things

• context-aware systems• augmented reality

• mobile learning

How did we get here?

1954IBM 6150 Mainframe$200,000 to $400,000

1975IBM 5100 “Portable Computer”

~$17,000

1981IBM 5150 Personal Computer

$1,595

1981Dulmont Magnum

$8,150

1983HP 150$2795

1993Mosaic

First official GUI Browser

1981TCP / IP introduced

Tablets

1968Alan Kay’s Dynabook Concept

1989Samsung’s GridPad

1993IBM Simon

$899

1996Nokia 9000

$899

Touchscreens, mobile, GUI, wireless... in less than 60 years.

These ideas are old. It just took a while to hit the mainstream.

—and—

2007first iPhone

Human needs have driven this change in five ways:

PortabilityConnectivity

InterfaceCost

Capability

Forces of change in computing

1954 2012Portability mainframe; not portable smartphones and tablets

Connectivity limited packet switching between two computers wireless access

Interface punchcards touchscreen

Cost $200,000 to $400,000 $200

The most powerful force of change is capability.

source: istockphoto.com

1954 2012Capability math entertainment

educationshopping

prayercommunication

informationwayfinding

sharinginvestigation

travelrecordingobserving

financial management... and math

Forces of change in computing

Mobile and tablet traffic will outpace desktop traffic. by 2015 or sooner

Source: IDC

Access in developing nations:half of India’s homes have cellphones but not toilets.

as of March 14, 2012

Source: thehindu.com

Access in developing nations:38% of China’s internet population is mobile only.

Source: thenextweb.com

as of January 2012

Community colleges (Waubonsee) and commuter colleges (NSC)

report growth of mobile-only contingents.

In .edu:

Source: anecdotal from clients

29% of households in the U.S. own a tablet or e-reader.

Source: MSNBC and Pew Internet

30 days before and after Christmas 2011

+440% increase in traffic to Google ads from tablets.from November 2010 to December 2011

Source: Google mobile ads

Pervasive computing isn’t as simple as mobile or tablets replacing the desktop.

Audi in-car mobile computer source: readwriteweb

Xfinity home security tablet source: comcast

NEST learning thermometer source: NEST

We’re headed toward a future where the web is connected seamlessly in affordable,

ordinary devices.

562,000 iOs are sold every day,and 700,000 android devices.

Source: @lukew and thenextweb.com

as of January 2012

Source: @lukew and thenextweb.com

(562,000 iOs devices + 700,000 android devices) sold per day / 371,000 newborns born per day

3.4 mainframes to every newborn

Would they have believed it?

With this much change in less than 60 years,what does the future look like for us?

Three sites for everyone

The web is changing!thenextweb.com

Mobile is changing!lukew.com

Our work is changing!alistapart.com

Everything in here should be shared.Part 2

Device-iveness: responding to a Device-ive future

Responsive design meets the reality of peopleaccessing the web from increasingly different devices.

Responsive design is an approach to design and development that ensures a site displays optimally

on a variety of devices, including mobile.

A high-level definition

UCSD.edu

UC HastingsWebster University

Miami UniversityWhittier College

Spring Arbor University

mStoner projects

Client educationPlanning (wireframes / prototypes)

Design (flexible elements)Development (conditionals / touch interface)

Testing (more devices)User testing (we haven’t figured this one out yet)

How responsive is changing our work

The whole team is involved

Hotgloo.com

1. Responsive prototyping for Miami University2. Adding notes so that the wireframe is the beginning of functional specs3. Our developers now edit the wireframes directly

Hotgloo allows for annotations that can be the beginning of your functional specs document.

i.e. how page elements will be set up in development

Responsive prototyping for Webster University

+

Pay attention to how the outliers organize

Utility: custom mobile tools

Investigative links point to responsive pages

www.usc.edu/?view=m

bu.edu does not follow a universal model as you dig in

nd.edu offers a primary navigation that only has 4 categories

Pay attention to how the outliers organize

For responsive, look outside of higher education.

More free advice

Pay attention to e-commerce

amazon.com

Responsive examples and design resources

mediaqueri.esstraightforward

responsive gallery

dribbble.comsearch responsive

or mobile

awwwards.comseveral different

responsive resources

Part 3

Postclassroom, postcampus

What does pervasive computingmean to education?

The knowledge capital is becoming completelyunhinged from the physical location.

• online delivery• satellite locations

• global research centers• open courseware

• startup universities

Heralds of change

luonline.com

riosalado.edu

phoenix.edu

Global research branches

Open courses

• Audio and video• Presentations / lectures• Documents• PDFs• iBooks textbooks for iPad• ePub books• iOS apps• Web links

Itunes U

oyc.yale.edu

Source: the Chronicle

The startup university

• launches in 2014 • attempting to compete with Ivy

Leagues• only looks at academic qualifications

of students, not extracurricular or legacies

• all online courses deployed online featuring top faculty

• 25 students per online course to create selectivity and reasonable class sizes

• tuition of less than $20,000• urban housing in major cities, students

encouraged to switch cities

source: CNN.com

Where might we be headed?

Is TED.com the new Harvard?

Anya Kamenetz@anya1anya

source: fastcompany

• top prestige education brand

• very best minds from all disciplines

• specialized / customized experience

• tools for sharing and dialogue

• premium eventsfor networking

source: fastcompany

Part 4

Steal these ideas: postdesktop marketing and utility for education

Look for geolocation opportunities.

scvngr.com/university

Look for ways to enhance or evolve storytelling.

storify.com

Look for ways of letting your audiences tell the story.

mxschool.edu

Apps for learning: the IT departmentas a concept-to-market agency

itap.purdue.edu/studio

Every web trend that comes along is a chance to reinvent yourself as a professional.

Remember

EDUniverse.org

Shameless plug

Doug Gapinski@thedougcoQuestions?

clients.mstoner.com/postdesktop

The skull and roses image is a momento mori (symbol of our

impermanence) from the Rubiyaat of Omar Khayyam.

(1048–1131) translated by the poet Edward Fitzgerald and

later appropriated by the Grateful Dead.

Many Grateful Dead songs deal with topics of loss and hard luck, but the music is

stylized to convey happiness and lightness of heart.

The celebratory roses that frame the skeleton provide

a counterweight to the reminder of death. In the

face of radical change and difficulty, we can still

feel good.

Epilogue

رباعیات عمر خیام