There are two approaches to ensuring a website is optimized for mobile, tablet, laptop and PC screens: responsive design and adaptive design. While both are intended to solve the same problem, they use different strategies.
A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device.
Developers use CSS to ensure each page of the site can reformat based on the size of the user’s viewport and only need to create one codebase for the site. They use something called breakpoints to tell the site when to adjust to accommodate different screen sizes.
The majority of new sites now use responsive, which has been made easier for less experienced designers and developers, thanks to the availability of themes accessible through CMS systems such as WordPress, Joomla, and Drupal.
Responsive design does not offer as much control as adaptive, but takes much less work to both build and maintain. Responsive layouts are also fluid, and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized.
In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport. In fact, you can create a different user experience for each of six common screen sizes from very small to very large: 320px, 480px, 760px, 960px, 1200px and 1600px.
Adaptive is useful for retrofitting an existing site in order to make it more suitable for mobile phones. This allows you to take control of the design and web development for specific, multiple viewports. The number of viewports that you choose to design for is entirely up to you, your company, and your overall budget. It does, however, afford you a certain amount of control (for example over content and layout) that you will not necessarily have using responsive design.