Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site? Different approaches to mobile websites have each their advantages and disadvantages. On a mobile device, users can encounter one of the following types of sites:
Mobile-dedicated sites are designed for mobile phones.
Web apps are a special type of mobile-dedicated site that looks and feels like an app.
Responsive-design sites are sites designed for a multitude of devices with different screen sizes; they automatically adjust the layout of their content to the available screen size.
Adapative -design sites are sites designed for a multitude of devices; they automatically adjust and only send content and features that can be appropriately displayed on that device. More powerful devices receive more complex content, less powerful recieve a lighter version.
Full (or desktop) sites are designed for the desktop and are not mobile optimized.
Mobile-Dedicated Sites
Mobile-dedicated sites are sites designed specifically for mobile phones. They often live under a separate URL (e.g., m.site.com) and are completely distinct from the full site. They contain features or content that have been deemed appropriate for mobile; frequently, these are just a subset of what is available on the desktop. They are often contrasted with responsive sites, which typically contain the same content and functionality for mobile and desktop, but rearrange these features on mobile.
Web Apps
Web apps are not real applications; they are really websites that may look and feel like native applications, but are not implemented as such. (Our article on different types of apps details the distinctions between web apps and native or hybrid apps.)
Responsive Design
Responsive design is a development technique that detects the client type and dynamically adjusts the layout of a site according to the size of the screen on which it is displayed. Thus, the same content may be displayed in a three-column format on a desktop, two-column format on a tablet, and one-column format on a smartphone.
One of the complaints against mobile-dedicated sites is that they often exclude content and functionality that may prove relevant at least to some users occasionally. Responsive design tackles that objection by striving for content and feature parity across different versions of a site.
In practice responsive design is often a continuum: many responsive sites are not “fully” responsive and do not have a 100% feature or content parity; instead, they remove functionality that is rarely needed on mobile.
Adaptive Design
Adaptive design is a version of responsive design in which the server detects the capabilities of a client device and only sends content and features that can be appropriately displayed on that device. More powerful devices receive more complex content. Less powerful devices on poor network connections are sent nimble, light versions of the page — stripped down to core functionality. This technique is sometimes called progressive enhancement. The main advantage of adaptive design is that it solves the problem of slow response times that often detracts from responsive design.