History of webpage layouts

1991 - The first website

Back in August 1991, the first website was a simple text-based page with a few links. The first ever webpage served only to tell people what the World Wide Web was all about. Web pages that followed after this were very similar, and were entirely text based, with links to other pages and always featured single column designs. A basic version of html was born, but was not very widely used.

1994 - Html standard

But In 1994, when the World Wide Web Consortium was established, html was declared as the standard for marking up web pages. There was a general worry, as the web gained popularity, that companies would create their own versions of browsers, and languages to describe web content, and it would be non standard and difficult to evolve, which is one of the main reasons the html spec was created. Html back then was not very advanced and featured elements such as anchors, images and headers. Tables came later on, but were not there from the start.

1995 - Table based design

In 1995, table-based layouts became popular and gave web designers more options for creating websites. Table markup was, and still is meant for tabular data, but designers quickly realized they could utilize it to give structure to their designs, and create more complicated, multi-column layouts.

These designs grew in complexity, incorporating background images to give the impression of simplier structures than the actual table being used when looking at the code. People also used spacer gifs to control whitespace of web layouts.

It wasn’t much later that WYSIWYG applications were started to be made (I remeber how horrible dreamweaver was!!), which used table-based layouts, and increased the amount of tables used in the web. WYSIWYG editors often created tables so complex that they were very difficult to interpret the actual layout, such as tables with rows only 1-pixel high and hundreds of cells). Tables were the only real way to create more complex designs, such as multi column layouts, and they certainly evolved web page designs!

1996 - Flash sites

In 1996, the first flash sites started to appear. It started with very basic tools and a timeline, and progressed to have powerful tools to develop entire sites. Flash presented a ton of options beyond what was possible with html. Flash also used actionscript, which is based on ecmascript. To create complex designs in flash, you didn’t have to rely on very complex table structures or use spacer images. It made it possible to create complex and interactive sites with animated features. It felt like there was a massive jump at this point, because the change was so drastic!

1999 - Dynamic html

Towards the end of the 90s, came the popularisation of dhtml techniques. This consisted of several web technologies such as JavaScript and server-side scripting such as classic asp and php. During this time interactive web pages started to appear, that allow users to not only read static content, but also to interact with web content.

2000 - Css starts to take off

In the early 2000s, css designs started gaining popularity. While css had been available long before then, there was limited support for it in major browsers and many designers were unfamiliar with it. There were many benefits of using css based designs over table-based or flash designs. The first being it separates design elements from content, which ultimately meant that there would be greater distinction from the visual aspect of a web layout and its content. Css was, and still is the best practice for laying out a web page, where table-based layouts are not.

Using css reduced markup clutter, and made for cleaner code in web layouts. Css also makes it easier to maintain sites because the content and design elements are separated. You can change the entire look of a css-based site without ever having to touch the content. Document sizes of CSS designs are generally smaller than the alternatives, which translated to an improvement in page response times. This is also helped by the fact that css is cached by the user’s browser so that subsequent page views would be faster-loading.

2007 - Popularity of mobile phones

As mobile phones accessing websites became more popular, in 2007 there was a rise in using grids and frameworks because all the different layouts for different devices caused content-parity problems. Speed was also an issue, as loading a lot of content uses up a lot of mobile internet data. The first step was an idea of column grids. The outcome was the 960 grid system, and the 12-column division. Bootstrap seemed to win the battle of the frameworks, but the downside was that web page designs often looked the same, or very similar. Suddenly building a layout for a page became much simpler!

2010 - Birth of responsive design

Towards 2010, a movement happened that challenged the existing approach, by using the same content, but different layouts for the design. This was called responsive web design. The main benefit here is the content parity, meaning that it’s the same website that works everywhere, on all devices, with a similar look and feel. Frameworks evolved and started to be able to specify the layout at different view ports (col-4-medium etc.). Media queries also helped to hide and show various parts of a page or chnge the way it looks on a mobile, tablet and desktop.

Now - Present and future

Although not much has changed in the last few years, new units exist, like vh, vw (viewport height and width), which allow much greater flexibility to position elements. Flexbox is another concept which is part of CSS, and it allows you to create layouts and modify them with a single property instead of writing lots of code and hopefully soon the css built in grid system will become more widely used, and revolutionise the way we create layouts overall!

One other thing to mention is the introduction of web components. Web components are a set of elements bundled together, and introduce an easier workflow, where elements become building blocks that can be reused and updated separately. A good example of this, is react. Web components usually have custom elements, work with a shadow dom, use html templates, rather than combining design and functionality, and imports which allow components to be easily seperated

Written on March 4, 2018.