Although fixed layouts are still used to deliver some types of websites, for all intents and purposes, the use of liquid layouts as a single solution to the delivery of a design across screens of different sizes is outmoded. Modern websites are more likely to use a responsive or adaptive approach, both of which incorporate it.
1. Fixed Layouts
In fixed layouts (also known as fixed width or static layouts), the sizes of elements and their position remain the same, irrespective of screen size or change in browser width. So, for example, if the width of a page is 960px, then it will always be displayed as 960px. Sizes of elements are specified in absolute units, such as px. Using the fixed layout approach used to be the only way Web pages were built. It meant that a page that looked properly composed and professional on the screen used to create it might appear poorly designed on screen sizes that are widely different. For example:
- Content might be cropped on smaller screens.
- Horizontal scrolling might be necessary in narrower browser windows.
- There might be large gaps around the edges of pages on large screens.
- Text might look too small on higher-resolution screens.
The approach still may be suitable for when targeting specific class of devices and users who seek to perform only a specific task, such as booking of flights. It is unsuitable for when a website provides diverse types of information, which are likely to be viewed on different devices. Figure 21.1 shows how a fixed layout is cropped when displayed in a smaller window than intended.
2. Liquid Layouts
Unlike in fixed layout, the sizes of elements in liquid (or fluid) layouts do not remain the same when the size of the screen or that of the browser window changes; instead they stretch and contract accordingly. A liquid layout is typically achieved through specifying the sizes of elements in relative units, such as em and percentage. The obvious advantage of liquid layouts is that they adjust to screens or browser windows of different sizes, doing away with the need to create different versions of the same design for different devices. The disadvantages become apparent at very small or very large browser widths. On small screens, a multi-column layout can become too crowded when contracted too much, making content difficult to read. On large screens, the browser window can become too wide, resulting, for example, in lines of text that are much too long and again difficult to read. Figure 21.2 shows how a liquid layout is squeezed when displayed on a smaller screen.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.