We have a problem. And I fear that many of us still don't see it. And those who do see it are still not completely sure what to do about it. The problem is this: The traditional tools and workflows we used for years to build things for the Web don't work anymore for today's Web.
Most of our tools and processes originated in a time when designing for the Web basically meant designing with only a few colors and pixelated type for screens that had relatively clear and small dimensions. The obvious constraints of “new media” – with the pixel as the omnipresent smallest visual building block – were defining its character and made it stand out against print media. Over time, in search of control and with growing professionalization, agencies and design studios established processes that allowed them to build and sell websites professionally. And because every new medium first borrows from its predecessors, the answer to the question of how to approach the web design process seemed obvious. Let’s do it like we do printed products, like we design all products in classical industrialized workflows: Plan. Design. Produce.
And it worked.
Planning websites grew to a domain of great expertise. Specialized disciplines like Information Architecture, Content Strategy, or User Experience Design evolved. Sitemaps and wireframes got created so that the structure and hierarchy of a website would be clear before starting with the design phase. The designers then built beautiful layouts out of those wireframes so that clients could approve how the website would look like. And finally, the developers took those Photoshop layouts and magically transformed static designs into interactive pages. Everything was plannable. Everything was predictable. Everything was under control.
This is a random H3 Heading
Until everything changed.
It was the Web itself that changed. Because change is in its nature. Maybe the most striking example of this change is that instead of a clearly defined canvas (of 640 x 480 800 x 600 1024 x 768 pixels) we now have to design for this:
What you see here is a – by no means complete – visualization of currently available screen sizes, ranging from tiny smartwatches up to huge 4K screens. Apparently, the differences between the individual screen sizes become more and more blurred. Where do we draw the line between “mobile” and “tablet”? Where does “large desktop” start? The idea of a fixed canvas and the control we thought we had over it is definitely a thing of the past. And this doesn’t only apply to screen sizes, it also applies to the Web as a whole.
- This is list item 1
- This is list item 1
- This is list item 1
The Web has evolved at an unimaginable speed and we are now witnessing an unprecedented diversity of not only screen sizes, pixel densities, and color spaces, but also devices with most different capabilities, sensors, input types, browsers, APIs, accessibility features, security issues, connection speeds – the list is endless and it won’t ever be complete.
All those technologies and contexts are things that we can and often even must take into account when we build something for the web because all those things can inform our products and shape the experiences of the people who use those products. A website is not a static artifact. It’s a flexible, living thing that can assume the most different forms and can even evolve over time. And if you consider all the things that are yet to come, for example in the fields of the physical interfaces, AI and machine learning, or also with additions to existing technologies like JavaScript Web APIs or CSS Houdini which will let you create your own custom properties, custom functions, and custom @-rules – how can one possibly think of the Web as something homogeneous in this age of extreme computing?
- This is list item 1
- This is list item 1
- This is list item 1
The Web isn’t uniform. It never was. If we thought we were in control, it was only because we hadn’t yet imagined what the web would look like when unfolded to its true nature. The Web of today is complex, flexible, blurry, chaotic, unpredictable, extendable, immediate, omnipresent. And this complexity of the Web leads to the major problem regarding our processes: When every project is different, when conditions, tools, and technologies change with every project, static and linear processes are less and less repeatable and planning for success beforehand becomes basically impossible. There are simply too many factors with too many unknowns to consider. So if we want to build lasting, appropriate, performant, accessible, consistent, secure, and unique experiences for everyone on the Web, we need to find ways to cope with this multiplicity.
This is a random H4 Heading
To some extent, we already started. In the year 2000, John Allsopp wrote his renowned article A Dao of Web Design in which he suggested that “we should embrace the fact that the web doesn’t have the same constraints [as print], and design for this flexibility.” But his call remained unheard for years and it wasn’t until the mobile revolution that we actually started to change the ways we design for this flexibility.
First, we indeed ditched the notion of a fixed-sized canvas and got our heads around the idea of responsive web design. Ethan Marcotte, who coined the term responsive web design back in 2010, recently pointed out that we also “have started to break our interfaces down into tiny, reusable modules, and began using those patterns to build products, features, and interfaces more quickly than ever before.” We also questioned Photoshop, the “damn liar”, and started to fall in love with tools like Sketch or Figma, that promised to be more suitable for designing user interfaces. Instead of designing static pages we are now building modular systems of components. At least that’s what we do in theory.
This is a random H5 Heading
In reality, many of us are still struggling with the permanent shifts and rapid change of the medium. In reality, the new agile and lean processes we love to talk about in front of our clients are seldom more than high-frequency waterfall. In reality, I still hear project managers, designers, and developers regularly talk about screen widths in device-specific categories like mobile, tablet, and desktop. In reality, I still get to see my fair share of static Photoshop layouts and, to be honest, breaking up our static designs into components and modules in Sketch may be a step in the right direction but it doesn’t necessarily make our designs less static. To some degree, we only switched one static design tool for another. To some degree, Sketch is a liar, too.
This is a random H6 Heading
We are still drawing pictures of websites – although, as Paul Robert Lloyd noted, the true web aesthetic is hardly visual at all. We are still tackling a flexible medium with the static tools and linear waterfall processes of the past, that can’t represent the inherent nature of the Webs ingredients because we are always creating static abstractions of the final medium. This leads to tedious, inefficient, and highly ineffective tasks, wrong features being built, and most importantly: because we spend most of our time doing the wrong things, the quality of the experiences we offer our users suffers. So it is about time for us to change that.
A Material to Build With
At Webstock 2015, Frank Chimero gave an outstanding talk in which he discussed the true nature of the web – he called it The Web’s Grain – and suggested that if we want to come up with appropriate design solutions for today's Web, we need to recognize the things that are implicit to the medium and work with them accordingly. And he asked:
What would happen if we stopped treating the Web like a blank canvas to paint on, and started treating it like a material to build with?
If we look at the Web as a material or even as a multitude of different materials to build with, using tools like Photoshop that ignore fundamental attributes of those materials – like interactivity or movement – suddenly appears even more inappropriate. At the same time, finding ways to appropriately build things out of those materials becomes an imperative. But how can we approach this? How can we find tools and processes that let us work with the Web as a material? To answer this question it is worth looking at the history of some disciplines that have always been working with materials.
In architecture and industrial design, but also in engineering, materiality has always been a crucial element. Building for the Web combines properties from all of those disciplines, but maybe we missed to realize and consider the materiality of the Web because of its virtual nature, because it lacks physicality. At least, you can’t feel the weight of a website or smell it (yet).
In architecture and industrial design, there exist the concept of material honesty. Material honesty means that a material should be used in accordance with its true nature and its properties and that those properties should influence the form the material is used for. The origins of this idea can be traced back to the Bauhaus, the German art and design school that laid the foundation of modernist industrial design and architecture. The Bauhaus was founded with the objective of finding a new aesthetic that was appropriate to the standardized production methods of the industrial age. In contrast to the Art Deco movement, the Bauhaus wanted to forgo the romanticizing, ornamental decoration of industrially produced objects. In his ‘Principles of Bauhaus Production’, architect and Bauhaus founder Walter Gropius wrote:
An object is defined by its nature. In order, then, to design it to function correctly – a container, a chair, or a house – one must first of all study its nature: for it must serve its purpose perfectly, that is, it must fulfill its function usefully, be durable, economical, and ‘beautiful.’
Consequently, material studies were a central element of the Bauhaus teachings. Timeless and for their time revolutionary designs like Marcel Breuer’s “Wassily Chair” or the Bauhaus Buildings itself, by Walter Gropius, combined materials in a new, materially honest way: Instead of hiding materials like steel and concrete those materials defined character, form, and function of the designed objects.
The guiding principle of finding a materially honest form and function is one of the major legacies of the Bauhaus. Many designers and architects were deeply influenced by the ideas of the Bauhaus, for example, Charles and Ray Eames. For them too, selecting and working with the right materials and taking their qualities into account was pivotal to designing objects like the Eames Plastic Armchair that masterfully combined molded wood, aluminum, steel, and high-performance plastics, using each material to its full potential. In the Eames workshop, the couple experimented with different materials like molded wood, for which they used a machine they had crafted to pressure-treat wood. The resulting prototypes were honest and pure expressions of the molding process, not upholstered and straightforward. But Charles and Ray Eames also considered another aspect of product design, that is, that eventually all products are used by humans and the usefulness of a product also highly depends on the human factor. This is why they built prototypes like an adjustable chair design tool to understand how people sit. Charles Eames: “We’ve always been aware of not even attempting to solve the problem of how people should sit, but of rather arbitrarily accepting the way people do sit and of operating within that framework.”
