Building Web Apps that Work Everywhere

Chapter 3. Responsive Design

For more than a decade of the Web’s existence, we could safely assume that each user of our site would be accessing it through a computer screen. Despite this, early websites were, by default, adaptive to a variety of screen sizes. The Web’s first site, Tim Berners-Lee’s World Wide Web, works beautifully at a range of screen sizes (Figure 3-1).¹

Despite this, we spent time researching and considering the typical browser width and assumed that our users would be perched in front of a reasonably large screen, with a dedicated keyboard. With the evolution of mobile devices, those assumptions have changed. Users may access our sites quickly, on the go, from a wide range of screen sizes. With the diversity of devices and screens, we can no longer safely make assumptions about the screen size of our users’ devices.

The initial reaction to the rise of smartphones was to create dedicated mobile versions of our sites. This often sat at a m. subdomain, such as http://m.example.com, and provided a mobile-optimized experience. At first, this seemed like a great solution because it allowed users to access our services in a format that was streamlined for their device. For developers, this also meant maintaining multiple codebases. For users, this often meant dealing with a limited subset of functionality when using a mobile device.

Figure 3-1. Screenshot of the ...