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
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
- 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
- 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!
Implementation, and management, we are here to accelerate innovation and transform businesses. Contextual marketing is a modern marketing strategy to communicate the correct message to the ...