In his The Map Is Not The Territory presentation at An Event Apart Seattle WA 2013, 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:
- Maps capture our understanding of a space. They make us aware of our surroundings.
- Charles Darwin published his book about the origin of species that flew in the face of established theology. Evolution was beginning to define the human condition and many people were trying to make sense of this new reality.
- For example, William Warren decided to rationalize evolution and theology by finding the physical location of the Garden of Eden. He tried to chart out this territory to make sense of the changing world around him.
- We’ve done the same thing online.
The Map
- We’ve been focused on a relatively small portion of the Web: a few desktops & laptops. We carried over existing ideas (canvas, composition, typography) about design and processes from our knowledge of print.
- Mobile reminded us that the control we had over the Web was an illusion. We’re now keenly aware people want to access our content wherever and whenever they want.
- 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.
- The movement beyond the desktop is continuing into multi-device experiences. Mobile is driving this new reality forward.
- We’re drawing a new map and marking it with new sites both responsive and device specific. But this map is far from complete.
- A rhetorical divide: you could paint as complete a picture as possible to describe something to others but language will never bridge the gap. The map is not the territory, it is an abstraction of a place.
- Many of our discussions about the state of the Web are focused on the map not the territory.
The Territory
- 75% of the world’s urbanites (by 2050) will be in currently developing nations.
- 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.
- A number of unique mobile services in Africa are all designed for reach.
- 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?
- Randal developed a new map for New York. 2 out of every 5 buildings in New York were “mapped over”. This system was designed for use to create regularity. His was a system that became beautiful through use.
- Randal’s map was attempting to define a new territory: what could a territory be or should be.
Toward a New Map
- In 2009, the average size of a Web site was 320kb. Today in 2012, it is 1.1MB. In just over two years, we’ve tripled in size. Moore’s law has not kept up with bandwidth.
- 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.
- GSM and EDGE remain the dominant way people access the Web. This new reality is good for design.
- When Youtube redesigned their player page to be 98KB vs. 1MB, they found the average load time went up. They had accessed markets they couldn’t reach before due to their high load times.
- Try to privilege the smallest screen. Start thinking about the mobile experience first. What is the priority, first and foremost? Use mobile to force a prioritization of content.
- Responsive design isn’t just about layout. Try to plan for different input types.
- Treat all devices as touch by default, then if you determine touch is not available treat the availability of the mouse as an enhancement.
- Establish a baseline experience and enhance up as you go. A simple test for “cutting the mustard” allows you to provide an experience to everyone without sacrificing experience for more capable devices.
- We need a new definition of beautiful for the Web: one marked by greater access.
- Many solutions that cater to retina displays do so without any awareness of network connections and/or data plans.
- We’re still too seduced by perfect layout & designs. We forget how fragile the delivery of those elements can be.
- Choose the least powerful computer language suitable for a given purpose. The more complex the interface, the less portable it is.
- There are plenty of smaller Javascript libraries that can handle a lot of the work we previously relied on JQuery for.
- Our work for the Web is lossy. When we design for the Web, we need to embrace the fragility of the Web.
- In any wireless network, there will be seams: places where the network is not there. when you surface these seams to users, they can become be used as features -not as bugs.
- Picture fill invites the user into the design and allows them to decide if they want to see a high resolution image.
- With all the complexity we manage, it can sometimes be freeing to admit what we don’t know and invite our users into our solutions.
- The most appropriate solutions to our problems may lie with people on the other side of the screen.
- Let’s outline a new map that optimizes for each across many people no matter what part of the territory they reside in.