Brief history of web design

From the translator: technologies on the web change relatively very quickly, trends in web design, ways of presenting content and user interaction are even more rapidly replacing each other. It should be noted that the development does not occur unilaterally, the changes also concern the ways and methods of information consumption.

Nowadays, there is a rapid increase in the share of mobile traffic. 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 can not affect the vector of further development of web design.

Metamorphosis occurs 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. There are many practical studies of the behavior of people and their thinking when interacting with web design. Details about this in his blog wrote the doctor of psychological sciences Susan Wainshank.
')
I lost my interest in turning my designs into code at the very moment when I realized how much I needed to do in order for the idea to be realized. Simple at first glance, tasks have so many solutions, but they can not earn in all browsers. I always wondered: why is there a separation between design and code? Why do we first simplify the complex, breaking it into simpler things, and then again complicate them? Instead of arguing about whether designers should learn to write code, or whether developers need to learn design, I propose to draw together a single picture of how web design has evolved and how we can bridge the gap between code and design.

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 move forward, at a time when graphical user interfaces were the main tool for surfing the web. Those times of tabular layout can be called the Wild West of the web.

Tables - Start (1995)

The emergence of browsers capable of displaying images was the first step in web design — the way we know it today. The most accessible way of structuring 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 entirely correct, since their main purpose is to structure the information. And yet, this method of creating web design has been the most common for a long time. There was then another problem - the preservation of the performance of these fragile structures. At the same time, the popularity of "cutting layouts" into individual elements. Designers painted beautiful layouts, and dividing them into smaller pieces and gluing them together so that the design worked as it should, the developers were engaged. On the other hand, the tables had such elegant features as the ability to align the contents vertically, to determine its size in pixels and as a percentage. The main advantage of the tables was that they made it possible to recreate the grid structure as closely as possible. At the same time, the developers realized that they had ceased to love external interfaces and their development.

Javascript comes to the rescue (1995)

The answer to the limitations of HTML was Javascript. Want to display a popup? Or do you need to adjust the dynamic relocation of elements? The answer is one - Javascript. However, the main problem was that Javascript lay on top of the material that makes up the web and, accordingly, had to be downloaded separately. Often, lazy developers used it to create a quick patch for the code, but in capable 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 both in interface development (jQuery) and in server-side programming (Node. js)

The Golden Age of Freedom - Flash (1996)

The technology that appeared in 1996 promised unprecedented freedom and set itself the goal of breaking down the barriers that hindered the development of web design at the time. A designer could work with any shapes, sizes of mock-ups, animations, interactions and use any typeface and all this with the help of one tool - Flash technology. The final result of the work was packaged in one file, and then sent to the browser for display. It all worked on the condition that the user had the latest version of the flash plugin and had some free time to wait for the content to load. It looked magical. That time was the golden era of bright greeting pages, introductory animations and all sorts of interactive effects. Unfortunately, the technology clearly lacked openness, search-friendliness, and the consumption of Flash resources was truly great. When Apple decided to get rid of it in its first iPhone (2007), technology began to fade, at least from the perspective of web design.

CSS (1998)

At about the same time as Flash, another, technically best way to structure the design appeared - Cascading Style Sheets (CSS). His 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 flexibility, but the biggest problem was the slow speed of the adaptation of browsers to it. It took several years to introduce full browser support for CSS and often its use was accompanied by a considerable number of bugs. At the same time, it often turned out that the newest CSS properties were supported in only one browser, while others did not. For developers, this has become a real nightmare. It is also important to clarify here that CSS is not a code-writing language, rather, a language for declaring object properties, and if the question of whether designers need to learn to write code remains open, the answer to the question “Should they understand how CSS works?” will definitely be positive.

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

Browsing the web on mobile phones was a challenge in itself. And besides the difference in the size of the layouts for different devices, there was also the problem of matching the designs: should the same version of the site be displayed on a small screen as on a large one, or should its individual parts be abandoned? And where to insert all this flickering advertising on such a tiny screen? The speed was also a problem, since downloading a large amount of content burns your entire mobile balance quite quickly. The first step to improving the situation was the idea of ​​using grids with columns.

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

Responsive Web Design (2010)

A clever guy named Ethan Marcot decided to challenge the existing approach by offering to display the same content, using different forms of layouts for its presentation, calling it the term “Responsive web design” (adaptive web design). Formally, we still continue to use HTML and CSS, so this is more about conceptual improvement.

There are many misconceptions regarding this approach. For a designer, “adaptability” means creating a set of sketches of different layouts, and for a client, this means that everything will work on the phone. The developer at the same time thinks about the page loading speed, how to present images to the user, about the semantic load of elements, about 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 rationalize the process, getting rid of the intricate effects of shadows and returning to the origins of the design, giving priority to the content. High-quality photographic materials, selection of font design, colorful illustrations and thought-out layouts - this is the design that we create it 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 the materials, the priority of the displayed information and the content in general. Glossy buttons are replaced by icons, this allows us to use vector images and icon fonts. Web fonts provide excellent typography. The funniest thing here is that the web was close to this idea from the very beginning, but that’s why it’s young ...

Bright Future (2014)

All these years, the visualization of design and various attempts to present it in the browser have been the holy grail of web design. Imagine how designers can easily move elements on the screen while the ready-made code appears on its own! This is not about changing the order of 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 concentrate 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 the central vertical alignment in CSS done so hard? Another cool idea that has become part of CSS is Flexbox, which allows you to create layouts and modify them with one property, instead of writing a bunch of code. And finally, web components are an even more solid attempt, which is a bundled set of elements, such as a gallery or a registration form. This creates an opportunity to simplify the workflow, as elements become building blocks that can be used many times, including independently.

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

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