Responsive design, application development using APIs, and content strategy are hot topics in web development right now. These ideas belong to a bigger umbrella: ubiquitous computing and the role it plays in our lives. Traditional ideas of usability are undergoing dynamic changes as we move away from a desktop-first model of personal computing. The internet refrigerator already exists and it's only the tip of the iceberg. In the near future, human-computer interactions will be thoroughly integrated into everyday objects and activities. Postdesktop was a presentation to add clarity to responsive design as part of a larger context and to think about a shift that is changing the devices we use to access the web, the delivery method for education, the teaching and learning experience, and the whole of our lives. Topics included a look at the role of pervasive computing: • as it relates to responsive design • in the classroom and textbooks • in .edu marketing and utility on campuses Written by Doug Gapinski and first delivered at PSU Web Conference 2012

1. by
Postdesktop Doug Gapinski

2. Please share.
#psuweb12 #postdesktop @thedougco
clients.mstoner.com/postdesktop

3. Doug Gapinski
mStoner.com
@thedougco

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

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

6. 70s 80s
90s 00s

7. I. Three point four mainframes to every newborn
II. Device-iveness
III. Postclassroom, postcampus
IV. Steal these ideas

8. Part 1
3.4 mainframeshere should be shared.
Everything in to every newborn:
an introduction to pervasive computing

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

10. nd.edu Source: @erunyon

11. Google glass source: Google

12. Tesco virtual supermarket source: designboom

13. frvnt.com

14. aws.amazon.com/mturk

15. Wayne State mobile vs. desktop traffic trajectory
Source: @nickdenardis

16. Properties Related topics
• small, inexpensive, interconnected • the Internet of Things
devices • context-aware systems
• interaction with computer is intuitive • augmented reality
• computer provides human with enhanced • mobile learning
capability

17. How did we get here?

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

19. 1975
IBM 5100 “Portable Computer”
~$17,000

20. 1981
IBM 5150 Personal Computer
$1,595

21. 1981
Dulmont Magnum
$8,150

22. 1983
HP 150
$2795

23. 1981
TCP / IP introduced
1993
Mosaic
First official GUI
Browser

24. Tablets
1968 1989
Alan Kay’s Dynabook Concept Samsung’s GridPad

25. 1993
IBM Simon
$899

26. 1996
Nokia 9000
$899

27. Touchscreens, mobile, GUI, wireless...
in less than 60 years.
—and—
These ideas are old. It just took
a while to hit the mainstream.

28. 2007
first iPhone

29. Human needs have driven this change in five ways:
Portability
Connectivity
Interface
Cost
Capability

30. Forces of change in computing
1954 2012
Portability mainframe; not portable smartphones and tablets
limited packet switching
Connectivity between two computers
wireless access
Interface punchcards touchscreen
Cost $200,000 to $400,000 $200

31. The most powerful force of change is capability.
source: istockphoto.com

32. Forces of change in computing
1954 2012
Capability math entertainment
education
shopping
prayer
communication
information
wayfinding
sharing
investigation
travel
recording
observing
financial management
... and math

33. Mobile and tablet traffic will outpace desktop traffic.
by 2015 or sooner
Source: IDC

34. Access in developing nations:
half of India’s homes have cellphones but not toilets.
as of March 14, 2012
Source: thehindu.com

35. Access in developing nations:
38% of China’s internet population is mobile only.
as of January 2012
Source: thenextweb.com

36. In .edu:
Community colleges (Waubonsee)
and commuter colleges (NSC)
report growth of mobile-only contingents.
Source: anecdotal from clients

37. 29% of households in the U.S. own a tablet or e-reader.
30 days before and after Christmas 2011
Source: MSNBC and Pew Internet

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

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

40. Audi in-car mobile computer source: readwriteweb

41. Xfinity home security tablet source: comcast

42. NEST learning thermometer source: NEST

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

45. 562,000 iOs are sold every day,
and 700,000 android devices.
as of January 2012
Source: @lukew and thenextweb.com

46. (562,000 iOs devices + 700,000
android devices) sold per day
/ 371,000 newborns born per day
3.4 mainframes to every newborn
Source: @lukew and thenextweb.com

47. Would they have believed it?

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

49. Three sites for everyone
The web is changing! Our work is changing! Mobile is changing!
thenextweb.com alistapart.com lukew.com

50. Part 2
Everything in here should be shared.
Device-iveness: responding to a Device-ive future

51. Responsive design meets the reality of people
accessing the web from increasingly different devices.

52. UCSD.edu
A high-level definition
Responsive design is an approach to design and
development that ensures a site displays optimally
on a variety of devices, including mobile.

53. mStoner projects
UC Hastings
Webster University
Miami University
Whittier College
Spring Arbor University

54. How responsive is changing our work
Client education
Planning (wireframes / prototypes)
Design (flexible elements)
Development (conditionals / touch interface)
Testing (more devices)
User testing (we haven’t figured this one out yet)
The whole team is involved

55. Hotgloo.com
1. Responsive prototyping for Miami University
2. Adding notes so that the wireframe is the beginning of functional specs
3. Our developers now edit the wireframes directly

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

57. Responsive prototyping for Webster University

58. +

59. Pay attention to how the outliers organize
Utility: custom mobile tools
Investigative links point
to responsive pages
www.usc.edu/?view=m

60. Pay attention to how the outliers organize
bu.edu does not follow a nd.edu offers a primary navigation
universal model as you dig in that only has 4 categories

61. More free advice
For responsive, look outside of higher education.

62. Pay attention to e-commerce
amazon.com

63. Responsive examples and design resources
mediaqueri.es awwwards.com dribbble.com
straightforward several different search responsive
responsive gallery responsive resources or mobile

64. Part 3
Postclassroom, postcampus

65. What does pervasive computing
mean to education?

66. The knowledge capital is becoming completely
unhinged from the physical location.

67. Heralds of change
• online delivery
• satellite locations
• global research centers
• open courseware
• startup universities

68. luonline.com

69. riosalado.edu

70. phoenix.edu

71. Global research branches

73. Open courses

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

75. oyc.yale.edu

76. Source: the Chronicle

77. The startup university

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

79. Where might we be headed?

80. Is TED.com the
new Harvard?
Anya Kamenetz
@anya1anya
source:
fastcompany

81. • top prestige
education brand
• very best minds
from all disciplines
• specialized /
customized
experience
• tools for sharing
and dialogue
• premium events
for networking
source:
fastcompany

82. Part 4
Steal these ideas:
postdesktop marketing and utility for education

83. Look for geolocation opportunities.

84. scvngr.com/university

85. Look for ways to enhance or evolve storytelling.

86. storify.com

87. Look for ways of letting your audiences tell the story.

88. mxschool.edu

89. Apps for learning: the IT department
as a concept-to-market agency

90. itap.purdue.edu/studio

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

92. Shameless plug
EDUniverse.org

93. Doug Gapinski
Questions?
@thedougco
clients.mstoner.com/postdesktop

94. Epilogue
Many Grateful Dead songs
The skull and roses image is
deal with topics of loss and
a momento mori (symbol of our
hard luck, but the music is
impermanence) from the
stylized to convey happiness
Rubiyaat of Omar Khayyam.
and lightness of heart.
(1048–1131) translated by the
poet Edward Fitzgerald and
The celebratory roses that
later appropriated by the
frame the skeleton provide
Grateful Dead.
a counterweight to the
reminder of death. In the
‫ر)"'#"ت '&% $#"م‬ face of radical change and
difficulty, we can still
feel good.