Responsive vs. Adaptive Design: Which is Better for Your Site?

May 8, 2014

whole brain marketing blog author


Posted by Alex Sobal

responsive-designJust as my most recent blog post was saying, having a visually appealing, properly formatted website is one of the first things your readers look for when they’re searching for content. If your site is hard to navigate, read, or understand, visitors will have no problem finding an alternative solution that’s more desirable. That being said, there are several solutions for making your site look as good as possible at all times. Whether a visitor is viewing your site on their desktop, tablet, or mobile phone, web designers can make sure that the content on your page is visually appealing and easy to understand, no matter the device. How? By using responsive and adaptive design.

What is “responsive design?”

For those familiar with HubSpot’s latest COS, you’re already aware of what responsive design looks like. For those who don’t know, however, let me start by using this GIF as an example:

fluidgrid

As you can see in the example above, with a responsive website design, the content on your page responds to a users varying screen size. As the screen size shrinks, images and text adjust accordingly, creating a more streamlined, appealing look. This is accomplished by using special coding with CSS3 media queries.

What is “adaptive design?”

Similar to responsive design, adaptive design also features the ability to have your web content adjust accordingly to the viewer’s screen size. However, instead of having your web content repositioned with every adjustment in the screen’s size, designers use a series of static templates based on different breakpoints in a page’s pixel width on a given device. For example, in the GIF below, you’ll see the areas of content adjust to 5 different layouts. Whenever a screen reaches a certain pixel width, it automatically adjusts to the next, smaller static template until the screen width shrinks to the next breakpoint, and so on.

adaptive-grid-2

Responsive vs. Adaptive Design

Looking at the two styles side-by-side, it seems pretty clear that responsive design allows for more flexibility within a webpage. Whereas an adaptive design might only offer 5 different static layouts for a given webpage, with responsive design, the page responds to nearly every change in screen size and adjusts the content into an optimized layout. This way, no matter what size screen your visitors are viewing your website on, your content will be presented in a way that not only looks better, but is also easier to take-in and understand. Plus, with website platforms like HubSpot’s COS making responsive design easier to implement than ever before, every business is capable of creating highly-optimized, attractive websites.

Despite all the benefits of responsive design, however, you can’t forget about the hidden ace up adaptive’s sleeve. Rather than having your site readjust to each change in screen size, adaptive designs don’t respond until they’re loaded. By doing this, your website detects the device your visitor is using first, and loads up the properly sized layout for that device. In other words, you aren’t just viewing a desktop-optimized webpage that’s been properly resized to fit your screen, you’re viewing a webpage that’s been properly selected to best fit your specific device. To make sure they cover all the bases, web designers typically focus on 5 different screen sizes when using adaptive design to create templates for your website.

different-screensizesThough this might seem like a more tedious process, this gives your design team an advantage over responsive design’s flexibility: customization. Using adaptive design’s device-specific templates, you can tailor each one to include features that go above and beyond just having a properly formatted screen. Looking at your phone-sized templates, you could include features in that layout that respond to other phone-specific features. For example, rather than just listing your business’ phone number, you could create a "Contact Us" CTA that opens to your visitor’s dial pad in their mobile device when clicked! The possibilities for customization could be endless.

In conclusion...

As website design continues to advance, sites are becoming more and more customizable. In fact, in today’s day and age, it isn’t all that strange for companies to create unique webpages that are only visible to visitors that meet a certain criteria. Whether you choose to go with an adaptive or responsive design, however, it’s important that you adapt your website to complement your visitors overall user experience. The more you can create a personal connection with them, the greater chance you have at securing them as a lead.

            Optimize your website, inbound marketing         


Topics: Web Design and Development



whole brain marketing blog author
Written by Alex Sobal

Alex has exceptional writing skills and the ability to learn new industries and their complex processes. While at Weidert Group, he was also an avid social media marketer and wrote frequently on online community engagement and content creation strategies for our blog.

Click here to get your ebook for Growth-Driven Design website development