---
title: "Types of web design: fixed, fluid or liquid, elastic and responsive"
description: "Fijo, fluido o líquido, elástico y sensible: qué distingue a los cuatro tipos de diseños web, por qué Google recomienda el sensible y cómo comprobarlo."
url: https://artprojectgroup.com/types-of-web-design-fixed-fluid-elastic-responsive
date: 2012-03-07
modified: 2026-10-02
author: "Art Project Group"
image: https://artprojectgroup.com/wp-content/uploads/2023/02/diseno-web-blog.webp
categories: ["Tutorials"]
tags: ["CSS", "Google", "HTML", "Web design", "Web programming"]
type: post
lang: en-US
---

# Types of web design: fixed, fluid or liquid, elastic and responsive

[![Responsive design](https://artprojectgroup.com/wp-content/uploads/2013/06/diseno-web-sensible.webp)](https://artprojectgroup.com/wp-content/uploads/2013/06/diseno-web-sensible.webp)

In web design there are fundamentally 4 types of design.

**Fixed web design**, or *diseño web fijo* in Spanish, is by far the most used on the Internet, and is the one that remains unchanged whatever the device the website is viewed on. It is indifferent to the size of the screen and to the width of the web browser that displays it. Whatever the characteristics of the device, screen or browser, what is always displayed is the same size preset by the web designer in pixels.

**Fluid web design** or** liquid web design**, *diseño web fluido* or* diseño web líquido*, is the one that tends to take up the whole width of the screen, whatever its size. It is a type of design less used than the previous one, since it requires a great deal more work from the web designer and because, if it is not done correctly, its result may turn out quite attractive for “normal” and small screen sizes, but when screens of many inches are used its appearance turns out to be, to say the least, horrible, unless techniques such as the use of max-width are employed to limit the maximum width our design will accept. In this case the web designer uses percentages instead of pixels to set the widths of their designs, although pixels and maximum and minimum measurements with min-width and max-width can also be used. Fortunately it is a type of design that is gaining more and more ground and is replacing fixed design.

**Elastic web design**, *diseño web elástico*, is a type of design very similar to fluid, except that in this case the content also grows along with the width of the design to fill the screen. It is, by far, a practically residual type of design and a very unusable one. We come back to the same thing as in the case of fluid design, elastic design may turn out more or less pleasant on more or less small screen sizes, but when very large screens are used the content becomes exaggeratedly irrational, so that, save for a very few exceptions, it has no reason to exist at all. In this case the web designer uses em to set the widths of their web design and of the rest of the content it holds. It is a type of design we should keep as far away from as possible.

Lastly we have **responsive web design**, or *diseño web sensible* in Spanish, which is a type of design that transforms itself according to the type of device or the width of the web browser that displays it. This way one web design is shown on smartphone devices, a different one on tablet-type devices, and another one again on computers. This way the web designer makes sure that the content users see fits the needs of their device and, although the information shown is exactly the same whatever the device that displays it, the design varies appreciably in order to optimize access to it as far as possible. In this case the web designer uses different style sheets that will be loaded through the use of JavaScript according to the needs that are established, mainly the width of the web browser and the type of device. This is the design that is most on the rise thanks to the massive use of smartphone and tablet devices in the daily use of the Internet. The only problem this type of design poses, besides its complexity, weight and the traffic it generates, is that of accessibility for devices that have JavaScript technology disabled or do not have it, although fortunately they are an immense majority in the fauna of the Internet.

The **APG** website uses this type of web design, together with HTML5 technology, to raise the experience of its visitors as high as possible. Now it is your turn to choose which type of design you prefer for your websites.