History of Web Layouts

Coding (Html5)

A time journey through the different tecniques and ideas that graphic designers have created to improve our user experience, spreading the use of div and span
 
/img/blog/history-of-web-layouts.jpg

Here we are!

 

 

 

 

The last lesson of the HTML basics, 

Now it's time to have a journey through the time exploring the history of the Web Layouts.

 

 

We will also see how to use the div and the span tag to create them

 

 

 

 

 

Are you ready?

 

 

 

 

 

In the previous tutorials on the fundamental elements of HTML.

 

 

I have illustrated how and when to use simple tags.

 

 

I used them to add images, links, edit the formatting of a text, creating lists, etc..

 

 

Essentially, you are already able to build your first HTML pages.

 

 

 

 

 

They were easy, aren't they?

 

 

 

 

 

All they have a proper functionality.

 

 

for example, if you want a paragraph, understand which tag to use is straightforward.

 

 

When you want to add an image somewhere in the content there is the img tag there for you.

 

 

 

 

 

Now, things are getting a little bit tricky.

 

 

Do not worry as soon as you get the concept, using these two tags will become easy as much as drink a glass of water.

 

 

 

 

 

To explain what a div and a span are and what they do, I would love to bring you on a journey that starts 26 years ago.

 

 

 

 

 

So, let's pack up and go.

 

 

 

 

 

 

 

 

html history div infographic

 

 

 

 

 

 

 

 

Copy the following code to embed this infographic on your website.

 

 

 

 

 

 

 

 

 

 

 

 

 

As you see it was not easy to come to nowadays design.

 

 

 

 

 

Now you have a brief idea of what happened,

 

 

Let's examine every important historical moment.

 

 

 

 

 

 

 

 

1990 Time to pack - The beginning of Web Design

 

 

 

 

 

As we know, in the early 90's that the genius mind of Tim Berners-Lee created the first ancient version of HTML.

 

 

Here is the article on the Basics of HTML if you missed it.

 

 

He and several other colleagues started to develop a software that allows the content, written in HTML, to be used and shared.

 

 

 

 

 

Exactly on December the 25th 1990, they published the first web browser.

 

 

They baptized it as WorldWideWeb,

 

 

Don't need to say that it created some confusion with the World Wide Web.

 

 

(to be clear the software was after renamed to Nexus).

 

 

 

 

 

You can find more interesting information on the WorldWideWeb on the W3.org.

 

 

 

 

 

Before that moment and for a couple of years forward, the web design consisted of a plain dark background and text with almost no formatting at all. 

 

 

 

 

 

There is not need to add that working in such a conventional environment was a pain for whoever had at least a drop of extravagance in his blood.

 

 

 

 

 

 

 

 

1995 The stopover - Discovering the tables

 

 

This dark moment of Web Design came to an end when David Siegel, an author, and blogger, published the book "Creating Killer Sites".

 

 



In his book, he showed a way to manipulate HTML tables and cells in order to create different layouts that could then be used by web developers.

 

 

 

 

 

At that time this technique was revolutionary because it meant the exit from the schemes dictated by the limits of the language and start to create an actual visual structure on how the data could be seen.

 

 



The job, of the primordial version of the role that we currently call front-end developer, was to create tables, in which then the back-end developer could simply edit the aspect as he needs and shown the data in a graceful way.

 

 

Even if, this new principle to structure a web page was completely innovative, it wasn't all peaches and dandelions.

 

 

 

 

 

In fact,

 

 

The sensation wasn't, quite fulfilling because the purpose of the tables was, and still is, to store data, which implied errors and lots of stress on behalf of the programmers to make things properly done.

 

 

 

 

 

On the other hand, it was the first, rough, dirty example of a grid, it has represented the dawn of a new era.

 

 

 

 

 

 

 

 

2007 A new way to surf - The mobile's advent

 

 

mobile ara plane flat design web

 

 

 

 

 

 

 

 

When the firsts mobile devices arrived at the global market they amazed the entire world.

 

 

Smartphone gives the opportunity to navigate online. from everywhere at every moment.

 

 

 

 

 

Using a Smartphone brought new meanings to the word freedom.

 

 

 

 

 

For many developers, there was another side of the coin.

 

 

The question was: how to display all that content, until then only devised for bigger screens, into a pocket size format?

 

 

 

 

 

Looking for the solution, the first step accepted by the majority was to improve the reliability of the grid.

 

 

 

 

 

After several experiments, many developers decided to adopt the 960 Grid System.

 

 

