Responsive layouts are also known as Responsive Web Design (RWD), while adaptive layouts as Adaptive Web Design (AWD). The two are grouped together here because they represent a different class of approach, in that they aim to achieve the same general goals. These goals mainly are to deliver Web content across different technologies through adjusting for different factors, such as screen sizes, screen resolutions, and device capabilities, to optimize user experience. The differences between them lie mainly in the way they achieve these goals. For example, RWD enables a single design to fluidly change to fit any browser-window size. The same codes and contents are delivered to each device, where the included CSS codes determine which layout to present to a user, based on browser size.
In contrast, AWD, like the old approach of creating different versions for the same site, typically involves creating different versions of the same design and delivering the appropriate version to users, based on their devices’ screen size and capabilities. It defers from the old multiple-version approach mainly in the sense that different Uniform Resource Locators (URLs) are not necessary; instead, the Web server detects the user’s device type, determines what version of a design to deliver based on the device’s characteristics, and even user’s preferences, and delivers the most optimized design, along with the necessary components, such as media assets. This means, naturally, that different devices may receive different versions of the same site.
The term “adaptive web design” itself is another term for a design philosophy known as progressive enhancement, which has been around for some time and suggests the strategy of using Web technologies in a layered manner that ensures everyone can access Web content irrespective of the capabilities of their devices or Internet connections. More specifically, users whose set-up can handle only basic content and functionality should be able to have it just as those whose set-up can handle high-quality delivery should be able to have high-quality content.
Like fixed and liquid layout approaches, both RWD and AWD have advantages and disadvantages, and are best suited for different situations, which are typically determined by factors such as business goal, budget, and users’ needs. The following are some points of comparison.
- Efficiency: On the face of it, it is more efficient to create a single design that adjusts to fit different screen sizes, as in RWD, than to create differently optimized versions for different devices, as in AWD, which can be costlier in terms of time and effort.
- Implementation: Typically, the implementation of RWD requires no programming, only HyperText Markup Language (HTML) and CSS, and all the decisions about what to display are made by the browser. In contrast, the implementation of AWD requires the use of programming (scripting). Using scripts is how, for example, the Web server is able to detect a user’s device type to determine which optimized design version to deliver to the device and then dynamically compose the design. For these reasons, adaptive designs are often more complicated and more expensive to implement.
- Responsiveness: In RWD, because all the decisions about what to display are made by the browser, a design can change dynamically according to the width of the browser window, irrespective of device. In contrast, in AWD, because the decisions about what to display are made by the Web server, once a design version is delivered to the browser, its layout or the size of its elements cannot be changed by changing the size of the browser window, unless such responsive behavior is also implemented and the codes are delivered with the design version.
- Performance: Because the implementation of RWD typically requires a lot of codes, and RWD delivers all the codes and content (including media assets) for a design to all devices, whether or not a device needs all of them and without consideration for a device’s capabilities or connection speed, RWD can easily overwhelm the capabilities of mobile devices, possibly resulting in slow download time. In contrast, since AWD delivers to a device only what the device needs based on its capabilities, there is usually no slow download-time problem. With AWD, a server can optimize what it sends to a device, including optimizing media assets and also removing functionalities that the device does not support—all done on the fly. For example, high- resolution images can be delivered to high-resolution devices and low- resolution images to low-resolution devices. However, a hybrid of RWD and AWD is also possible and used. In this approach, device detection is incorporated in RWD and elements that can cause slow download time, such as large images and videos, are removed from what is delivered, especially if the server detects certain types of mobile devices, such as older mobile phones with more limited capabilities.
- Maintenance: If designed well, RWD should not need to be updated when new screen sizes become available, since right from the start, it is capable of delivering on virtually any screen size and can, therefore, handle future screen sizes, be they smaller, larger, or even extra large. However, if it is based only on common screen sizes, then updates are likely to be necessary in the future, just as it will be for AWD if new screen sizes and/or resolutions become available that are deemed important to serve.
- User experience: With RWD, because a single design is basically scaled and reorganized as necessary to fit screen size and other specific needs are not considered or catered to, usability and accessibility issues might arise. In contrast, because AWD delivers to a user specifically tailored design, these issues are less likely to arise. For example, delivering to a mobile device only information that can be handled comfortably on it, instead of information more suitable for desktop interaction, is more likely to be beneficial to the user’s experience than not. This means that AWD is better suited for when what users do when they access a site via a mobile phone differs from what they do when they access via desktop, and RWD is better suited when there is little or no difference.
NOTE: Responsive website design and Google ranking
One of the factors Google uses for its ranking is how much a design satisfies user experience across devices, which means as well as other things a website needs to be mobile friendly. Central to this is whether a site is responsive or adaptive. This means that making a website responsive gives it a higher search engine optimization (SEO) ranking. SEO is the process of designing a website in ways that improve its visibility in search engines and the chances of being listed at the top of organic search engine results pages (SERPs). Organic search results refer to results that are not paid for or sponsored. Appearing high on SERPs generally translates into more traffic, which for e-commerce sites, for example, means more visits to convert into sales. SEO evaluation is discussed in Chapter 26.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.