bing code ...

February 1, 2018

Responsive vs. Adaptive Web Design

Author: Harry Casimir

With technology at our fingertips nowadays it is extremely important to translate your website to be mobile friendly. With that being said, I will dive into the differences of and similarities between Responsive and Adaptive Design.

Responsive Design

Responsive Web Design responds to changes in the browser size by stacking different elements accordingly depending on the size of the browser. This is done by using what we call media queries, and can be set to respond or stack elements when those certain media queries are hit.

For example, if you pull up a responsive web site and change the size of the browser window you will see the content dynamically rearranging to fit within those pixel limitations. To help illustrate the differences I have put together a simple illustration.

Responsive Web Design

Adaptive Web Design

Adaptive Web Design differs in that it is only designed for certain browser sizes, or has multiple fixed layout sizes. When the URL is loaded it will detect what available space there is depending on the screen size and will place a design to fit within those boundaries. For instance, if you open your site up on desktop it will find the appropriate size design to fit within that size. Resizing the browser has no impact on the design. See below diagram to help illustrate the difference.

Adaptive Web Design

Pros and Cons

When it comes to web design, there are both Pros and Cons to how you design it. Whether it is Responsive or Adaptive, we recommend taking a step back and look at your goals for the website. Is it to inform people, or sell a product? Every business is different and depending on your strategy this could lend an answer as to what fits best for your company.

Responsive Web Design

Pros

  • Seamless Design, Good UX
  • Multiple templates to use
  • Search Engine Optimization friendly
  • Easier to implement and change.

Cons

  • Less control over design between screen sizes
  • Elements can move around
  • Longer mobile download times

Adaptive Web Design

Pros

  • Designers have more control over the UX for appropriate devices.
  • On mobile, devices can sense the user’s environment.
  • Advertising can be optimized based on user data from smart devices.

Cons

  • Takes longer to build
  • Devices are constantly changing screen sizes, which could make or break your design.
  • Challenging for Search Engine Optimization because search engines have a difficult time appreciating the same content on multiple sites.

When it comes to deciding which one to go with, we at Atilus recommend a responsive web site to ensure the best experience no matter what device you are on. With technology advancing in such a rapid matter, we do not know what next device is going to come out. That device might be slightly between a tablet and smart phone size, and with adaptive web design it might not look the best on the new device. With responsive web design we can ensure that at every pixel level your site is looking great and responding to whatever browser size you are viewing it on.

Another reason why we recommend a responsive web site is purely on the fact that we don’t just build websites to be “pretty” but we optimize them so that they actually work correctly, and you are found when someone is searching for whatever you might be selling. SEO is very important nowadays, and the purpose of a website is that it’s a tool to help Grow Your Business Online.

Harry Casimir

Harry Casimir is our CEO and co-founder. He specializes in all aspects of technology from hosting to server maintenance and provides overall strategic direction for our team.

Similar Posts

Blog image Where SEO and ADA Website Compliance Overlap
Your website should be accessible to everyone, including search engine optimization “crawlers.” ADA compliance will not only help you reach the 1 in 5 Americans with disabilities (which in turn,...
Read More Where SEO and ADA Website Compliance Overlap
Blog image The Top 3 ADA Website Compliance Mistakes You’re Probably Making
One in five Americans has a disability. Without an ADA-compliant website, you could potentially be losing out on one-fifth of your market and risk legal consequences. Ensure equal access to...
Read More The Top 3 ADA Website Compliance Mistakes You’re Probably Making
Blog image Custom Website vs. WordPress Templates
Once you’ve decided to move forward with creating a website, it’s time to make the choice between a custom or template site. We previously wrote about the differences between the...
Read More Custom Website vs. WordPress Templates
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.