webdesign types

Hello there!

In this article, we will be looking into the major differences between fixed design, fluid design and adaptive layouts. The majority of explanations are either textual but most of them are development-oriented.

So, you must be wondering what exactly happens to the interface, when it is viewed not just in large or small but in between as well. Knowing how the interface behaves when it is resized from the screen size of the computer to the screen of the mobile device helps a lot to design websites.

Let us take a closer look into these types of designs and understand what separates one type of layout from another. We will closely examine the fixed design, fluid design and adaptive design and after this article, you will understand the major differences between them.

What is a fixed design?

  • Although initially used, this type of design has lost its relevance nowadays.
  • This layout provides a nice starting point when you want to understand other types of design.
  • Fixed design layout has a fixed width in pixels and the container of the website is programmed not to move.
  • The width always stays the same independently of the screen size or the resolution the viewer is seeing.
  • The most widely used size for fixed-layout websites and the width is 960 px.
  • The biggest drawback to using a fixed design is the horizontal scroll, which appears when viewing the layout on smaller screens.
  • When viewing this design on a smaller screen, this can ruin the experience, overview and usability.
  • The biggest advantage of using a fixed design is the full control over how the interface looks like.

What is a fluid design?

  • With the help of a fluid layout, you can specify the sizes in percentages and not in pixels.
  • This implies that when the screen size changes, the proportion of elements will also remain the same.
  • The biggest drawback of using a fluid layout is that the columns get really narrow, especially on smaller screens.
  • Combining element such as video, images and blocks of text can be troublesome with a fluid design.
  • This type of design is great when incorporated on both big and small screens.

What are the adaptive layouts?

  • The adaptive layout means that there are several versions of the layout which are displayed, based on the screen size of the viewer.
  • One of the biggest benefits is that the website with a layout should load pretty fast.
  • As there are not many adjustments of the size and the position of elements when loading it, the server sends exactly what needs to be loaded.
  • Every layout should be designed with care and takes time and effort.

In conclusion, these are the major differences between fixed design, fluid design and adaptive design! All of these options are useful and interesting to look like an illustration of the evolution of web layouts. Whatever choice you end up making, you must be aware of your design considerations!