The History of Web Layouts: from Renaissance to Virtual Reality

Back in 1993, the first website launched: a text-only site by developers at the European Council for Nuclear Research (of all places). It was a huge step in technology, the catalyst for a cultural revolution and really, really boring to look at. Design options were not readily available for the first ever website but have since become that which separates professional online content from the amateur and bog-standard.

In this article, we’ll be taking you through history, to the essential developments in design that impacted web design how we know it today. We go way back; much further than the creation of the first website.

500 – 1900 AD

As early as the medieval times, optimal proportions have been used to arrange handwritten text on pages using the Villard Diagram. With the invention of movable type in the mid-1400s, those proportion ideas were adopted for typesetting and page design, resulting in the Print Revolution. Information archived and shared meant that the scientific and artistic communities could develop theories that arguably played a key role in the development of the Renaissance and the scientific movements of that time.

villard diagram web layout
The Villard Diagram

In the early 1900s, the analysis and intellectualisation of these rules led to the development of a new layout guideline. At the time, product advertisements would often be strewn with information that was very difficult to absorb. As a solution, some of the world’s best designers, including Josef Müller-Brockmann, came together to develop the ‘International Style‘ grid system.

villard diagram web layout
Grid Systems in Graphic Design (Image via Abduzeedo.com)

The modern grid system allowed for greater clarity in visual communication and emphasized hierarchy, structure, and rhythm of content. To this day, the grid system serves as a framework with which a designer can present information in a rational, easy to absorb manner.

1990s

The 90s saw a temporary lull in grid-based design, as alternative styles from the likes of David Carson and Paula Scher became more popular.

This was a reaction against the entrenchment of the grid, particularly its dogmatic use and association with corporate culture. The result was many designers rejecting the system in favor of a more organic, stylistic and radical structure.

david carson grid graphic design

But with the rise of computer-based design – especially those for the web – came with it the return in popularity of grid-based design. The radical style of the 90s would serve to hamper the consumption of information because grids have a practical use in web design.

Coding/lining up elements to definitive X or Y coordinates (i.e. column or row) is far easier than having to arrange elements in a bespoke, case-by-case basis. By the late 90s technology developed to the point where browsing websites had mass appeal.

In fact, the rise of the web grew so quickly, development on making the production of websites easier and more professional increased exponentially. From a designer perspective, the critical development was Flash.

Flash (ahh-ahhhhhh) allowed for elements of the web page to animate and react to users in ways that clipart couldn’t compare to. These included animated buttons (rather than simple hyperlinks) and even games. You could argue that Flash was the real birth of user interactivity on the web.

2000s

Back in the old days, developers only had HTML to define text structure. They could define a paragraph (<p>) or headline (<h1>) and the like. Options were limited for design: developers were using HTML in inventive – albeit not always strictly correct – ways to layout pages and lots of HTML only worked on specific browsers (“You need **** browser to view this page”, remember that?).


The Browser Wars (via thebrowserwars.tumblr.com)

Eventually, Cascading Style Sheets (CSS) came along to fix the problem: it would work in conjunction with HTML to offer a wealth of layout and style options for designers that function in all browsers.

Another of the developments in the 2000s was the introduction of drag and drop builders and WYSIWYG (‘what you see is what you get’) editors. They meant it was far easier to layout a web page visually. These tools allowed designers with next-to-no coding experience to create web pages using familiar, desktop publishing style tools.

This made the workflow much more efficient, as any problems or changes could be identified and addressed quickly. This is actually why WYSIWYG was developed in the first place but was later hijacked by kids wanting to blog about their pets or something equally uninteresting.

Professional web developers no longer use WYSIWYG (some never did), since they are notorious for ‘bad markup‘ (incorrect and bloated code), which in the long run would cause more problems than a WYSIWYG editor offered to fix.

But the most significant progress in the 2000s was the release of broadband internet to the masses. With the ability to transfer information at a much faster rate, designers were less restricted by how much information their page could contain. Coding became more sophisticated, which in turn offered more methods and flexibility for developing a website. Developers were able to build websites with more variety, giving designers more options, and consequently more control, in their work.

2010s

In the past six years, the key development has been responsive design – allowing flexible grids for different device screen sizes. The hyper-popularity of smartphones and tablet devices means that any website we build needs to have the capacity to adapt to different screen sizes.


RWD Screen Sizes (via invisionapp.com)

From a designer’s point of view, the process of design to development has been streamlined by the ability to use code for elements or shapes rather than having to produce and upload graphical elements to achieve these.

Previously, we would need to use images for certain effects, for example, rounded corners on boxes or colored gradients, that would have little-to-no flexibility. However, coded elements – often specified using CSS – are flexible and can adapt to changes in screen or browser window size.

This saw the introduction of ‘fluid’ grids, meaning that they call for page element sizing to be in relative units, like percentages, rather than absolute units like pixels or points. With more options and flexibility for designers also came more responsibility. Extra attention now needs to be given to the page content and its hierarchy, as it will ‘re-flow’ depending on the device.

The Future

The common thread for design over the last several hundred years are grids. As technology and the mediums through which we absorb information progresses, the grid system moves right along with it. It develops and reacts to technological progress, and will continue to do so while we continue to engage media in new ways.

When VR headsets become the standard method of interactive media, or even if we figure out a way to develop holographic images, the grid system will change and adapt, yet will always be there to assist users in absorbing information.

Comments

  • Michael W

    “When VR headsets become the standard method”
    Quite an ambitious claim. Call me short-sighted, but I never see a time that VR will replace monitors. Sure, we will need to ensure websites are compatible, but there is no way a VR headset would fit into my programming workflow, sorry.

  • Superb….post. Nicely put all the info.
    Thanks :)