Why You Should Use a Fluid Responsive Framework Versus an Adaptive Responsive Site

It still amazes me that many sites are not using a fluid responsive framework. Now that we are steamrolling into 2017, a year in which we already seeing major technological advancements, businesses need to be more on top of their digital game than ever before.
A fluid responsive framework is a code base that will help facilitate and improve the speed at which you can develop and maintain an optimized mobile-friendly and even desktop friendly website. Frameworks like Foundation and Bootstrap are leading the way, but other responsive frameworks are still useful in their own way too.
When mobile-friendly development started, many were building websites using what in CSS is called a media query. Media queries, query the browser for the screen size, allowing a website to adjust its look and feel to that size. Therefore many older websites were built with media queries so that they would adjust to “desktop”, tablet, and smartphone sizes using these queries. This is what essentially became an adaptive website. The website would adapt to the screen size.
Why is this no longer the best way to build a responsive website? Well, there are now many more screen sizes than ever before, and only adapting to a select few sizes does not solve the mobile and multi-device issue. Secondly, media queries require a lot of code and more work to maintain mobile compatibility.
So what is fluid responsive? Fluid responsive means that your website fluidly responds to the device size using percentages rather than media queries. Therefore if you have 3 icons in a row evenly spaced in a section of your website, it will simply respond to the screen size change and stay in a column of 3 or 33% each icon. At a certain screen size it may reduce down to one per row as squeezing three into the row becomes too difficult to see or read.
Why is fluid responsive better? Fluid responsive sites adapt to all screen sizes, not just some screen sizes, and often require much less code to write and maintain since they typically follow a simple syntax requiring easy to use classes and ID’s that don’t require many complex media queries.

Here is an example of 3 different sizes with fluid responsive design:

Large Screen

 
Medium Screen

 
Smaller Screen

 
If you are looking to build a modern website, I highly suggest you leverage a responsive framework like Bootstrap or Foundation that is constantly improving and has a massive open source community behind it of quality developers. Feel free to contact us at hello@trellis.co to learn more about fluid responsive design.