In his The Map Is Not The Territory presentation at An Event Apart Chicago IL 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:
- 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. 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.
- 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 (canvas, composition, typography) about design and processes from our knowledge of print.
- 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.
- 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. Some of techniques are device specific and some are device agnostic.
- 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.
- 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. You don't need to round these numbers up or down, just use the full percentage.
- Nth child allows you to target specific elements on a page or a set of specific elements. Internet Explorer can use conditional comments to tackle these adjustments.
- The flexible grid and fluid media are just the foundation.
- 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.
- You'll see some stress points in the design. These fracture points are places to insert a media query.
- Base your media queries on where a design breaks down. Where do line lengths get un-natural short of long to read. These are problem areas and you're using breakpoints to correct these issues.
- Sometimes it is helpful to step back from the page and instead focus on a system of layout components. These elements are systems of smaller 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.
- A pattern driven approach can help you tune your designs to devices beyond the desktop.
- 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.
- As we are drawing new maps for Web design, we are no longer constrained by the printed page.
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.
- The Apple Mac Pro website is 33.4MB -its not responsive.
- In 2009, the average size of a Web site was 320kb. Today in 2013, it is 1.5MB. In just over four years, we’ve quadrupled 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.
- 15.4M people live in 134 square miles 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.
- A number of unique mobile services in Africa are all designed for reach like m-maji, mimiboard, and more.
- 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?
- By the end of 2013, there will be 7 billion mobile subscriptions primarily on 3G. 36% will be on EDGE and CDMA.
- Is our work 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: what could a territory be or should be?
- Maps are traditionally use to represent existing territory. Randal was making a map of what something could be. To promote the health of the city.
- 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.
- Micro-JS frameworks are an alternative to JQuery, which weighs in at 35KB. We need to re-evaluate our tools for the new reality of today.
- 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). Both with and without Javascript, you still have access to your words.
- To make an interaction accessible on multiple inputs, you can constrain specific interaction modes (like mouse/keyboard) using media queries. Start with touch and change based on viewport differences.
- 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.