As of 2018, consumers are more likely to visit a website from a mobile device than a laptop or desktop computer—meaning it’s been increasingly imperative for business owners to create a website that looks and works great across all devices and platforms.
Responsive design is a fluid approach whereby a page rearranges itself based on the detected screen size. Responsive web design enables a web page’s design and layout to automatically adapt to any screen size. The design technique uses CSS media queries (a tailored style sheet) to inspect the end user’s device characteristics. The website then renders itself accordingly.
Con
The same content appears in the same order. However, some content has scaled up or down to best fit the new space. What’s more, some of the functionality has changed.
Adaptive design is a type of web design whereby the browser loads a layout created specifically for the given platform. Adaptive web design enables a web page to load a static, pre-made layout based on the detected device. To make this happen, a designer must create different designs based on varying screen widths. The most common widths are (in pixels): 320, 480, 760, 960, 1200, 1600
Apple has a good example of adaptive design, which requires a custom design for using the most common breakpoints. If this were a responsive design, the same content would probably appear on every visitors’ screen and in the same order—but adaptive designs aren’t dynamic.
Con
The page’s structure is more or less identical, with the same number of sections. However, the content differs slightly between desktop and mobile—not so much in terms of text, but in its website imagery.
Pro
There’s nothing lost in terms of the user experience. In fact, adaptive design allows the designer to use imagery more precisely than if they were fitting everything from the desktop screen onto a mobile device.
Adaptive design has been permanently imprinted on the web design space, as companies increasingly want to control how their content appears on smartphones.