An Event Apart: The Map & The Territory

In his The Map & The Territory presentation at An Event Apart in Chicago 2013, Ethan Marcotte (inspirationskälla) 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: The Map & The Territory

Ethan Marcotte with The map & The Territory

  • In 1807, New York’s population was clustered in the bottom part of the island. John Randal 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. 2 out of every 5 buildings in New York were mapped. 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. We carried over existing ideas about design and processes from our knowledge of print.
  • The control we had over the Web was an illusion. People access our content wherever and whenever they want. Think beyond desktop.
  • Device fragmentation is the new status quo
  • The three main ingredients of a responsive design: fluid grid, flexible images, and media queries.
  • Responsive design is an attempt to embrace the fluidity of the Web and design across device boundaries.
  • Moving beyond the desktop into multi-device experiences.
  • We’re drawing a new map with new sites that are both responsive and device specific. But this map is far from complete.

Responsive application

  • Editorially is a completely responsive application for collaborative writing.
  • Fluid grid: target/context = result. Starting from a pixel based layout you can determine the percentages you need to create a flexible design.
  • Every point in a design allows you to consider whether you want to make major or minor shifts in a design using media query breakpoints. This is a cascading waterfall effect.
  • We are no longer designing pages but small layout systems
  • Sometimes it is helpful to step back from the page and instead focus on a system of layout components.
  • Small screen interfaces force you to simplify elements like navigation menus.
  • When you move to larger screens, you can reposition elements and even pull some elements out from a menu into the mani navigation. Absolute positioning allows you to do this.
  • Try to separate priority and layout.
  • Use breakpoints to protect your content!
  • As we are drawing new maps for Web design, we are no longer constrained by the printed page.
  • Our Responsive 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.
  • Some sites are very beautiful designs but very large in terms of file size. (3MB 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.
  • In 2009, the average size of a Web site was 320kb. Today in 2013, it is 1.4MB. In just over two years, we’ve tripled in size.
  • Moore’s law has not kept up with bandwidth.
  • The Apple Mac Pro website is 33.4MB -its not responsive.
  • The map is not the territory. It can’t capture all the detail of the complexity of what’s around us.
  • We think mobile devices are always on, always connected, and uniquely yours.
  • 15.4M people live in 134 square miles in Daka. 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.
  • 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?
  • This year, the number of mobile Internet users in the developing world will overtake those in the developed world for the first time — growing 27 times since 2007.
  • The new normal: Are we prepared for the new face of the Web? For low powered devices and poor access.
  • Randal’s map of New York was attempting to define a new territory by drawing a map. To solve the problem.
  • Maps are traditionally use to represent existing territory. Randal was making a map of what something could be.
  • We need to move toward a sustainable model for Web design through reduction and revisit.
  • Reduce-Revisit: Page load time may be as important as accessibility
  • By keeping sites light and accessible we can reach new audiences we may have kept out previously.
  • A performance budget can help you manage the size of your pages.
  • We need a new definition of beautiful for the Web: one marked by greater access.
  • Our pages should weigh no more than 300kb.“Our pages should take no more than three seconds to load over an EDGE / GPRS connection.

Rolling up the map

  • We should embrace the fact that the web doesn’t have the same constraints [as the printed page], and design for this flexibility. But first, we must “accept the ebb and flow of things.
  • 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.
  • Let’s outline a new map that optimizes for each across many people no matter what part of the territory they reside in.
  • A new definition of beautiful: What works is better than what looks good. The ‘looks good’ can change, but what works, works.” – Ray Eames

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *