In his The Map Is Not The Territory presentation at An Event Apart San Diego CA 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 and make things feel a little less foreign.
- 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.
- 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.
- We used a number of techniques to make react to an ever changing set of devices on the Web.
- 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.
Building A 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. Start from a baseline small screen experience and enhance as you go wider.
- 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. To do so, you may sort tasks into logical groupings. This information sort can apply to all screens.
- 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. In a baseline layout, use the HTML structure to reflect the importance and sequence of content and actions.
- Use breakpoints to protect your content.
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 are very beautiful designs but very large in terms of file size from 3MB to 85MB.
- 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.
- 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.
- We need to move toward a sustainable model for Web design through reduction and reuse.
- 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.
- 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.
- Grunticon is a tool that can take a folder of SVG images, create fallback PNGS, and write the CSS code you need to use the SVG images on your site.
- We need a new definition of beautiful for the Web: one marked by greater access.
- 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.
- Editorially does the same thing, checking for the capability of the device to determine if it should load a dynamic editor or not. Browsers that can't load the editor, still load the content so you can read (but not edit).
- Let's accept the ebb and flow of things and the fact that we surrender control to our audiences.
- Let’s outline a new map that optimizes for each across many people no matter what part of the territory they reside in.