The creation of websites based on 12 columns was a daily basis routine for all the front-end developers.

 

 

 

 

 

The 960 Grid System consisted of creating the structure of precisely 960 pixels wide.

 

 

This number was chosen because it fit within the average smallest monitors' resolution of 1024x768 pixels.

 

 

 

 

 

Besides, 960 is divisible by 2,3,4,5,6,7,10 and so on, making it a flexible number to work on when dividing the layout into columns.

 

 

 

 

 

It was the perfect number.

 

 

 

 

 

Now that the biggest problem was solved.

 

 

The foundation of the relationship between mobile and desktop screens have been layed.

 

 

The second phase was an attempt to make the work easier by speeding up the developing process.

 

 

 

 

 

To achieve this goal standardize as many visual elements as possible was necessary.

 

 

 

 

 

This was the exact reason why in a while the web was stuffed of standard buttons, navigations, forms and so forth.

 

 

Basically, all this component looked the same but they were easy to use and, most important, out of the box, 

 

 

 

 

 

The winners of this homogenisation process were two front-end framework that you have already heard about.

 

 

Because they are still incredibly popular in these days.

 

 

 

 

 

Did you guess?

 

 

 

 

 

I am talking about Bootstrap and Foundation.

 

 

The first was studied and published as an original internal project inside the Twitter offices.

 

 

The guys at Zurb are the creators of the latter.

 

 

 

 

 

 

 

 

 

 

 

Nice story but where are we going?

 

 

Wait a minute,

 

 

Let's stop our trip for a second and let's focus on the purpose of it.

 

 

You are here to learn about the div and span elements,

 

 

They are really useful now when creating a layout, but let's start from the basis.

 

 

 

 

 

 

 

 

Here we go,

 

 

According to the experts in the sector, the div element has no special meaning at all. 

 

 



It represents its children.

 

 

 

 

 

It doesn't even have supported attribute in HTML5.

In a nutshell, a div is just a blank box created to be filled up.

 

 

 

 

 

 



     

This is the title of this sector



     

Like a proper content even this has is own paragraph



     

Here's another paragraph right here.



   

 

 

 

 

 

 

It is possible to add as many divs as we like within a parent div to create more advanced structures.

 

 

 

 

 

 



     

This is the main title of this parent sector



     

 

 

 

       

This is the title of this first child sector

 

 

 

       

This is a paragraph in the first child sector

 

 

 

   

 

 

 

   

 

 

 

       

This is the title of this second child sector

 

 

 

       

This is a paragraph in the second child sector

 

 

 

   

 

 

 

 

 

 

 

 

 

 

So, why we started so far to arrive at this point? 

 

 

 

 

 

The answer is the CSS display property.

 

 

 

 

 

Every element in HTML occupies a space in the document.

 

 

Now, we can change them trough CSS but, In the old times, they were essentially block and inline.

 

 

 

 

 

Block:

 

 


  •     
  •  

  •     

  • -

     

  •     

  •  


  •     
  •  





    •  
  •  
  •  
  •  

 

 

 

 

 

Inline:

 

 

 

 

 

 

 

 

 

Block means that the element uses the entire space available.

 

 

Depending on the width of its parent the siblings' element will always appear below, in a new line.

 

 

 

 

 

Inline, as you can guess, means exactly the opposite.

 

 

The elements use only the space they need.

 

 

If the elements are short enough there will appear more elements in the same horizontal line.

 

 

 

 

 

 

 

 

Nowadays there are plenty of different values to play with, such us none, inline-block, flex, table, inline-flex, table-caption etc... 

 

 

 

 

 

These values are the keys to the success of the div element.

 

 

Through them, we can hide the elements, wide them, short them, put below or above siblings.

 

 

Everything the fantasy of the developer need.

 

 

 

 

 

Have a look at the CSS property to make everything a little bit more clear.

 

 

Value Description
inline Default value. Displays an element as an inline element (like )
block Displays an element as a block element (like

)
flex Displays an element as a block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
inline-item Let the element behave like a
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a elementelement element element elementelement element
table-caption Let the element behave like a
element
table-column-group Let the element behave like a
table-header-group Let the element behave like a
table-footer-group Let the element behave like a
table-row-group Let the element behave like a
table-cell Let the element behave like a element
table-column Let the element behave like a
table-row Let the element behave like a
none The element will not be displayed at all (has no effect on layout)
initial Sets this property to its default value.
inherit Inherits this property from its parent elementThis feature added with the new HTML5 and CSS3 versions bring us backpacked again.

 

 

 

 

 

