Adaptive and Fluid Approach in Responsive Web Design

Posted in Tips, Web Design2 years ago • Written by 9 Comments

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


*Image Credit: clara & james

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.

Set Appearances

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.

In Short

Positives

  • 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

Negatives

  • 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


*Image Credit: Flávio Ferreira

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.

Proportionate

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.

In Short

Positives

  • 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

Negatives

  • 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

In Conclusion

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.

34 Written ArticlesWebsiteGoogle+

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

9 Comments Best Comments First
  • linaka

    Monday, October 22nd, 2012 13:52

    2

    What happens where people start to use dual screening? For example, the content is viewable both on an iPad and via Apple TV, a 50 inch screen? Fluid Layouts won’t work as well then would they? I’m curious now!

    0
    • Jamal

      Wednesday, October 24th, 2012 11:43

      3

      Hi linaka,

      From my understanding you could be referring to the possible two instance of dual screening. So if someone was sharing on their 50 inch screen what is being displayed on their iPod, from my experience that shouldn’t be a problem. When I connect my Macbook Pro to a bigger screen for this purposes, each have their own screen dimension settings. So ideally, what would happen is that they will each get the desired experience for whatever browser viewing range the device and screen are individually in.

      If you are referring to connecting two screens together, which I don’t think you are. I would only assume that it would just be the same scenario.

      0
  • Moriah Diederich

    Monday, October 29th, 2012 18:54

    5

    Thanks for explaining the differences between these two. Do you know if most of the responsive themes designed in WordPress (say being sold on ThemeForest for example) are typically in the rigid or fluid formats? I’m still surprised at how few responsive themes there are out there…

    0
    • Jamal

      Tuesday, October 30th, 2012 07:57

      6

      Sorry Moriah I don’t typically browse ThemeForest looking for themes to purchase because I’d rather do it all myself, so I couldn’t help you there.

      However, I would assume that there is a good portion of them built on frameworks like Foundation by Zurb and Twitter Bootstrap so they should be fluid.

      +1
  • Casey Dennison

    Monday, October 22nd, 2012 10:59

    1

    I’m still battling with this, but it’s coming. It takes time to actually get used to fluid layouts, and laying them out. All the diff. proportions can be a pain. I suppose it’s something that will get easier in time.

    0
    • Jamal

      Wednesday, October 24th, 2012 11:44

      4

      Hey Casey,

      Yeah, it takes a while to get the idea that everything is moving and sizes are relative instead of being absolute. But once you spend a little while just doing some builds, it should all come to you eventually.

      +1
  • Jim Tourville

    Saturday, December 15th, 2012 15:18

    9

    Any tips for presenting this to clients? There’s often a disconnect between what our restaurant clients are seeing in the initial design look and feel and what they see when responsive wireframes are first shared.

    0
  • bikeman

    Wednesday, November 14th, 2012 06:29

    7

    You forget that most tablets and smartphones resize webpages to fill their screens. As such it is not necessary to account for all screen resolutions and the argument against adaptive layouts is not valid. Building an adaptive layout of 1 col, 2 col and desktop therefore does actually cater for all screens and negates the need to build responsive layouts.
    The second point I’d like to make is that as the resolutions of devices increase the breakpoints will become less valid and the physical size of the device becomes more valid in determining appropriate layout. For example as screen resolutions of smart phones increase their physical screen size still dictates that a 1 col layout is still most satisfactory for the user regardless of the screen’s actual resolution. As such media queries based upon screen resolutions will need to evolve to account for physical screen size.

    0
    • Jamal

      Thursday, November 15th, 2012 14:05

      8

      Actually, everything you mentioned here can be found in my post. Thank you for taking the time to comment on my article though.

      0
  • Jim Tourville

    Saturday, December 15th, 2012 15:18

    9

    Any tips for presenting this to clients? There’s often a disconnect between what our restaurant clients are seeing in the initial design look and feel and what they see when responsive wireframes are first shared.

    0
  • bikeman

    Wednesday, November 14th, 2012 06:29

    7

    You forget that most tablets and smartphones resize webpages to fill their screens. As such it is not necessary to account for all screen resolutions and the argument against adaptive layouts is not valid. Building an adaptive layout of 1 col, 2 col and desktop therefore does actually cater for all screens and negates the need to build responsive layouts.
    The second point I’d like to make is that as the resolutions of devices increase the breakpoints will become less valid and the physical size of the device becomes more valid in determining appropriate layout. For example as screen resolutions of smart phones increase their physical screen size still dictates that a 1 col layout is still most satisfactory for the user regardless of the screen’s actual resolution. As such media queries based upon screen resolutions will need to evolve to account for physical screen size.

    0
    • Jamal

      Thursday, November 15th, 2012 14:05

      8

      Actually, everything you mentioned here can be found in my post. Thank you for taking the time to comment on my article though.

      0
  • Moriah Diederich

    Monday, October 29th, 2012 18:54

    5

    Thanks for explaining the differences between these two. Do you know if most of the responsive themes designed in WordPress (say being sold on ThemeForest for example) are typically in the rigid or fluid formats? I’m still surprised at how few responsive themes there are out there…

    0
    • Jamal

      Tuesday, October 30th, 2012 07:57

      6

      Sorry Moriah I don’t typically browse ThemeForest looking for themes to purchase because I’d rather do it all myself, so I couldn’t help you there.

      However, I would assume that there is a good portion of them built on frameworks like Foundation by Zurb and Twitter Bootstrap so they should be fluid.

      +1
  • linaka

    Monday, October 22nd, 2012 13:52

    2

    What happens where people start to use dual screening? For example, the content is viewable both on an iPad and via Apple TV, a 50 inch screen? Fluid Layouts won’t work as well then would they? I’m curious now!

    0
    • Jamal

      Wednesday, October 24th, 2012 11:43

      3

      Hi linaka,

      From my understanding you could be referring to the possible two instance of dual screening. So if someone was sharing on their 50 inch screen what is being displayed on their iPod, from my experience that shouldn’t be a problem. When I connect my Macbook Pro to a bigger screen for this purposes, each have their own screen dimension settings. So ideally, what would happen is that they will each get the desired experience for whatever browser viewing range the device and screen are individually in.

      If you are referring to connecting two screens together, which I don’t think you are. I would only assume that it would just be the same scenario.

      0
  • Casey Dennison

    Monday, October 22nd, 2012 10:59

    1

    I’m still battling with this, but it’s coming. It takes time to actually get used to fluid layouts, and laying them out. All the diff. proportions can be a pain. I suppose it’s something that will get easier in time.

    0
    • Jamal

      Wednesday, October 24th, 2012 11:44

      4

      Hey Casey,

      Yeah, it takes a while to get the idea that everything is moving and sizes are relative instead of being absolute. But once you spend a little while just doing some builds, it should all come to you eventually.

      +1

Comments are closed.

54.82.187.225 - unknown - unknown - US