In the early age of the Web, websites had very basic layouts.
The contents were very simple, based on a concept of page similar to that of pages
of a book: titles, paragraphs, and some images or tables that usually occupied a
single “block” or paragraph of the browser window.
With the advent of more advanced contents, web page layouts became more complex, with the addition of headers, columns, menus, etc, more similar to a newspaper or magazine.
At that time, there were very few and standard screen resolutions:
- 640x480
- 800x600
- 1024x768
There was a practice of putting an alert or small banner at the bottom of each page, saying something like “Best viewed at 1024x768”.
Tables were the main resource for page layouts, but they often created important readability issues, as the contents of tables relied on fixed size-based elements: font sizes, and images.
A page created for a smaller screen would have shown an ugly layout, with weird
empty spacings, and text blocks being too wide or too tall.
A site designed on bigger screens would have forced the user to scroll too much
in both directions, or caused text blocks with too narrow widths, making them
very annoying to read.
In early 2000s, the W3C began suggesting usage of CSS for layouts, with some issues known at the time of the “browser war”: using dynamic elements meant that the web page could be shown at its best by limiting the requirement of scrolling and making the whole browsing experience much better.
In the last decade of Web Design, the term “responsive design” has become common
and its usage is almost mandatory nowadays.
The concept is that a website should be able to adapt its contents no matter the
screen it’s being shown, and that’s because there’s no standard screen resolution
anymore.
This concept is mostly predated by the idea of layout managers in almost any UI toolkit that emerged in the 90s: the contents of a window should adapt to the screen in order to take advantage of all the available space.
Continue reading...