The ubiquity and variety of mobile devices has driven web and app designers to build for an array of screen sizes. From a huge desktop monitor to a tiny smartwatch screen, we can access information in several ways.
This can be challenging. How do you make sure your site scales on any device? Both adaptive and responsive design can address this challenge, but while they might seem similar, each has benefits and drawbacks. Which one is the perfect choice for you? Which will best meet your needs? And is one better than the other?
Let’s take a look.
Responsive design explained
In its simplest definition, responsive design uses just one layout for a web page and “responsively” adjusts to better fit the user’s screen, whether it’s a desktop, a laptop, a tablet, or a mobile phone.
Technically speaking, responsive websites use media queries to target breakpoints that scale images, wrap text, and adjust the layout so the site can fit any screen size. It can be done with HTML and CSS or HTML5 and CSS3.
With a responsive website, you’ll only need one site. Everything should seamlessly respond and adapt to any user’s device or browser – the design, content, and user interface.
Ethan Marcotte coined the term responsive web design in 2010. It’s the responsiveness of web pages to adjust the placement of web design elements to fit in the available device’s space.
Introduced in 2011 by web designer Aaron Gustafson, adaptive design uses distinct layouts for multiple screen sizes. In adaptive design, it’s normal to develop six designs for the six most common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels.
Adaptive design explained
In layman’s terms, adaptive design creates different fixed layouts that adapt to specific screen sizes. In short, you have multiple versions of a web page to fit someone’s device, as opposed to a single, static page which looks the same (and reorders or resizes content) across all devices.
In a more technical definition, websites built with adaptive design include the CSS media queries of responsive design, but they also add JavaScript-based enhancements to change the site’s HTML markup based on the device’s capabilities. This process is known as “progressive enhancement.”
Adaptive doesn’t mean you need two separate sites. It still allows you to maintain all your content in a single place and share the same content with all site visitors. Adaptive sites use a template primed for each device.