Thoughts,

Musings,

and other synomnyms.

The Team Blog

Posted On

/ April 14, 2014 – 11:24 am

 

Responsive vs. AdaptiveWhere are you right now? Or better yet, how are you reading this article? If you are on a desktop or laptop, you’re not alone, but you are in the minority. This past February marked the first time that we saw more Americans (55%) use a mobile device than a desktop or laptop computer to access the Internet. Forty-five percent of people used a PC to surf the net.

When we talk about adaptive design and responsive design, it’s therefore a very relevant discussion for anyone that runs a business or works in the technology industry designing or programming websites for businesses. That’s because adaptive and responsive design are both methods used by programmers to code websites in such a way that they can be easily viewed (and viewed correctly) by users on mobile devices, or to be more precise – non-PC screens. Today, we wanted to take a minute to explain, at a high level, the differences between the two design approaches.

The Basics of Responsive Design

Ethan Marcotte is credited with introducing the term ‘Responsive Web Design’ to the marketplace, by releasing a book by the same name in July 2011.  While we could dive into the details here about responsive web design, (i.e.: it starts with the incorporation of CSS3 into the backend of the website design, followed by media queries, fluid grids and flexible images) we’d rather just give you the bare bones description. Basically, responsive web design allows a website to fluidly change and respond to fit any screen size. This means that whether your website is viewed on a desktop PC, smartphone or a smart refrigerator screen, it will fill the screen appropriately and look right to your visitors.

The Basics of Adaptive Design

Adaptive web design attempts to accomplish the same purpose as responsive web design but with a different focus. At its core, adaptive web design focuses on the end users of websites and not the browsers. The term was coined by Aaron Gustafson in his book by the same name, which was also released in 2011. Adaptive design tackles the challenge of easy-to-view websites with content that’s correctly displayed on any device by emphasizing something called Progressive Enhancement, which while complex, is really a tri-layered approach to web design  that focuses on:

  • A rich HTML content layer
  • A CSS-based and styled presentation layer
  • A JavaScript or JQuery client scripting layer

 

To sum it up, adaptive web design ensures that websites will change to fit a predetermined set of screen sizes. The main difference between the two approaches is that responsive web design uses flexible grids to display website content properly on mobile devices while adaptive design relies on a variety of predetermined screen sizes to accomplish the same thing.

Responsive vs. Adaptive Design – Why Does it Matter?

Having covered the basics of the two approaches to web design at a very high level, it’s important to ask the question – why does it matter? Or better yet, which approach is right for your website project? Responsive design may take more time to code upfront as the fluid grids and flexible foundations require more time to build, however, websites made using responsive design may also take longer to load – something no website owner or designer wants. In contrast, adaptive web design may allow sites to load faster by allowing servers to choose how to display websites based on the screen sizes they detect from individual users.

Some argue that responsive design is better suited for content-heavy sites while adaptive design is the best choice for e-commerce sites. Which approach you choose depends on your goals and your site content. A professional web design company can help you make sure you choose the approach that’s best for you and your customers/visitors. Sympwellconsrestde .