Chapter 1. Learning to work responsively
Figure 1.1. A cluttered “information superhighway”
Figure 1.2. An example of how a responsive website behaves for a single URL (http://mng.bz/vTVT). The “Activism” section of the 2013 Webby Awards can be accessed by multiple devices with different hardware properties.
Figure 1.3. Commonly called the “waterfall method,” each phase in this process involves creating and passing a deliverable to the next person in the workflow.
Figure 1.4. In this new, more agile approach, user experience and development happen iteratively. Deliverables are passed along and reviewed in an iterative cycle.
Figure 1.5. A visual representation of three breakpoints applied to a page. In this example, the first breakpoint might represent a large tablet, the second could be a small tablet, and the third a mobile device.
Figure 1.6. An example of one of the Foundation Zurb components, the Reveal Modal
Figure 1.7. Rough sketches offer some direction for the prototype.
Figure 1.8. With just a little markup, you’re well on your way to a functional prototype.
Figure 1.9. Inspecting the design can reveal something about the site’s intent.
Figure 1.10. The page in raw, unstyled markup
Figure 1.11. A four-column grid for mobile websites