A Brief History of Web Layouts
The weeb has been around for almost 30 years and for that time it involved from simple documents to full-fledged apps. In this article, I am going to cover some of the main events regarding Layout on the Web:
No layout, just simple documents
I am not sure if Tim Berners-Lee envisioned the web as it is today, but when he invented it many years ago it all started as a document management system or put it simply a way to share documents between scientists in CERN. And web pages were looking more basic than nowadays’ word documents
Tables start ruling the web
The first way of creating any layout on the web was using tables. Obviously was not very flexible, however, it worked well for simple layouts with few columns, and back then most of the web was simple: header, main content, two sidebars and a footer.
Welcome to CSS
Practically CSS 1 and the Table element arrived around the same time as a spec, but for a long time, no one was using CSS for creating layouts, until the early 2000' when CSS floats start picking up and developers transitioned from table to float.
The rise of mobile web
With the rise of smartphones, the web needed to adapt to smaller screens, responsive design become a thing and developers started to use media queries to switch layouts and content for mobile users. A new way of thinking emerged, people start talking about Adaptive and Responsive design, and a few years later the Mobile-First approach become a norm.
Grids
Fallowing the mobile rise, the designers start putting more effort into organizing their layouts, and how and when the layout changed. At that point, they utilize the grids in Photoshop which was reflected in developers who also started using Grids
CSS libraries like 960grid, Bootstrap and Foundation quickly become popular. They provided easy to use responsive Grids.
Flexbox
Around the time mobile web took, another very important milestone had happened: the first draft version of Flexbox. And soon the browser vendors start implementing it. Flexbox quickly become popular, it also required a new way of thinking but as the name suggested it was way more flexible than everything we had before. Once flexbox was in all major browsers, the popular CSS/web frameworks like bootstrap replaced float-based grids with flexbox ones.
CSS Grid
By this point was obvious that the web was moving into grids, practically every new project was using some kind of it ( based on floats or flexbox ).
It was a time grid to become a native into the browsers. We have seen this pattern many times in the past when a library becomes popular for example jQuery and everyone starts using it, the browsers add the same functionality natively, so this is what happened with the CSS Grid. It took a while for specifications to be written and agreed but after a few years ( or maybe more than a few since the first CSS grid implementation was in IE11 ) it arrived in the browsers, and probably for the first time in the web history such a big and fundamental feature was released by all major browser in a span of a month ( March 2017 ).
That’s all in a brief story, what the future holds we don’t know yet, I hope the web keeps involves and makes things easier for its creators and consumers.
Meanwhile, keep creating wonderful experiences on the web.
