Adaptive and Responsive Websites

Adaptive and responsive websites represent a recent trend within Web design toward layouts that adapt to the device they are displayed on, allowing the same webpage to be loaded on, for example, a smartphone and a laptop yet to be displayed in very different ways. This way the same website can be optimized to the unique context of the device it is being displayed on, allowing the website to “fit” a wide range of devices; an increasingly relevant proposition in a world with an ever-increasing amount of Internet-capable devices (smartphones, tablets, laptop and desktop computers, televisions, etc.), that not only represent a challenge in terms of handling a wide range of screen sizes, but also different user input controls (touch devices, mouse and keyboard, remote control, etc.) and different usage contexts (e.g., desktop computer in an office while working, smartphone while shopping in the grocery store, and tablet when relaxing on the living room couch). Freeing the online educational information from being accessible only on specific devices is not just a central part of making educational technology omnipresent for the average consumer, it is also a prerequisite for making it accessible to demographics who can only afford the smaller low-cost devices, such as a tablet or smartphone.

Multiple Devices, One Website

The main idea behind adaptive and responsive websites is to have the same website be optimized for a wide range of contexts, with the context typically being the device’s screen size. This way only a single website has to be developed and maintained, and only the layout and styles of the website are changed to support a wide number of devices. This stands in contrast to the strategy of developing separate desktop and mobile sites, where two or more completely separate front ends are built for the website to provide distinct experiences to, for example, smartphone users and laptop users. Adaptive and responsive site proponents argue that having a single website where the layout adapts is easier to maintain, as a feature will only have to be implemented once to work on all devices.

Figure 1 provides an example of a responsive website where the same website changes layout to fit the device it is being displayed on. On a laptop, the site has plenty of screen real estate and includes a sidebar with popular articles and generous article padding. On a tablet, the layout has changed and the sidebar has been pushed below the article (out of sight) and page margins have been decreased significantly. On a smartphone, font size is decreased and text no longer wraps around the image.

Figure 1 Sample website displayed at three different devices