Understood?

 

 

 

 

 

Another CSS property very useful, especially with css3, is the float tag.

 

 

 

 

 

The Web Designer is now able to create a wonderful layout combining these three attribute.

 

 

The display value, the width value (I like to do them mostly in percentage) and a float value,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    This is the main section of the layout

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In the above example, we use the inline-block value, a width of 30% and we tell the browser to render the divs on the left-hand side of the document.

 

 

It will automatically leave all the rest of the space available for other contents, in this case, another div tag.

 

 

 

 

 

Notice that the second div tag has a width of 70%.

 

 

 

 

 

This is a good practice because in this way we are using all the available widths of the row.

 

 

 

 

 

Making it simpler: 30% + 70% = 100% of the width.

 

 

 

 

 

In fact,

 

 

If the sum of the tags exceeds the total amount of pixels (in this case percentage) the browser will display the following elements where it will find enough space to render them on the page.

 

 

It means the next row.

 

 

 

 

 

Little tip: when using a float tag the browser will render them until we do not say otherwise. To stop the elements to float we need to state from which side they are not allowed to float anymore.

 

 

 

 

 

Usually, create a div below and add a CSS attribute of clear: both; solve the problem of broken layout.

 

 

(there are more techniques but this is another tutorial).

 

 

 

 

 

 

 

 

2010 The Ultimate Solution - Responsive Web Design

 

 

flat design suitcase

 

 

 

 

 

 

 

 

 

 

 

Now that all the points are settled it's time for the last part of our trip.

 

 

 

 

 

And I have a surprise.

 

 

 

 

 

We have a friend to keep us company.

 

 

 

 

 

His name is Ethan Marcotte and he is a Web Designer.

 

 

He has worked in some of the most important technology-dedicated magazines.

 

 

 

 

 

Have a look at his website, I am sure you will find lots of interesting articles in the Marcotte blog.

 

 

 

 

 

But today he is not here to read us one of his articles because he is the one who originally coined the term: "responsive design".

 

 

 

 

 

His solution to solve the multi-devices issue was brilliant.

 

 

 

 

 

He figured out the possibility to use the same content but display it differently.

 

 

 

 

 

He said that the content can be displayed depending on the size of the screen by taking advantage of the limitless power of the @media CSS3 rule.

 

 

 

 

 

@media screen and (min-width: 320px) {

    body {

        background-color: white;

 

 

        color: black;

    }

   }

 

 

@media screen and (min-width: 1024) {

    body {

        background-color: lightcyan;

 

 

        color: midnightBlue;

    }

   }

 

 

 

 

 

The code in the previous example changes the color of the background and the color of the text.

 

 

It varies, according to the width of the screen.

 

 

 

 

 

This could seem an arduous concept to understand.

 

 

What this does is to provide benefit to all the different parts.

 

 

 

 

 

Why?

 

 

On the developing side if the project is well studied from the first stage, starting with the creation of a basic layout thought for mobile devices and then proceed step by step toward the biggest by adding and editing elements is not a difficult process (this is basically how mobile first works). 

 

 

 

 

 

On the other side,

 

 

the client is sure that, once finished, his project( either website or web application) will be available and fine-looking on any device

 

 

Eventually, everyone is happy.

 

 

 

 

 

 

 

 

The span element

 

 

Since we talked about container element of HTML another tag to consider as the smaller brother of the div is the span element.

 

 

 

 

 

Like the div, this element has not meant and by itself will produce an invisible dot in the DOM. 

 

 

 

 

 

But, when there is some content in it, it can group elements and style them accordingly. A difference between the two is that a div is displayed as a block element, whereas a span behaves as an inline one.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If you like the content of this page, do not forget to share with your friends.

 

 

Use the buttons at the top right of the page;

 

 

 

 

 

 

 

 

If, instead, you have something else to say about this topic or you think I missed some important part, contact me.

 

 

I will add your content citing you in this post.

 

Ever thought on learning some server-side language?
Check out my reviews of 24 of the most popular PHP framework currently available

 

 
 
If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!

Other posts that might interest you

Utility (Antivirus) Dec 13, 2017

Avast

Stay Protected See details
Utility (Internet) Dec 13, 2017

DNS server

See details
Utility (Software) Dec 5, 2017

History of Adobe Systems

See details
Get my free books' review to improve your skill now!
I'll do myself
CHOOSE
ANOTHER PAGE
OR CONTINUE
BY SCROLLING
THE CURRENT ONE