Tag Archive for: fluid design

There is more than one way to do responsive web design. The most prominent seems to be adaptive web design, which is more rigid and structured because the elements of the site only change when reaching different breakpoints.

Just because bloggers and media specialists focus on adaptive web design doesn’t mean there isn’t another approach with merit. Both approaches have pros and cons, and both will help you more in certain instances.

Adaptive Web Design

The adaptive approach is best when used on sites that frequently go through design changes. Adaptive design doesn’t have to think too far into the future because adaptive designs require regular updates to make them optimized for the latest technology.

The approach uses breakpoints set with media queries as the only changing visual aspect. Usually, this results in about three different layouts, which provide a good experience on most platforms. The downside is along the outer edges of these breakpoints (for example if the range has a maximum of 620 px and the device used to access the content is 619 px) users will begin to have design issues.

The upsides to adaptive design are you don’t have to test it at every conceivable width to ensure it renders properly, and it makes sure the majority of users will have a good experience. Unfortunately, if you aren’t using the most recent and popular devices, you are more likely to have a problem, and it requires periodic changes to keep up to date.

The Fluid Approach

The fluid approach responds to different viewing widths allowing the design to create a suitable layout on nearly every platform. The viewers are able to get a good experience that is catering to the dimensions of their device, but for the designer, the fluid approach requires a lot of time spent checking the site at different widths to see where the design breaks.

The design doesn’t have a “true form”, but an ever-changing appearance molded to fit the needs of the viewer’s device. The ability to achieve this type of design comes from keeping all of the aspects of the site proportional. Everything is rendered based on the size the screen is viewed on.

The best part of this type of design is fluid designs are practically timeless. It is impossible to really predict what will happen in the industry in a few months, let alone years, but fluid designs have the ability to still look aesthetically pleasing on all devices for much longer than adaptive designs.

Conclusion

Both design approaches have their merits. Adaptive design is feasible to be able to make routine changes to stay current, and offers an almost universally pleasing experience with little testing. Fluid designs don’t require the regular updates of adaptive designs, but you will likely end up spending the same amount of time testing widths.

No approach is ever perfect for everything, but these two should keep you covered in most situations.

For more technical information about these two approaches, read Jamal Jackson’s article from 1stwebdesigner.