I can't really remember when I first started designing web sites. What I do remember is that if was a real pain to make a change to the design, because every single page had to be re-written. Thanks for the development of Content Management Systems that separate content from design.
This meant that designers had to also learn CSS coding, but in the end it's made life a lot easier. So, in thinking about all the changes, I thought it might be interesting to take a brief look at how design for the web has evolved and how we have bridged the gap between code and design.
(1989) The Dark Ages of Web Design
When I first started playing with computers, web design was pretty dark, as screens were literally black and only few monochrome pixels lived therein. Design consisted of symbols and tabulation (Tab key). Let's fast forward to something more exciting when the Graphic User Interface was the main way of surfing the web – the Wild West era of tables.
(1995) Tables Were The Beginning
The beginning of browsers that could display images was the first step into web design as we know it today. The closest option available then to structure information was the concept of tables already existing in HTML. So putting tables within tables, figuring out clever ways to mix static cells with fluid cells was the thing, started by David's Siegel's book Creating Killer Sites. Although the main purpose of a table is to structure numbers, it was still the common method to design the web for quite some time and still has limited application today. The other problem was the difficulty to maintain these fragile structures. This is also the time when the term slicing designs became popular. Designers would make a fancy layout, but it was up to developers to break it into small pieces and figure out the best way to make that design work. This was the only way to get the pages to load faster, but you could lose your hair trying to make it work sometimes. On the other hand, tables had some great features like the ability to align things vertically, be defined in pixels or in percentages. The main benefit was that it was the closest to a grid we could get back then. It was also the time when so many developers decided not to like front-end coding.
(1996) Creating Freedom With Flash
To break the limitations of existing web design, a technology was developed that promised a freedom never available before. The designer could design any shapes, layouts, animations, interactions, use any font and all this in one tool – Flash developed by Adobe. The end-result is packed as one file and then sent to the browser to be displayed. That is, as long as a user had the latest flash plugin and some free time to wait until it loads, it worked like magic. This was the golden era for splash pages, intro animations, all kinds of interactive effects. However, it wasn’t too open or search-friendly and certainly consumed a lot of processing power- a lot. It's death toll for web design was when Apple decided to abandon it on their first iPhone (2007). Today, most of those effects can be created with HTML5 with a fraction of the overhead.
(1998) CSS - Cascading Style Sheets
Around the same time as Flash, a better approach to structuring design from a technical standpoint was born – Cascading Style Sheets (CSS). The basic concept here is to separate content from the presentation. The design and formatting are defined in CSS and the content is defined in HTML. The first versions of CSS were not very flexible, but the biggest problem was the adoption rate by browsers. It took a few years before browsers started to fully support it and often it was quite buggy. This is also the time when one browser had the newest feature, while another was lacking it, which is a nightmare for a developer. To be clear, CSS isn’t a coding language, it is rather a declarative language. Should web designers learn how to code? Maybe. Should they understand how CSS works? Absolutely!
(2007) The Rise of Mobile Brought Grids and Frameworks
Browsing the web on mobile phones was a whole challenge all by itself. Not only were there all the different layouts for devices, it introduced content-parity problems – should the design be the same on the tiny screen or should it be stripped down? Where to put all the nice, blinking ads on that tiny screen? Then there was the issue of speed, as loading a lot of content burns through your internet money pretty fast. The first improvement was an idea of column grids. After a few versions, the 960 grid system won, and the 12-column division became something designers were using every day. The next step was standardising the commonly used elements like forms, navigation, buttons, and to pack them in an easy, reusable way. Essentially, making a library of visual elements that contains all the code in it. The winners were Bootstrap and Foundation, which is also means the line between a website and an app is fading. On the other hand, designs often look the same and designers have to know how the code works to make their creations.
(2010) Responsive Web Design Changed the Game
In 2010, a brilliant guy named Ethan Marcotte challenged the existing approach by proposing to use the same content, but different layouts for the design, and coined the term Responsive web design. Since we still use HTML and CSS, it is more of a conceptual advancement which produced a lot of misconceptions. For a designer, responsive means mocking up multiple layouts. For the client, it means it works on the phone. For a developer, it involves how images are served, download speeds, semantics, mobile/desktop first and a lot more. The main benefit here is the content parity, meaning that it's the same website that works everywhere. That sure beats having to build separate websites for mobile.
(2010) Flat Design Come of Age
Designing more layouts takes more time of course, so the process was streamlined by eliminating fancy shadow effects and getting back to the roots of design by prioritizing the content. Good photography, typography, sharp illustrations and thoughtful layouts is how sites are designed now. Simplifying visual elements or so called Flat design is also part of the process. The great benefit here is that a lot more thought is being put into copy, into hierarchy of the message and the content in general. Glossy buttons have been replaced by icons which allows the use of vector images and icon fonts. Web fonts deliver beautiful typography. The interesting thing is, the web was close to this in the very beginning. Sometimes simple is better.
(2014) Looking to the Future
The end result of web design has been to actually make it visual and bring that look into the browser. Imagine that designers simply move things around the screen and a clean code comes out! Wouldn't that be cool. And not just changing the order of things, but having full flexibility and control! Imagine that developers don't have to worry about browser compatibility anymore and can focus on actual problem solving!
We are going in that direction. There are a few new concepts that support the move in that direction. New units in CSS like vh, vw (viewport height and width) allow much greater flexibility to position elements. It will also solve the problem that has puzzled so many designers – why centering something vertically in CSS is such a pain. Flexbox is another cool concept which is a part of CSS. It allows to create layouts and modify them with a single property instead of writing lot of code. And finally web components is an even bigger take. It is a set of elements bundled together, i.e. a gallery, signup form etc. This introduces an easier workflow, where elements become building blocks that can be reused and updated separately.
Content Management Systems are also continually improving to make life easier for designers allowing us to plug data into where ever we want it seen. They are also using more APIs so that developers can link to other data systems, making businesses more efficient. It will be interesting to see what the next wave of innovations will bring.