Responsive design is a technique that enables developers to adapt the layout and design of an app to suit multiple screen sizes. This is implemented using a series of CSS media queries that trigger layout and stylistic changes. These changes occur once a device property (such as screen width) meets the criteria defined within the media query. Developing a site in this way provides several advantages.
Developers can design and maintain one set of markup (with the occasional minor variation), and in doing so, support a wide range of devices. This reduces the number of templates and resources that must be designed, and avoids duplication of any future design, implementation, or maintenance efforts. The app is also easier to promote, as there is only one domain, and one URL for each article, section, or feature on the website. This is particularly helpful in today’s highly connected world as URLs shared by email or using social media will resolve gracefully regardless of the device.
The technologies required to design responsively are also widely supported, and by creating the markup and styles “mobile first,” it’s possible to design around devices without the necessary media query support.
Responsive design is most often applied to a single site (or app), enabling it to adapt to all contexts — from small portable devices, all the way up to desktop computers (and even larger screens such as televisions). There is, however, no reason it cannot be used to improve apps that have been explicitly designed to suit a mobile context such as Mileage Stats.
