Technical leads often throw around words such as liquid, static, interactive or adaptive when it comes to web designing. If you are a web designer, it would be worthwhile for you to get familiar with what they are and if you are a business looking to get yourself a website, it would be of interest to you to know how much it would cost you to own one. Viewers however, prefer a simplistic and responsive design that may be optimal for your business needs as well.
Let us familiarize ourselves with what each one is:
Fixed or Static design
A static or fixed web page uses a fixed page size that doesn’t change irrespective of the browser’s width. Different devices will render the static page differently. In a desktop with small window, the page may require horizontal scroll bars, and on other devices, such as smartphones or iphones, that make it difficult to view pages, require users to continuously scroll horizontally to read the rest of the content. Users have to continuously zoom in to view the page’s text. In earlier designs, fixed layout was normally used, until the beginning of 2010s when responsive design was introduced.
Liquid or Fluid design
Unlike a fixed page layout, the liquid design will fill the page irrespective of the browser’s width. The term liquid denotes the fluid nature of the web page. A liquid design uses percentages, or other measurement units such as ems. There are disadvantages of using a fluid design when the browser size is either too big or small.
This approach to designing a web page builds on the idea of both relative units and adaptive design. It overcomes the negatives of a liquid design wherein the page flexes depending on the browser’s size. The web page adapts itself to the size of the browser without leaving gaps or contracting texts beyond the reader’s comfort. Such websites are designed with a mobile-first approach and the developer later looks for ways to expand the layout.
With a responsive web design, the quality of images and videos downloaded will differ depending on the speed of the internet connection.
This design approach uses CSS media queries to detect the browser’s width and alter the page’s layout accordingly. Like fixed layout, this design uses fixed units but unlike fixed layout it uses multiple fixed widths as defined by specific media queries. This approach makes a website adapt itself to both desktops and mobiles providing users with a better viewing experience.
Adaptive differs from responsive design in that AWD uses predefined screen sizes and RWD depends on flexible and fluid grids. A flaw with this design is that designers have to use redirects for cross-linking (referring to an old article in the website in a new article).
Depending on who your end user is, you need to select a layout that will work best for your business and also be cost-effective. However, it is always recommended to keep the site simple and user-friendly.