A Brief History of Web Design

From a translator: technologies on the web are changing very quickly, pushing each other more rapidly in web design trends, ways of delivering content and interacting with the user. It is worth noting that the development does not occur unilaterally, the changes also concern the ways and methods of consuming information.

Nowadays, the share of mobile traffic is growing rapidly. In addition, the time spent by the user on the Internet from a smartphone or other mobile gadget is on average significantly more than the time spent by a person at a stationary computer. This fact cannot but affect the vector of further development of web design.

Metamorphoses occur not only with glands and technologies, but also with our brain. The development of “clip thinking” as a response to an increased amount of information is widely discussed. A lot of practical research is being done on people's behavior and thinking when interacting with web design. In detail about this in his blog writes the doctor of psychological sciences Susan Wayneshenk.

I lost my interest in turning my designs into code at the very moment when I realized how much needed to be done for the idea to come true. At first glance, simple tasks have so many solutions, but they may not work in all browsers. I was always wondering: why is there a separation between design and code? Why do we first simplify the complex, breaking it into simpler things, and then complicate them again? Instead of arguing about whether designers should learn to write code or whether developers need to learn design, I suggest drawing together a single picture of how web design has evolved and how we can bridge the gap between code and design.

The Dark Age of Web Design (1989)

The very beginning of web design can be called dark times, because the screens were literally black, containing only a small number of monochrome pixels. The design was then created using symbols and tabs, so we will move forward at a time when graphical user interfaces were the main tool for web surfing. Those times of table layout can be called the Wild West of the web.

Tables - Start (1995)

The advent of browsers capable of displaying images was the first step in web design - the way we know it today. The most accessible way to structure information was the concept of using tables, which at that time became available in HTML. Therefore, placing tables inside other tables and mixing static cells with cells of relative sizes began with David Siegel's book " Creating Killer Sites"". The use of tables for such purposes did not seem quite right, since their main purpose is to structure information. And yet, this method of creating web design was the most common for a long time. There was another problem then - maintaining the performance of these fragile structures “At the same time,“ cutting layouts ”into individual elements gained popularity. Designers drew beautiful layouts, and dividing them into smaller parts and gluing them so that the design worked as it should, On the other hand, the tables had such chic features as the ability to align content vertically, determine its size in pixels and in percent. The main advantage of the tables was that they allowed to recreate the grid structure as close as possible.

Javascript comes to the rescue (1995)

The answer to the limitations of HTML was Javascript. Want to pop up? Or do you need to configure the dynamic arrangement of elements? The only answer is Javascript. However, the main problem was that Javascript lay on top of the material that the web consists of and, accordingly, had to be downloaded separately. Often, lazy developers used it to create a quick patch for the code, but in the right hands it can turn into a very powerful tool. Nowadays, we prefer to avoid using Javascript if the same element can be implemented using CCS, but even so, JavaScript today does not lose its relevance in both interface development (jQuery) and server programming (Node. js).

The Golden Age of Freedom - Flash (1996)

The technology that appeared in 1996 promised unprecedented freedom and aimed to break down the barriers that hindered the development of web design at that time. The designer could work with any form, size of layouts, animations, interactions and use any font, all with the help of one tool - Flash technology. The final result of work was packed into one file, and after that it was sent to the browser for display. All this worked provided that the user had the latest version of the flash plugin and had some free time to wait for the contents to load. It looked magical. That time was the golden era of vibrant welcome pages, introductory animations, and all kinds of interactive effects. Unfortunately, the technology clearly lacked openness, search friendliness, and Flash resource usage was really big. When Apple decided to get rid of it in its first iPhone (2007), the technology began to fade, at least in terms of prospects in web design.

CSS (1998)

