Webstock: The Map & The Territory

by February 10, 2016

In his The Map & The Territory presentation at Webstock 2016 in Wellington New Zealand, Ethan Marcotte shared his thoughts about the changing definition of the Web and his philosophy for making broadly accessible experiences. Here's my notes from his talk:

  • In 1807, New York's population was clustered in the bottom part of the island where rivers, over crowding, and disease ran rampant. Civic planning was needed. John Randel Jr. was assigned to re-plan the streets. He created a structured plan that defined New York's famous street plan today.
  • Randal developed a new map for New York. This system was designed for use to create regularity. Randal’s map was attempting to define a new territory: what could a territory be or should be.
  • Maps capture our understanding of a space. They make us aware of our surroundings and make things feel a little less foreign.
  • We’ve been focused on a relatively small portion of the Web: a few desktops & laptops. Five years ago, our view of the Web was much more limited. We were overly concerned about a few fixed width views of our layouts.
  • The three main ingredients of a responsive design: fluid grid, flexible images, and media queries. This is an attempt to embrace the fluidity of the Web and design across device boundaries. This simple recipe has blossomed into lots of amazing examples.
  • Notable examples include: An Event Apart, Currys, Expedia, Coop, Disney, Time, The Guardian, BBC News, and more.
  • We’re drawing a new map and marking it with new sites both responsive and device specific. But this map is far from complete.

Toward a New Map

  • Many sites have been having success with responsive design. The Boston Globe and several e-commerce sites have published statistics about the positive impact responsive redesigns have had.
  • The Tehan-Lax and Oakley Moto sites (originally launched at 84MB) are very beautiful designs but very large in terms of file size from 6MB to 21MB.
  • Responsive design has often been criticized for being too heavy (not performant enough). But the truth is most Websites are much to heavy for today’s reality.
  • Internet.org designed to get people better access to the Web in developing markets weighed 4.3 MB. The Apple Mac Pro website is 33.4MB -its not responsive.
  • In 2009, the average size of a Web site was 320kb. Today in 2015, it is 2.2MB. Every two years, we’ve doubled in size. Moore’s law has not kept up with bandwidth.
  • The map is not the territory. It can't capture all the detail of the complexity of what's around us.
  • We may be doing the same for the Web. Our map of the Web is made through a vision of the Western world. We've mistaken the map for the territory.
  • We think mobile devices are always on, always connected, and uniquely yours. But this isn't true around the World.
  • 9.2M people live in 300 square kilometers in Dhaka, Bangladesh. There has been a 900% increase in mobile Internet access in these developing cities. The next wave of urbanization is helping in these areas.
  • More people in the world have mobile devices than access to toilets and latrines. In Africa, 60% have mobile devices (700M). That’s more than have access to clean water.
  • Mobile devices are shared across multiple people in many developing nations. This is slowly changing as smartphones get cheaper.
  • What’s happening in these developing areas is emblematic of what’s happening across the World. A large portion of the world is coming online now, on less capable devices and networks than we are used to. Are we ready for this new reality?
  • The Web doesn't evolve in one straight line. Is our work prepared for the new face of the Web? For low powered devices and poor access. Is this the new normal? Who does it change how we design & build for the Web?
  • Randal’s map of New York was attempting to define a new territory: what could a territory be or should be? He was trying to find a balance between emerging growth and entrenched interests.
  • Maps are traditionally use to represent existing territory. Randal was making a map of what something could be. To promote the health of the Web.
  • We need to move toward a sustainable model for Web design through reduction and reuse.
  • Sustainability: to reduce and revisit some older practices. A performance budget can help a team align on goals at the front of a project.
  • Progressive enhancement: The BBC uses a simple test for “cutting the mustard” allows you to provide an experience to everyone without sacrificing experience for more capable devices. The test switches a layout from a basic design to an enhanced one.
  • Let's accept the ebb and flow of things and the fact that we surrender control to our audiences. This isn't just about layout.
  • "What works is better than what looks good. What works is what works." -Ray Eames
  • Maybe we need a new definition of beautiful that covers the increasing reach of the Web and the new audiences coming online.
  • Let’s outline a new map that optimizes for reach across many people no matter what part of the territory they reside in.