When it comes to web design, a frequent question arises: Adaptive, liquid, responsive, and static -- What's the difference? Below you will find some of the distinguishing characteristics of each of these web design models. See also this article by Ahmed Faisal.

Static webpages are commonly written in html language, and the information is rendered to the viewer precisely as it was stored. No change or modification takes place through an application. However, Google's April 2015 algorithm requirement rapidly increased the need for web pages to implement a more mobile-friendly design layout in order for sites to rank higher in the search indexes. (See Cindy Krum's article on moz.com).

A liquid layout is the next step in that direction. As Faisal states, a liquid layout "uses relative units instead of fixed units" of measurement -- percentages or ems, for example -- instead of pixels. However, although a liquid layout can fill the entire width of the page if the browser is very wide, it may also stretch the content too far.

RWD vs. AWD

Both responsive and adaptive web design (RWD and AWD respectively) are design methods that improve visibility on mobile devices. An article by Ryan Boudreaux in Tech Republic discusses the difference between RWD and AWD.

Adaptive web design (AWD) allows for modifications to the webpage layout. Boudreaux states that the adaptive design model is user-focused, as opposed to the static, browser-focused webpage layout. His "condensed definition" of AWD is as follows: it "changes to fit a predetermined set of screen and device sizes."

Responsive web design (RWD), Boudreaux tells us, is one that "starts with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation." Finally, Boudreaux condenses his definition of RWD: "it will fluidly change and respond to fit any screen or device size."

In comparison, Boudreaux tells us, both methods allow us to view websites with mobile devices and different screen sizes. However, the delivery is different. RWD relies upon flexible, fluid grids, while AWD depends upon screen sizes that have been predefined. In fact, one of the main differences between the two designs, Boudreaux concludes, "is that RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, while AWD has a streamlined, layered approach."

At folio1, our sophisticated web developers drive our clients' business forward by  combining great website appearance and presentation with superb user experience. If you have any questions about web design, or would like help in streamlining your webpage, please contact us.