At about the same time as Flash, another, better from a technical point of view, structured design appeared - Cascading Style Sheets (CSS). Its basic concept was to separate the functions of the content container and the functions of its presentation, so that the content itself was placed in HTML, and its visual formatting was done using CSS. The first versions of the technology were far from flexible, but the biggest problem was the slow speed of browser adaptation to it. The introduction of full browser support for CSS took several years and often its use was accompanied by a considerable number of bugs. At the same time, it often turned out that the latest CSS properties were supported only in one browser, while others did not have this support. For developers, this has become a real nightmare. It is also important to clarify that CSS is not a language for writing code, but rather a language for declaring properties of objects, and if the question of whether designers need to learn how to write code remains open, then the answer to the question “Should they understand how CSS works?” definitely will be positive.

The rise of mobile content - grids and frameworks (2007)

Browsing the web on mobile phones was a test in itself. But in addition to the difference in the size of the layouts for different devices, there was also the problem of the conformity of designs: is it worth displaying on the small screen the same version of the site as on the large one, or is it necessary to refuse individual parts of it? And where to insert all this flickering advertising on such a tiny screen? Speed ​​was also a problem, since downloading a lot of content burns your entire mobile balance pretty quickly. The first step to improving the situation was the idea of ​​using grid with columns.

After several iterations, the 960 px grid won, and the division into 12 columns was primarily used by designers. The next step was the standardization of widespread elements, such as forms, navigation menus, buttons, as well as the creation of the possibility of their quick and easy use or, quite simply - the creation of a library of visual elements, which contains all the necessary code. The winners here are Bootstrap and Foundation, which also indicates the fact that the line between the website and the application has become blurred. The disadvantage of this approach was that new designs often began to look the same. At the same time, the designers themselves were still unable to access their changes without understanding how the code works.

Responsive Web Design (2010)

A smart guy named Ethan Marcot decided to challenge the current approach by proposing to display the same content, using different forms of layouts to represent it, calling it the term “Responsive web design” (responsive web design). Formally, we are still continuing to use HTML and CSS, so this is more about conceptual improvement.

There are many misconceptions regarding this approach. For the designer, “adaptability” means creating many sketches of different layouts, and for the client, this means that everything will work on the phone. At the same time, the developer thinks about the page loading speed, how to present images to the user, the semantic load of the elements, the priority of the mobile or desktop version, and so on ... The main advantage of this approach is to save the same content on different layouts. In practice, this means that the same website works everywhere. I hope that at least everyone agrees with this definition.

Simplification (2010)

Drawing more layouts takes more time. Based on this, to our common happiness, the designers decided to streamline the process, getting rid of the intricate effects of shadows and returning to the origins of design, giving priority to the content. High-quality photo materials, selection of font design, colorful illustrations and thoughtful layouts - this is the design that we create today.
Simplification of visual elements, or the so-called “flat design”, is also part of this process. Its main advantage is that much more attention is paid to materials, the priority of the displayed information and the content as a whole. Glossy buttons are replaced with icons, this allows us to use vector images and icon fonts. Web fonts provide great typography. The funniest thing here is that the web has been close to this idea from the very beginning, but that’s why it’s young ...

Bright future (2014)

All these years, visualization of design and various attempts to present it in a browser have been the Holy Grail of web design. Imagine how designers easily move elements on the screen, while the finished code appears on its own! This is not about changing the order of the elements as such, but about complete flexibility and control! Imagine that developers do not need to worry about browser compatibility, and instead they can fully focus on solving a real problem!

Formally, today there are several new ideas that support the movement in this direction. New CSS units such as vh, vw (height and width of the viewport) provide much more flexibility when positioning elements. They also solve a problem that surprised many designers: why is center alignment in CSS so difficult? Another cool idea that has become part of CSS is Flexbox, which allows you to create layouts and modify them with a single property, instead of writing a bunch of code. And finally, web components is an even more thorough attempt, which is a set of elements connected together, such as, for example, a gallery or registration form. This makes it possible to simplify the workflow, as elements become building blocks,

Well, what are your thoughts on the future of web design?

Note: Years in brackets indicate the beginning of a given stage. These technologies have evolved at different speeds over a long time, so in no case do not consider the period from 1998 to 2007 empty. It was then that the main evolution took place.