Website layouts change all the time, and there are more ways than ever to style a layout, with many frameworks available to help simplify the code, whilst keeping sites looking fancy.
1. The first website (1991)
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.
The single column was popular for the next few years. At this point, the web was just used for sharing information, and styling was not even a thought. As long as the content was readable and accessible it was deemed quality.
The first ever webpage was very simple, a h1, some text and a few hyperlinks.
Here is a sample of what the html looked like, you can really see how things have come since the beginning!
You can view the original page here
<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area
<A NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval initiative aiming to give universal access to a large universe of documents.
<P>
Everything there is online about W3 is linked directly or indirectly to this document, including an
<A NAME=24 HREF="Summary.html">executive summary</A> of the project,
<A NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A> ,
<A NAME=30 HREF="Policy.html">Policy</A> , November's
<A NAME=34 HREF="News/9211.html">W3 news</A>2. Html standard (1994)
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.
Unfortunately I am not able to find the original source code for the site, but I was really interested to see how they aligned the links within the image!
3. Table based design (1995)
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 realised they could utilise 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 simpler 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, which used table-based layouts, and increased the amount of tables used in the web.
Geocities website from 1995, complete with animated gifs
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!
Here is some of the source from the above page, notice the heavy use of tables
<td width="480" align="left" valign="top">
<!-- -->
<a href="/web/19961022173245/http://www.geocities.com/cgi-bin/click_through/http://www.techweb.com/wire;techwire4.gif" target="_top">
<img src="/web/19961022173245im_/http://www.geocities.com/pictures/sponsor/techwire4.gif" alt="Click Me!">
<br> </a>
<p>
<a href="/web/19961022173245/http://www.geocities.com/">
<img src="/web/19961022173245im_/http://www.geocities.com/pictures/new/home_bar1.gif" border="0"></a>
<img src="/web/19961022173245im_/http://www.geocities.com/pictures/new/home_mast2.jpg" alt="Home Mast Image - See footer for links" border="0">
<map name="mastmap">
<area shape="rect" coords="0,0,142,19" href="/web/19961022173245/http://www.geocities.com/homestead/" target="_parent">
<area shape="rect" coords="17,24,141,38" href="/web/19961022173245/http://www.geocities.com/BHI/inform.html" target="_parent">
<area shape="rect" coords="21,45,141,58" href="/web/19961022173245/http://www.geocities.com/homestead/homedir.html" target="_parent">
<area shape="rect" coords="18,65,141,77" href="/web/19961022173245/http://www.geocities.com/BHI/new.html" target="_parent">
<area shape="rect" coords="17,84,141,98" href="/web/19961022173245/http://www.geocities.com/homestead/homeday.html" target="_parent">
<area shape="rect" coords="19,103,142,117" href="/web/19961022173245/http://www.geocities.com/BHI/about.html" target="_parent">
</map>
<img src="/web/19961022173245im_/http://www.geocities.com/pictures/new/home_buttons.gif" usemap="#mastmap" alt="Home Buttons -
See footer for links" border="0">
<br>
<img src="/web/19961022173245im_/http://www.geocities.com/pictures/new/hbar_blk.gif">
<table width="100%">
<tr valign="top" align="center">
<td width="300">
<b>* <a href="/web/19961022173245/http://www.geocities.com/homestead/" target="_parent">
Free Home Pages & Free Member Email</b></a>
</td>
<td width="180">
<a href="/web/19961022173245/http://www.geocities.com/BHI/ad_info.html" target="_parent"><b>Advertiser Information</b></a>
<spacer size="8" type="horizontal">
</td>
</tr>
</table>
</center>
</td>
</tr>4. Flash sites (1996)
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.
gabocorp website from 1997, it offered great visuals and audio, which hadn’t really been seen before
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, websites finally started to look awesome!
Flash started to decline over the years, and last year, just under 7% of websites were using the technology and, back in 2011, 28.5% of websites used some form of flash component. Flash was ditched mainly because of security issues which led to cross site scripting attacks
5. Dynamic html (1999)
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.
<a href="https://web.archive.org/web/19980711005941/http://www.bbc.co.uk/radio4/hometruths/">Home Truths</a>undefined</b>undefined<br>Nose around the nooks and crannies of the weekend.
<br>
<b>
<a href="https://web.archive.org/web/19980711005941/http://www.bbc.co.uk/cbbc/">CBBC</a>
</b>
<br>Packed with fun and all your favourite programmes.
</font>
</td>undefined</tr>undefined</table>undefined<form name="Bbcone" method="post" action="https://web.archive.org/web/19980711005941/http://www.bbc.co.uk/cgi-bin/openurl.pl">undefined<select name="link">
<option value="http://www.bbc.co.uk/home/today/">A selection of top BBC sites
<option value="http://www.bbc.co.uk/animalzone/">Animal Zone
<option value="http://www.bbc.co.uk/antiques/">Antiques
<option value="http://www.bbc.co.uk/radio4/anyqa/">Any Questions
<option value="http://www.bbc.co.uk/radio4/archers/">The Archers
<option value="http://www.bbc.co.uk/bluepeter/">Blue Peter
<option value="http://www.bbc.co.uk/bugs/">Bugs
<option value="http://www.bbc.co.uk/cbbc/">CBBC
<option value="http://www.bbc.co.uk/crimewatch/">Crimewatch
<option value="http://www.bbc.co.uk/cult/">Cult TV
<option value="http://www.bbc.co.uk/digital/">BBC Digital
<option value="http://www.bbc.co.uk/eastenders/">EastEnders
<option value="http://www.beeb.com/cgi-bin/beeb.cgi?location=www.france98.beeb.com/">France 98
<option value="http://www.bbc.co.uk/fullybooked/">Fully Booked
<option value="http://www.bbc.co.uk/education/health/">Health vs Health
You can start to see that developers started using forms, which would post back to the server (in this case calling a .pl script) to dynamically change the content returned to the user.
6. CSS starts to take off (2000)
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.
Lycos homepage in 2004
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.
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="srch-form-shop" class="srch_form">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="srch_form_bgcolor">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="srchActiveBg" width="100%" height="7">
<tr>
<td width="7" align="left" valign="top" class="srchCornerBg"><img src="https://web.archive.org/web/20060429185821im_/http://ly.lygo.com/ly/srch/tl_blue.gif" width="7" height="7" /></td>
<td width="100%"><img width="1" height="1" /></td>
<td width="7" align="right" valign="top" class="srchCornerBg"><img src="https://web.archive.org/web/20060429185821im_/http://ly.lygo.com/ly/srch/tr_blue.gif" width="7" height="7" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left: 7px;">
<form class="srch_form" id="form-shop" method="get" action="https://web.archive.org/web/20060429185821/http://r.lycos.com/r/bizrate_tab_product/http://bizrate.lycos.com/buy/superfind.xpml">
<input type="hidden" name="rf" value="lys302" />
<input type="hidden" name="query" id="query" />
<input class="textbox" type="text" name="keyword" size="55" id="query_shop" />  
<select class="select" name="cat_id" id="cat_id">
<option value="1" selected>All Departments</option>
<option value="10000000">Apparel</option>Developers suddenly started to include more and more css, although this started mostly inline, it eventually became more accepted that css should be derived by classes, and the bulk of the styling should be loaded in via stylesheets.
7. Popularity of mobile phones (2007)
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.
A screenshot from instacart from 2014
The outcome was the 960 grid system, and the 12-column division. Twitter bootstrap seemed to win the battle of the frameworks, but the downside was that web page designs often looked the same, or very similar (basically most websites had a look and feel of twitter). The upside to this was that suddenly building a layout for a page became much simpler!
Here is an example of the site above, notice the grid layout that was popular for a few years.
<form action="/web/20150610151816/https://www.instacart.com/check_zip_availability" class="zip-check-form" method="post">
<p class="message"></p>
<input autocomplete="off" class="check-zip-code" id="zip-code" maxlength="5" name="zip_code" pattern="[0-9]*" placeholder="Enter your zip code" type="text">
<button class="btn btn-warning btn-large" id="zip-code-button">Start Shopping</button>
</form>
<p>
Already have an account?
<a href="#login">Sign in</a>
</p>
</div>
<div class="step hide" id="signup-step">
<div class="the-eye-catcher" id="presignup">
<h1></h1>
<p></p>
</div>Other very similar sites worth a mention
Bootstrap example of the lyft site, back in 2014
8. Birth of responsive design (2010)
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 change the way it looks on a mobile, tablet and desktop.
Example of how a responsive site may look over different viewports
9. Present and future (now and future)
Although not much has changed in the last few years, new css measurement 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 separated.