A brief history on web layouting
The pure genius of Bootstrap math.
Every new product or technology tries to mimic another one to pick up the users. Think about it, what does the desktop of a computer has in common with an actual top of a desk? Well, you can’t see the legs on a digital desktop.
What about the term folder? Why is it called a folder and not a drawer? Do they both store items in them? Maybe it’s because people who named it liked the metaphor of filing away the files gathered in folders to be stashed away.
What about the wallpaper of a desktop, that is ridiculous. Why would you put wallpaper on your actual desk?
Email? Like electronic mail, why not telegraph? Wouldn’t it be more reasonable to name it e-telegraph, after all, it is closer to the email in terms of transportation. The wire goes ‘beepety boopety beep beep’.
Now let’s jump to the web. The metaphor of it is of course a book. It’s all about the website, homepage and bookmark. Unfortunately like all new and fresh creations, it is done by pioneers, who are resilient enough to face the challenge and stubborn enough to stick with it until it becomes a success.
In this particular case, the design of the internet is mostly based on the thoughts of a technical person. I imagine them looking at a book and copy what they see: look there is a header, there is another, here is an image and there is text. Sometimes the text runs in one column, sometimes there are several. Let us put it in and call it a day. (This is of course just an idea I have, just out of my experience with “designed by developer”. Please don’t kill me)
This approach is perfect for the requirements of a book, the page sizes are fixed and the text setting is done once and printed over and over again. The developer did what had to be done and they did a great job with it.
The issue is all about dynamic and unforeseen page size. Our websites are infinite sheets of ‘paper’ to fill. We stuck with scrolling vertically but not horizontally. When I started with my first computer the highest resolution was 1024x768, more common for desktops were 800x600 and for games … let’s just say to run them smoothly sometimes we had to go to 320x240. Have you seen the worst resolution that YouTube has to offer for videos, guess where what the 240p stands for.
Back to topic: How do you design for an unknown medium size? If you like to see how bad the simple websites looked back then, just go on Wikipedia. Wikipedia is a good example of non-design, the text length is terrible to read, the layout is unappealing and they just vomit the information on your screen and call it a day.
As the popularity of the internet grew, companies started to get classic print designers to the table. The problem is that designers don’t know how to code, but coders don’t know how to design. Both speak about the same thing for hours without coming to an understanding.
Designer: I want a headline, three columns, in the two left columns an image followed by a text below and this text should flow to the right column.
Developer: What do you mean with text runs below and THEN to the right column, we can’t do that.
Designer: What do you mean, you can’t? It’s basic layouting, don’t tell me this almighty new media is that limited! How could they copy the homework done by print media and get this basic functionality wrong?
Disclaimer: I will omit the existence of Table and Frame layouting, these were dark times of the web.
What was the basic website capable of?
According to: https://simplecss.eu/css-history-brief-overview.html
CSS (1996) allows the user to select font style and size and change the colour of the text and background.
CSS2 (1998) has capabilities that allows the user to design page layout.
CSS3 (1999) allows the user to create presentations from documents and to select from a wider range of fonts including those from Google and Typecast. Uniquely, CSS3 allows the user to incorporate rounded borders and use multiple columns. […]
1996 Well that’s kind of disappointing, the first thing they thought of: was font style, size and colour of text and background.
1998 Now we are talking.
1999 Yay! Columns! Problem solved, right?
Wrong!
Columns were fully supported caniuse.com about columns:
- Safari in 2008
- Android Browser in 2009
- Firefox & Opera in 2011
- Internet Explorer 10 in 2012
- Chrome 50 in 2016
What was easy to do? Columns exactly like in the newspapers or books. What is still hard to do, creative layouts that survive the fragmented market of resolutions and pixel densities.
Easy with columns: Newspapers and “regular reading flow”
Impossible with columns: Creative layout
Until now I only spoke about layouting text and images, but what about more complex elements? What about a gallery with illustrations and caption text?
Easy with columns: Vertical flow of images like in the newspaper
Also, notice the unpredictable breaks of the image description text. By logic, they should stick together.
Impossible with columns: Horizontal flow of images
Floating to the rescue! (Literally)
Floating was basically telling HTML website elements to stick to the left OR the right and stick the following elements in the same direction. You had to tell an element to float
float: left | right; and if your wish was to stop doing so you had to do a clear
clear:left | right | both;With this, we had the power to flow images and captions bundled to the left and if a line was full, it would break to the next line. Let’s add some guides to demonstrate the upcoming problem. As a developer, we solved a problem and created a new one. Oh and there is a headline, everything has to be aligned!
Well, they stick but without any space in between, let's add some space to the bottom.
Nice, now let us add some space to the right of each image to give It more breathing space.
Proud as a developer, we show it to our designer, who now requests a full-width image below the headline. Our designer also wants the gallery to stretch and be aligned with the outer dimensions of the image below the headline.
There are several approaches to accomplish it:
- We need to know when the line is full and remove the margin in the last image so that it can be aligned to the right. The issue here is, we can’t know the width of a screen beforehand to divide it accordingly.
- We could use a percentage-based approach and every element say 33.333%, but there would be no space in between the elements anymore. We could create the gap also using percentages, but then our designer will simply execute us because at some point a 3% gap will become neglectable whitespace.
- We could count the elements and use classes to signal when to remove the padding. Let’s say every 3rd in a row should not have the padding on the right on a widescreen, as soon as we resize the window, we need to evaluate the width and readability of content. Instead of 3 images next to each other at some breakpoint, it becomes two: you remove the padding on every 2nd element and add it to every 3rd once again … you see a lot of consideration for such a simple layout task.
- The other option most people used was JavaScript: this helped in several ways. First, we could actually know how wide a window is, second we could subtract a fixed amount of pixel. But there is a severe drawback here, JavaScript is resource-hungry and needs to be recalculated every time the window is resized and, believe it or not, JavaScript was considered Evil around 2010. Too many people abused it, some companies even disabled JavaScript by default.
The best approach was to add the needed padding to the elements at all times, but you had the issue of double paddings between the elements, given they are calculated correctly. (I’m looking at you Internet Explorer)
All this is already difficult enough, let’s add the rise of responsive design and screen size fragmentation, thanks to mobile phones. Many jobs in this time were basically: here is our website “best view in 1024 and firefox”, make it all responsible and mobile-friendly. Design? What do you mean by design, just make our design mobile!
The pure GENIUS behind bootstrap!
And other Frameworks, they’ve solved it similarly.
They solved so many problems at once, they introduced a design system with buttons, input fields etc. They solved the responsive design leg-work issue, it was “given” to the devs. The most important thing is they solved the layouting issue with absolute top-notch brainpower math, a simple but genius combination of the tech standards and limitations.
They achieved it by creating a clever system to nest different div elements:
- The first outmost element is a container with 15px padding
- The row has a -15px margin, to cancel out the padding of the col-* elements inside
- Every col-* elements use 15px padding once again to align the elements.
This made everything so much easier back then, the only thing you needed to teach your designer was: 30px gap, take it or leave it. Well kind of, because you were able to calculate it with different margins and pattings but they were set in stone as soon as you generate your CSS file.
Designers had to learn to work with the same gaps everywhere, luckily the imagination and implementation of this framework was the hard part, forcing the designer to obey grids is a piece of cake … am I right?
Objection! What about the flexbox, grid layout and the calc() possibility?
- Flexbox layout was fully supported by Chrome in 2012 and the last one to adopt was Firefox in 2014
- Grid Layout is supported by the browsers since 2017
- The beautiful calc() method in CSS is supported by Firefox since 2011 and the last one to adopt was Internet Explorer by simply releasing Edge find 2015 and switching to the same computation kit (WebKit) as Chrome/Safari. Internet Explorer 11 doesn’t support it fully 2014.
The biggest issue with this mathematical approach is to think in strange numbers. I’m not going any deeper into responsive design.
Imagine telling your designer to think in col-6 if they need 50% of the space, what about col-4 for 33%. For 25% you need to use col-3, you see the point (pun intended). Basically, we told our designers to forget how they designed previously, no more pixels, only percentages.
If you are an aspiring Web-Designer and feel lost at this point, these numbers were chosen to be dividable by as many numbers as possible to represent percentage values:
- col-12 = 12/12 = 1 (100%)
- col-9 = 9/12 = 3/4 = 0.75 (75%)
- col-6 = 6/12 = 1/2 = 0.5 (50%)
- col-4 = 4/12 = 1/3 = 0.33 (33.3%)
- col-3 = 3/12 = 1/4 = 0.25 (25%)
- col-2 = 2/12 = 1/6 = 0.16 (16%)
- col-1 = 1/12 = 0.08 (8%)
Why so complicated? Because it was conceived in the “Wild West” of the World Wide Web, it had to be robust for the times to come and fail gracefully on yet unsupported platforms.
Today Bootstrap is using all the modern fancy technology but has to stay compatible with older releases.
Why is bootstrap and other frameworks still relevant today?
An actual quote from a coworker when we discussed the usefulness of layout frameworks in 2019 :
“I could create a grid and layout system like bootstrap myself in one day”
Yes, you could, but it would be not as robust as Bootstrap, nor will you document it for the future generations to come. You will leave the company and leave the mess you create behind for the next sucker to take your place.
Bootstrap is fantastic because it is well documented, debugged for over a decade and developed by many talented people. You can literally harvest the effort of thousands of manhours to kickstart your project and keep it up to the web standards.
The other gigantic benefit is that you reduce onboarding for new developers by using this standard. They simply take a course or read through the docs and “hit the floor running” as the recruiter like to say. There are also already many senior developers who used Bootstrap from the beginning and know the in and outs of it.
Many “self-made layout systems” I encountered in my line of work, were a hell to read through and looked like Frankenstein monsters because people just attached another class-1, class-1-special, class-1-mobile-form-mandatory. Even a senior will need months to get into such a system and years to know all the pitfalls.
Should you use a system like Bootstrap?
YES, for your sake and the sake of your project. Is it the best that is out there? I don’t think that I know all of them in-depth to make a final statement but I fell in love with the way angular/flex-layout works. They write all relevant layout code in the HTML template, you can see how this whole thing will behave just by looking at the tags inside of a div.
fxLayout="row"layout everything in a row except if the screen is extra small then as a columnfxLayout.xs="column"
Another neat thing is we can mix pixel, percentage and define dynamic gaps in one single file. There is no need to open up a central CSS file to see how the layout works, there is also no need to fragment the CSS file with classes and layouts used only once in the project.
Just look at its beauty and simplicity to use: https://github.com/angular/flex-layout/wiki/API-Documentation
But this topic is better left to explore for another article.
