What is the Difference Between Adaptive Design and Responsive Design?

Previously web designers and developers would create a separate, watered-down mobile version of a site specifically for smart phone users. However, with the constantly changing screen sizes of mobile devices, we are now moving away from the m-dot sites of yesterday and moving ahead with a one-site approach.

The one-site approach is exactly what it sounds like: one website that works on ALL mobile devices. Not only will your website work on the cell phones available right now, but it will also work on devices that aren’t even available yet. The one site approach is also recommended because it will help improve search engine rankings.

The one-site approach comes in two different flavors, responsive and adaptive. These approaches are different; yet yield nearly the same results. Whichever you choose, responsive or adaptive design, in the end your website will look and function great on nearly any device for years to come!

What is the difference between responsive and adaptive design?

Adaptive:

An adaptive design consists of several site “designs” or layouts. When you navigate to an adaptive site the size of the screen you are viewing it from will determine which of these layouts you see.

If you are viewing an adaptive site on a desktop or laptop you can drag the corner of your browser and see the different breakpoints where you see the transition from one layout to another. Take a look at colly.com from a desktop and adjust the size of your browser window. You can clearly see the breakpoints as you shrink the browser window.

One benefit of choosing adaptive design is that it won’t always require a complete redesign of your current site. In some cases we may be able to take your current site design and adjust it for the other layout sizes that are needed.

In the end an adaptive design will give you a website that looks and functions great on both mobile devices and desktops. For many companies, adaptive design is a great match.

Responsive:

Responsive design takes a slightly different approach to making a website viewable on all devices. A responsive site is built using percentages on a fluid grid, which results in a completely flexible design.

If you don’t know basics of coding that last sentence might not make an ounce of sense, but don’t worry. Simply take a look at sites like Disneyor Boston Globe from your desktop or laptop. Drag the corner of the browser to shrink the size of the window. See how the text and images are continuously responding to the change in the browser size? The fluid grid design of responsive allows the website to be viewed perfectly on both desktop and cell phone screens and everything between.

Should You Choose Responsive or Adaptive Design?

The correct answer is completely up to you. Both adaptive and responsive designs are great choices to ensure that your site is viewable on both mobile devices and desktops while only using one site. Both approaches yield results that are worth the investment.

If we had to pick one, responsive design would be our first choice due to the flexibility of the design across all devices.

Are you ready to make your website mobile friendly? Contact us for more information about the benefits of both responsive and adaptive design.