Before you implement a layout in practice, a few basic things need to be clarified. First of all, you should decide on the type of layout. In principle, there are three options here.
- Fixed
- Flexible
- Elastic
CSS enables layouts with fixed or flexible dimensions. Fixed layouts are usually based on dimensions in pixels. Flexible layouts, on the other hand, are based on percentage values. Both layout variants have their advantages and disadvantages.
Fixed layouts are usually used when graphics are to be used to form the layout. (Although there are also exceptions here due to the use of CSS background graphics). If the layouts require pixel-perfect positioning of the elements, fixed positioning is usually also used. With this type of layout, at least the width of the layout is usually set to a fixed number of pixels. This width is then usually aimed at specific screen resolutions.
The situation is different with flexible layouts. No fixed width is specified here. The layout is then based on the width of the browser window.
With such layouts, for example, the width is specified as a percentage. If a user adjusts the size of the browser window, the size of the layout also changes.
Thanks to modern CSS properties, there is now also another layout variant, namely the so-called responsive layout. Here, the layout changes so that it looks completely different on a smartphone than on a desktop computer, for example. Here on PSD-Tutorials.de, for example, we have worked with such a layout. If you call up the page on the desktop with a "normal" browser window size, you get the following picture.
However, if you now collapse the window, the arrangement of the elements on the website actually changes.
The effort required to create a responsive layout is comparatively high. After all, the visitor's screen size must be determined and a suitable layout presented to them. And you have to actually develop this suitable layout for the different screen sizes. For example, a visitor accessing your website on a large monitor will be presented with a three-column layout. If, on the other hand, another visitor accesses your website using a smartphone, they will be shown a single-column layout.
Advantages and disadvantages of the variants
Before you implement a layout, you need to think about which of the layout types you want to use. I would like to briefly show you the advantages and disadvantages of fixed layouts.
- Design templates are certainly the easiest to implement here.
- If you stick to standard resolutions, there are hardly any problems with the display of the website.
- The layouts are easy to understand. (This is of course an advantage if you, as a web developer, want to explain a layout to a customer).
However, the fixed layouts also have disadvantages.
- Due to their fixed dimensions, they are inflexible and do not adapt to very small or large screens, for example. A lot of space is often wasted.
- They are subject to certain restrictions in terms of accessibility.
Flexible layouts also have strengths and weaknesses. Let's start with the advantages.
- The layouts automatically adapt to the browser window size.
- Visitors can therefore have a great deal of influence on how the website is displayed.
However, there are also disadvantages here.
- As a developer, it is difficult for you to control the results. Layout specifications can therefore only be implemented to a limited extent.
- The page content would have to be laboriously adapted.
- On large screens, the display of short texts can be "messy" as they are often only displayed in one line. (CSS offers corresponding properties such as min-width).
Another layout form represents a middle ground between fixed and flexible layouts. These are the so-called elastic layouts. Their main feature is the unit of measurement em. (Recently, rem has also become increasingly fashionable. In contrast to em, rem is always based on the root element, not the parent element like em).
The width and height of these layouts are flexible. The design of the page scales proportionally to the size of the browser window. On the one hand, this form of design is certainly the most complex when it comes to practical implementation. This is simply because you need to know in advance exactly how the elements will behave in a changing browser window. Elastic layouts are mainly used for websites with lots of photos and videos.
The advantages of elastic layouts:
- The available space is optimally utilized.
- The content is always displayed proportionally as large as possible.
But of course, elastic layouts also have their disadvantages.
- The design of these layouts is very complex.
- The implementation is also anything but simple.
Spoilt for choice
So you have to decide which of these variants you want to use. If you are still at the very beginning of your HTML/CSS development, I would advise you to start with a fixed layout. If you already have advanced knowledge in the field of web development, on the other hand, you should work directly with responsive layouts. You're on the right side here, regardless of which end device is ultimately used to access your website.
