I had already mentioned that modern websites need to be flexible. The particular point to note is that HTML pages without CSS definitions are already inherently flexible! If any change is made to the window size, the entire text on the HTML page is reflowed so that it is still clearly legible on most screens. Only the images retain their original size.
Only with CSS web layouts became static. Designers started off using fixed widths in pixels. Although this greatly facilitated the design and exact positioning of layout elements, it is also due to the situation that most designers have their roots in print design and have — consciously or unconsciously — also transferred this principle to websites: everything required its fixed place!
It has only been in recent times, with the spread of tiny smartphone displays, that we realized that this was the wrong way to go. Websites are not like printed documents and follow very different rules.
Therefore, the task when designing websites using CSS is to retain the flexibility of HTML pages, and even improve them further. The buzzwords in this case are Liquid Layouts and Flexible Images. And the best thing about it is that this is what we have already been doing the whole time!
In the previous exercises, in order to indicate most of the width specifications for both layout elements and images, we have used percentages. This means that these elements are automatically scaled when the window size is changed and are also adapted to smaller screens. Using additional details for min-width and max-width, we can restrict the width to a particular tolerance range.
For font sizes and height details we have used em or rem as the units of measurement. This allows these sizes to be adapted to the browsers default font size and they are also scaled accordingly when the font size is changed.
Carrying out this preparatory work for a responsive design is already half the battle. It is only when you cannot go any further that you need more radical layout changes using media queries.