In our past articles on media queries and breakpoints, we’ve solely covered one of the two approaches in achieving a responsive site. This approach being Adaptive. Adaptive Web Design, in the responsive web design sense, is the more rigid and structured approach because of how the elements of a website only change upon reaching declared breakpoints. This has benefits, mostly in there is less need to worry about how well the site will respond to less popular screen widths, since it will only change at specific points.
However, there are disadvantages to using this approach that are well worth considering. The main one being a benefit. This being the Adaptive approach’s inability to change in accordance to what widths are specified in the media queries used to create the breakpoints. If, say, a tech company somewhere builds a device that has an odd width of 520px, or just imagine a Blackberry. This is what I like to call the forgotten zone, which ranges from 766px to 490px. It gets its name from the majority of us tending to forget this area by only declaring mobile calls for 767px and lower. So with this in mind the Fluid approach wins out. Despite how easy this may sound, there is much more to them than this, and that is what we’ll be looking over.
Note: This article is referring to Adaptive and Fluid layouts.
The Adaptive Approach
The Adaptive approach to responsive web design (RWD) can best be described as being okay for the moment. The description is appropriate because this approach is applied best to websites that go through very frequent design overhauls. In this type of life cycle, being future proof is not a necessary aspect to consider and here is why.
In the Adaptive approach to RWD, the breakpoints set with media queries are the only changes in appearances that will appear. So if a website was only designed with breakpoints in the ranges of 320px to 480px and 480px to 620px, then there would only be three layouts in general. Approaching the concept like this has its positives and negatives.
A positive is that there is less need to test a website with the Adaptive approach at various browser widths. The main goal of creating particular range sets is to provide a good experience for users in a universal manner. A negative here is that in these specified ranges, there will be a point where the design will have issues.
Targets The Moment’s Popular Devices
Since there are going to be, at most, three layouts, it would only make sense that the main layouts would be for the most popular devices. It’s no good to have a design, or anything for that matter, that doesn’t look good in the most common way people are going to be using it. Right?
Of course that’s correct. In creating adaptive layouts, the main focal points is the viewing ranges of whatever the popular devices at different platforms are. For instance, tablets and smartphones are the most popular web browsing platforms right now. For these platforms their most popular devices would be the iPhone and iPad respectively. A positive of this is that it ensures an optimal viewing experience for a good percentage of possible users. A negative would be that those users who aren’t using these popular devices have a high chance of viewing at a range where the website has issues.
Isn’t Future Proof
When dealing with anything that has its main focal points as the most popular devices of the moment there isn’t much emphasis put on the future. Considering this trait, the Adaptive approach feels like an instant don’t use case. In actuality though, there is more to it than what the statement appears to show.
The positives and negatives of not being future proof is all relative to the project needs. For instance, imagine having a web project where every final approved result has a life span of 1-2 years. By the end of this time, something new will take its place. Depending on the type of website, and considering the short life span, having a final product that is future proof isn’t that much of a priority. Another positive situation for this approach would be if there was a preferred native app or mobile site already there. However if the life span was more stagnant and there was no specific build just for more mobile devices, then this would be an issue.
- Less of a need to test a website at the various widths to figure out how it will render
- Ensures an optimal viewing experience for a good percentage of possible users
- Has a set number of a few different layouts
- In the specified ranges there will be a point where the design will have issues
- Users who aren’t using the most popular devices have a high chance of a less than optimal experience
- It is not future proof, and requires periodic updates as technology changes
The Fluid Approach
In contrast to the rigidity of the Adaptive approach, the Fluid approach is very liquid, no pun intended. The liquid aspect comes from the way this approach responds to different viewing widths, and how easily it can transform into a suitable layout. So a good way of looking at this approach is to think of a flowing river.
No True Form
The real beauty of liquid is that it has no true form and/or structure. Instead, it adapts to whatever container it is in and creates its form from within that. Applying this theory to RWD, the Fluid approach makes it possible to have layouts that will fit within, and adapt to, any viewing device. This is done by using a combination of percentages for section dimensions, and breakpoints to be used in the same fashion as the Adaptive approach.
A positive of this is that it allows for your website to render itself based on whatever viewing range is currently loading it is. However, a negative aspect to this is that much time must be spent looking at the website at different viewing widths to see where it breaks the design.
Despite not having a true from, when done right this would be very hard to tell. Having a layout of this nature is achievable because everything is always proportional. To have a proportion-based layout like this, it is necessary to use percentages when declaring styles in your CSS. The use of percentages, instead of a fixed interval like pixels for instance, allows for everything to relay its rendered size based on the size of the screen its being viewed on.
A positive of this is that when coded properly, everything will always look in balance and sync with everything else. A negative is that if coded poorly, there will be noticeable inconsistencies in position, size, margins, etc.
Is Future Proof
Is there a better feeling in this industry than having something you designed and/or developed be able to be classified as timeless? The beauty of the Fluid approach is that there is little need to worry about how well your website will respond to advances in technology and changes in common viewing devices. So in maybe five or six years from now, this approach still would be appropriate in use. That is unless of course there is something better out by then.
A positive of this is that there is little worry about when something changes in the technology world that affects how people browse the web. As long as your website has been created properly. A negative of this is that our industry has never had a certain future, and there is no real way of predicting anything.
- Allows for your website to render its layouts dimensions based on whatever viewing range is currently loading it is
- When coded properly, everything will always look in balance and sync with everything else
- Little worry necessary when something changes in the technology world that affects how people browse the web
- Much time must be spent looking at the website at different viewing widths to see where it breaks in the design
- If coded poorly, there will easily noticeable inconsistencies in position, size, margins, etc.
- It is not future proof, and requires periodic updates as technology changes
When looking into using the Fluid approach, its good to think of the long term need of the build and what is already in place. When looking into using the Adaptive approach, its good to think of how feasible it would be to make the necessary routine changes to stay current. As we’ve seen here, each approach has its own positives that make it an ideal choice, and negatives that may make you second guess using it.No one approach is ever perfect for everything. It’s important to first take into consideration your actual needs, and then consider how each approach would better achieve your goals.