Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. byPostdesktop Doug Gapinski
  2. 2. Please share.#psuweb12 #postdesktop @thedougco
  3. 3. Doug
  4. 4. Postdesktop:A look at how ubiquitous computingis changing the world and education
  5. 5. Purpose:To view responsive design and mobile techology in alarger context of computing, the web, and the world.
  6. 6. 70s 80s90s 00s
  7. 7. I. Three point four mainframes to every newborn II. Device-iveness III. Postclassroom, postcampus IV. Steal these ideas
  8. 8. Part 1 3.4 mainframeshere should be shared. Everything in to every newborn:an introduction to pervasive computing
  9. 9. Pervasive computing is theidea of seamless human-computer interaction,where informationprocessing is thoroughlyintegrated into human life.
  10. 10. Source: @erunyon
  11. 11. Google glass source: Google
  12. 12. Tesco virtual supermarket source: designboom
  13. 13.
  14. 14.
  15. 15. Wayne State mobile vs. desktop traffic trajectory Source: @nickdenardis
  16. 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. 17. How did we get here?
  18. 18. 1954IBM 6150 Mainframe$200,000 to $400,000
  19. 19. 1975IBM 5100 “Portable Computer” ~$17,000
  20. 20. 1981IBM 5150 Personal Computer $1,595
  21. 21. 1981Dulmont Magnum $8,150
  22. 22. 1983HP 150$2795
  23. 23. 1981TCP / IP introduced 1993 Mosaic First official GUI Browser
  24. 24. Tablets 1968 1989Alan Kay’s Dynabook Concept Samsung’s GridPad
  25. 25. 1993IBM Simon $899
  26. 26. 1996Nokia 9000 $899
  27. 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. 28. 2007first iPhone
  29. 29. Human needs have driven this change in five ways: Portability Connectivity Interface Cost Capability
  30. 30. Forces of change in computing 1954 2012 Portability mainframe; not portable smartphones and tablets limited packet switchingConnectivity between two computers wireless access Interface punchcards touchscreen Cost $200,000 to $400,000 $200
  31. 31. The most powerful force of change is capability. source:
  32. 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. 33. Mobile and tablet traffic will outpace desktop traffic. by 2015 or sooner Source: IDC
  34. 34. Access in developing nations:half of India’s homes have cellphones but not toilets. as of March 14, 2012 Source:
  35. 35. Access in developing nations:38% of China’s internet population is mobile only. as of January 2012 Source:
  36. 36. In .edu: Community colleges (Waubonsee) and commuter colleges (NSC)report growth of mobile-only contingents. Source: anecdotal from clients
  37. 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. 38. +440% increase in traffic to Google ads from tablets. from November 2010 to December 2011 Source: Google mobile ads
  39. 39. Pervasive computing isn’t as simple asmobile or tablets replacing the desktop.
  40. 40. Audi in-car mobile computer source: readwriteweb
  41. 41. Xfinity home security tablet source: comcast
  42. 42. NEST learning thermometer source: NEST
  43. 43. We’re headed toward a future where the web is connected seamlessly in affordable, ordinary devices.
  44. 44. 562,000 iOs are sold every day, and 700,000 android devices. as of January 2012Source: @lukew and
  45. 45. (562,000 iOs devices + 700,000android devices) sold per day/ 371,000 newborns born per day3.4 mainframes to every newbornSource: @lukew and
  46. 46. Would they have believed it?
  47. 47. With this much change in less than 60 years, what does the future look like for us?
  48. 48. Three sites for everyoneThe web is changing! Our work is changing! Mobile is changing!
  49. 49. Part 2 Everything in here should be shared.Device-iveness: responding to a Device-ive future
  50. 50. Responsive design meets the reality of peopleaccessing the web from increasingly different devices.
  51. 51. A high-level definition Responsive design is an approach to design anddevelopment that ensures a site displays optimally on a variety of devices, including mobile.
  52. 52. mStoner projects UC Hastings Webster University Miami University Whittier CollegeSpring Arbor University
  53. 53. 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
  54. 54. Hotgloo.com1. Responsive prototyping for Miami University2. Adding notes so that the wireframe is the beginning of functional specs3. Our developers now edit the wireframes directly
  55. 55. Hotgloo allows for annotations that can be thebeginning of your functional specs document. i.e. how page elements will be set up in development
  56. 56. Responsive prototyping for Webster University
  57. 57. +
  58. 58. Pay attention to how the outliers organize Utility: custom mobile tools Investigative links point to responsive
  59. 59. Pay attention to how the outliers does not follow a offers a primary navigationuniversal model as you dig in that only has 4 categories
  60. 60. More free adviceFor responsive, look outside of higher education.
  61. 61. Pay attention to
  62. 62. Responsive examples and design resources straightforward several different search responsiveresponsive gallery responsive resources or mobile
  63. 63. Part 3Postclassroom, postcampus
  64. 64. What does pervasive computing mean to education?
  65. 65. The knowledge capital is becoming completely unhinged from the physical location.
  66. 66. Heralds of change • online delivery • satellite locations• global research centers • open courseware • startup universities
  67. 67.
  68. 68.
  69. 69.
  70. 70. Global research branches
  71. 71. Open courses
  72. 72. Itunes U• Audio and video• Presentations / lectures• Documents• PDFs• iBooks textbooks for iPad• ePub books• iOS apps• Web links
  73. 73.
  74. 74. Source: the Chronicle
  75. 75. The startup university
  76. 76. • 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:
  77. 77. Where might we be headed?
  78. 78. Is the new Harvard?Anya Kamenetz @anya1anya source: fastcompany
  79. 79. • top prestigeeducation brand• very best mindsfrom all disciplines• specialized /customizedexperience• tools for sharingand dialogue• premium eventsfor networking source: fastcompany
  80. 80. Part 4 Steal these ideas:postdesktop marketing and utility for education
  81. 81. Look for geolocation opportunities.
  82. 82.
  83. 83. Look for ways to enhance or evolve storytelling.
  84. 84.
  85. 85. Look for ways of letting your audiences tell the story.
  86. 86.
  87. 87. Apps for learning: the IT department as a concept-to-market agency
  88. 88.
  89. 89. RememberEvery web trend that comes along is a chance to reinvent yourself as a professional.
  90. 90. Shameless
  91. 91. Doug GapinskiQuestions? @thedougco
  92. 92. Epilogue Many Grateful Dead songs The skull and roses image is deal with topics of loss anda 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.