Websapiens layout story
No, I will not talk about the Homersapien, instead I’ll guide you in a time travel about what have been happening on web layouts along these years and what the state of the art nowadays is.
I promise it won’t be (too) boring :)
And why am I having the trouble of writing this? Nobody wants to know about web history… We all want to know what is new and what will come next! But we’ll get there, patience my young padawan.
Much have been happening lately on web layouts, but why? We build layouts for so long, why are we still changing things and struggling about this? Well, you came to the right place! Let’s find out.
How it began
Once upon a time… web developers used to build these things…
These “things” were actually the first web pages being shipped. They weren’t that bad don’t you think? Be aware that we are talking about 90’s stuff here!
At this time pages were entirely built with HTML and nothing more! CSS didn’t exist yet and developers used all those…
<FONT face=Arial color=#0000FF size=6>
<BR>
<CENTER>…tags, and to add background images you had to use tables!
The funniest thing was the use of the so well known (at the time) Gif spacers. Which were little invisible gif images that were applied to add space between elements.
At the time, web developers knew that for headings you should use something like<h1>…</h1>, and for links <a href=…>…</a> and that was it! Pretty simple and straightforward.
But this made web pages a little bland and not so festive, and when designers came to the web they wanted to use their own styles, their own colours, typography, fonts… So they decided to start using images instead of plain HTML for contents like headings. This was pretty bad for search engines since we could no longer search the documents and you would be compromising the accessibility of your website because stuff like screen readers wouldn’t work properly. Besides, you would also need more bandwidth…
First stylesheet language
Because all of this we had the first stylesheet language, CSS. Which is still the language that we use nowadays.
CSS was the first language that instead of focusing on our pages structure, it focused the presentation of these. Developers could finally use HTML for structuring their pages and optimize the accessibility and search engines and use CSS to style their websites according to the designers needs.
Despite this, CSS had this mind blowing capacity of reusing code (styles) for multiple pages and elements on their websites because now they had selectors!
CSS Level 2
Well we could style our websites but… What about the layouts? (I know, I know… Layouts are what this article is all about, I didn’t forget it).
Pages back in time were pretty simple, you basically had a bunch of images and text wrapping them, but along the years a larger range of content types have been supported, new ways of organising information have emerged, more complex designs have been developed… And the float and clear properties, relative and absolute positioning and all those stuff weren’t enough anymore.
.sidenav .opt { display: table-cell; }table-cell for the rescue! CSS 2 gave us this pretty cool feature of building tables through CSS which is pretty good to organize contents side by side defining columns with the same height (Who’s the lucky guy who never had this problem?)…
But for many, many, many, many years… You couldn’t use them thanks to our buddy Internet Explorer (yeiiii!). That’s right, until IE version 8 table-cell wasn’t supported so web developers had to stick with the marvellous, tricky and fragile and annoying and hard to learn and hard to maintain and… float and clear properties and all that stuff.
And that’s basically where we were until very recently.
CSS Level 3
“And now what? We have IE 8, 9, 10, 11, Edge… They all support table-cell, what will you complain now about?” — toughs of a young padawan.
Now… I’ll be complaining about the way we have been thinking about web layouts and how CSS 3 comes to solve it!
Web layouts vs Print layouts
We have been thinking about web layouts like we think about print layouts, but guess what? They are pretty different. Different contexts, different targets, different issues.
On print layouts designers are in control of both the input and output. They know the content size, the size of the page. They can even (and sometimes) tweak the content to fit the page or a specific element. They can print their design and evaluate it, change it and fix it as many times as they want to, until they achieve the optimal design.
Well, sorry man… But this is not something we can do on web layouts. The user may not have the right fonts, there are different screen sizes and resolutions… people resize their windows, zoom their pages in and out and… the worst, you never know how much content will fill your layout. Content comes from so many data sources, most of the time content generated from users. So you simply cannot try to guess how much content will be printed.
And that’s exactly what we have been doing until today. Trying to guess how much room should an element occupy on the screen (20%, 500px, calc(100%-250px))…
Our layouts have to be adaptable, flexible and automatic. Not based on assumptions and guesses.
Well, CSS 3 has a different approach from the previous versions. It is shipped into modules (modules, modules everywhere) and each one of these can evolve at their own pace.
One of these modules is the layout module, this module is focused on changing this approach and in turning layouts more aware of the content size instead of the viewport dimensions.
Within the layout module we have two submodules, the CSS Grid Layout and Flexbox!
These are two great layout modules that make element alignments and responsive design something pretty clean and easy to do.
They are not the simplest things to learn in CSS but it is like ridding your bicycle, “Once you get it, you’ll never forget it” and once you start using these to build your layouts you’ll never even think about the table-cell and float “solutions”.
The end
And this is the story that I had to tell you. I will not describe these two modules in this article. They deserve a lot more attention but I have a shiny new course at Udemy about Flexbox.
It teaches you all there is to know about flexbox so you can build layouts more easily, with less code and with cleaner and more maintainable solutions.
Take a look at it and give me your feedback please :)