A Brief History of Web Design for Designers [Detailed Look].

My interest in coding my designs disappeared the moment I understood how many tricky operations had to be performed for them to be realised. Seemingly simple topics can be solved in many ways. Yet they may not have worked in some browsers. One thing that always made me curious was why there is a separation between design and code. Why do hard things become simpler, but simple things become harder? Instead of arguing whether designers should learn code or whether developers should learn design, let's prepare some common ground on how web design has developed and how we can bridge the gap between code and design.

The Dark Ages of Web Design (1989)

[WPGP gif_id="2738" width="600"] The beginnings of web design were quite dark, since the screens were literally black and only a few monochrome pixels lived there. Design was done with symbols and tabbing (Tab key). So, let's speed up to the time when the Graphical User Interface, the highway of surfing the Web, was the era of Wild West tables.  

Tables - The Beginning (1995)

[WPGP gif_id="2739" width="600"] The birth of browsers that could display images was the first step of web design as we know it. The closest option available in the structural information was the concept of tables already present in HTML. So, what was started by David Siegel's book Creating Killer Sites was about putting tables on tables, finding clever ways to mix static cells with fluid cells. Although it didn't feel quite right because the actual purpose of the table was to structure numbers, it was the common method used to design the web for quite a long time. The other problem was the difficulty of maintaining these fragile structures. This was also the time when slicing designs became popular. Designers wanted a fancy layout, but it was up to the developers to break the designs into small pieces and find the best way for that design to work. On the other hand, tables had some great features such as vertically aligning objects and defining them in pixels or percentages. The basic benefit was that it was the closest thing to a grid we could get back then. At the same time, this was the period when many developers decided not to like front-end coding.  

JavaScript Comes to the Rescue (1995)

[WPGP gif_id="2740" width="600"] JavaScript was the answer to HTML's limitations. For example, do you need a popup window, do you want to dynamically change the order of things? The answer was JavaScript. However, the real problem here is that JavaScript is layered on top of the fabric that makes the web work, and it has to be loaded separately. It is mostly used as an easy patch by lazy developers, but when used wisely it is very powerful. We prefer not to use JavaScript today if the same feature can be offered with CSS. However, JavaScript itself remains powerful both as front-end (jQuery) and as back-end (Node.js).  

The Golden Age of Freedom - Flash (1996)

[WPGP gif_id="2741" width="600"] To break the limitations of existing web design, a technology was born that promised a freedom that had never been seen before. The designer could design any shape, layouts, animations, interactions, use any font and all in a single tool - with Flash. The result was packaged as a file and then sent to the browser for display. So, as long as a user had the latest flash plugin and some free time to wait until it loaded, it worked like magic. This was the golden age for splash pages, intro animations, all kinds of interactive effects. Unfortunately, it wasn't very open or search-friendly, and it definitely consumed a lot of processor power. When Apple decided to abandon it on its first iPhone (2007), Flash started to break down. At least for web design, this was considered an end.  

CSS (1998)

[WPGP gif_id="2742" width="600"] At about the same time as Flash, technically a better approach to structuring design emerged - Cascading Style Sheets (CSS). The basic concept here is to separate content from presentation. Therefore, appearance and formatting are defined in CSS, but content is defined in HTML. The first versions of CSS were not very flexible, but the biggest problem was the rate of adoption by browsers. It took a few years before browsers started to fully support it, and most of the time it was quite clunky. This was also the time when one browser had the latest feature, while another lacked it, which was a nightmare for a developer. To be clear, CSS is not a coding language, but more of a declarative language. Should web designers learn coding? Maybe. Should they understand how CSS works? Definitely!  

The Mobile Uprising - Grids and Frameworks (2007)

[WPGP gif_id="2743" width="600"] Browsing the web on mobile phones was a whole challenge in itself. In addition to different layouts for devices, although the design was small, it brought up content-side problems - should it be destroyed or removed from the screen? Where can I put the beautiful, flashing ads on this tiny screen? Speed was also an issue, since loading lots of content would burn through your data quickly. The first step in development was the idea of column grids. After a few iterations, the 960 grid system won, and the 12-column division became something designers use every day. The next step was to standardise commonly used items such as forms, navigation, buttons and to package them in an easy, reusable way. Basically, it was about preparing a library of visual elements containing all the code inside. The winners on this front are Bootstrap and Foundation, which are about the line between a website and an application fading away. The downside is that designs often look the same and designers cannot access them without knowing how the code works.  

Responsive Web Design (2010)

[WPGP gif_id="2744" width="600"] A bright man named Ethan Marcotte decided to question the existing approach by proposing to use the same content but different layouts for the design, and coined the term Responsive web design. Technically we still use HTML and CSS, so it is more of a conceptual progression. Yet there are many misunderstandings here. For a designer, responsive means mocking up multiple layouts. For the customer, it means it works on a phone. For a developer, it means how images are served, download speeds, semantics, mobile/desktop first and so on. The main benefit here is content equality, meaning the same website works everywhere. Hopefully we can at least agree on this.  

Flat Times (2010)

[WPGP gif_id="2745" width="600"] Designing more layouts takes time, so by chance, we decided to speed up the process by prioritising content, eliminating fancy shadow effects and going back to the design roots. Beautiful photography, typography, sharp images and thoughtful layouts are now examples of how we design. Simplifying visual elements, also called Flat design, is part of this process. The main benefit here is that there is much more thought put into the hierarchy of the message and the content in general. Glossy buttons are replaced with icons, and we can use vector images and icon fonts. Web fonts provide beautiful typography. The funny thing is that the web was close to this from the very beginning. However, the youth years also apply to this.  

The bright future (2014)

[WPGP gif_id="2746" width="600"] The holy grail of web design has actually been to visualise things and bring them into the browser. Imagine designers moving things around on the screen and clean code coming out! And I, I don't want to change the order of those things, I don't have to have full flexibility and control! Imagine that developers don't have to worry about browser compatibility and can focus on real problem-solving! Technically, there are several new concepts that support moving in this direction. New units in CSS such as vh, vw (viewport height and width) provide much more flexibility for positioning elements. Also, I will solve a problem that has bewildered many designers - why vertically centring something in CSS is such a pain. Flexbox is a beautiful concept that is part of CSS. It can create layouts and offers the possibility of changing them with a single property instead of writing code. And finally, web components are even more important. What is brought together is a series of elements, that is, a gallery, a registration form, etc. This offers an easier workflow where elements become building blocks that can be reused and updated separately. What are your thoughts on the future of the web?