Contemporary web design and ‘truth to materials’

Photogram (1923-25), Laszlo Moholy-Nagy © Hattula Moholy-Nagy / VG Bild-Kunst, Bonn

Last week I discussed a couple of excellent A List Apart articles that, in their different ways, were concerned with the pressing question of what kind of communications medium the web is.

I say 'pressing' because the challenges presented by the advent of a truly mobile web are forcing web designers to develop and master new techniques and methodologies at a faster pace than ever before. Web design has always been a fast moving field, but the profession is currently under severe strain to deliver sites that will work across the multitude of browsing devices that have flooded the market and which are being used to access the web right now by tens of millions of users.

To recap briefly: Paul Robert Lloyd and Dave Ruperts in their respective articles focused on the particularly vexatious problem of responsive images. High quality bitmap images have been considered essential to the web aesthetic since Netscape engineers introduced the image tag back in the mid-1990s.

But their heavy file sizes and fixed dimensions mean they fit awkwardly into a mobile web of radically diverse screen resolutions and connection speeds. Serve a big image for high-resolution devices and low bandwidth users suffer. Serve a lowest common denominator small image and users with next generation Retina screens get a blurry picture. JavaScript workarounds can't be relied on.

Rather than presenting another workaround attempting to square the circle Paul and Dave suggested a way forward by challenging us to reconsider what kind of medium the web is, and whether in fact bitmap images should really be considered native to it. Perhaps the profession has been asking the wrong question. Rather than asking how best to get bitmap images to work on the web, we should be asking whether or not they should really be considered a proper element of it at all.

Reflections of old debates

It so happened that when those articles appeared I was reading a couple of fascinating books on the turbulent history of early 20th century design, recounting debates about design theory that put me in mind of the contemporary discussion about the nature of the web.

One studied the celebrated Bauhaus school - Bauhaus by Frank Whitford - which considering its great importance to the subsequent development of modernist design, ran for little over 10 years, from 1919 to 1932.

The Bauhaus didn't generate many wholly original ideas, or particularly radical designs. But, by gathering together and encouraging the experimental work of some of the finest designers, artists and craftsmen and women of the day, it developed design theories and curricular that signposted the direction architecture, graphic and product design were to take through the course of the 20th century.

The essential question the Bauhaus wrestled with was how to make sense of and take advantage of the new materials and methods of production developed during the industrialisation of the 19th century. Prior to the development of modern industry the materials and techniques available to architects and craft workers had evolved slowly: with the exception of the development of the printing press the same trades, employing the same materials, had been passed down through guilds of masters, journeymen and novices time out of mind.

But modern industry furnished designers with a vast palette of exotic new materials, including steel, cast-iron, concrete, and vast sheets of glass and metal. Powerful new machinery automated production, facilitating the rapid delivery of huge quantities of prefabricated materials, made to order.

The story of the Bauhaus is particularly interesting because of the ferocity of debate that raged within the school as it struggled to come to terms and embrace new materials and technologies. There's something archetypal about their school's history: this is what design looks like when new technology ruptures old ways and forces designers to look at their source materials and methodologies afresh.

Surprisingly, given its latter day reputation as a fearless pioneer of design modernism, during its early years many within the Bauhaus saw new technology as a threat to artistic expression, and sought to turn the school into a safe enclave for the preservation of the age-old traditions of hand crafts.

'Truth to materials', 'Honesty of construction'

It was only during the mid-1920s that the school decisively embraced the possibilities of the machine. They experimented with steel and glass, rational clean lined product design, and even early photography. The nature of design had to change to reflect the reality of the modern industrial age. The possibilities offered by new materials and methods of production were to be acknowledged and pursued with enthusiasm. That was the honest, liberating way forward: clear sighted recognition of the materials to hand, the raw 'stuff' of design, and careful thought regarding their rational, efficient employment. The Bauhaus didn't invent celebrated design aphorisms like 'Truth to materials' and 'Honesty of construction', but such was the rigour with which they investigated their implications that they came to be associated with the school.

Current debates about the future of web design seem to me to resemble aspects of those old Bauhaus disputes. The web is just twenty years old. We're not yet clear on precisely what kind of medium it is, what its defining elements actually are, how they should be 'honestly' employed. Because so many different bits and pieces from other communications mediums - such as print and film - can be embedded within a website it's difficult to discern whether they are in fact native to the medium, properly deserving of a place in the web designer's day-to-day toolbox. Perhaps we need to acknowledge that some design elements we've been using for years are in fact alien to the web's essential form.

I like to imagine the kinds of questions the Bauhaus would have been asking to discern how best to design for the web. I think they would have started by analysing the nature of the medium. Then, in light of their conclusions, they would have considered what, of the many design elements that it's possible to fit into a web page, actually work well within the medium, and what should be thought of as secondary, non-native elements.

If we analyse the kind of thing a website is we might say:

  • A website is comprised of virtual pages that can be accessed from any device equipped with a capable web browser.
  • Different devices have different capabilities, and browsers of variable quality, so web pages must be structured to ensure their essential content is universally accessible.
  • Browsing devices come in all shapes and sizes, and screen resolutions vary greatly, so website layouts must adapt and scale to fit different displays.
  • Websites should be lightweight to ensure they can be accessed by users with poor connections.

In light of that we might say that the following design elements are proper to web:

  • Text works well online: it downloads quickly and it's possible to make use efficient type embedding services to employ many appealing typefaces.
  • Browsers vary in their support for CSS, but it provides an efficient means of styling design elements, furnishing us with typographic controls, a large colour palette, and simple embellishments (such as rounded corners and gradients) for interface boxes, buttons and fields.
  • Most devices support JavaScript, allowing us to enhance sites with interactive functionality.
  • Ever more devices support the SVG file format, allowing us to use detailed vector graphics that scale according to resolution.
  • We can embed audio and video, sparingly.
  • We can make use of small bitmap images, and, where necessary heavily optimised larger bitmaps. Options for optimising larger bitmaps include blurring out all but the focal point of the image, or removing colour.

This kind of systematic audit gets us closer to seeing the web for what it is. We might say that an ideal website should consist of a lightweight set of virtual pages that load swiftly and respond promptly to user input. Information should be presented primarily by means of text and vector graphics which adapt according to device size and screen resolution. Small bitmaps may appear when necessary, but should be few and far between, appearing only when there's no other tool for the information they communicate. Pages should be designed using principles of progressive enhancement to ensure essential content is available to all: users with more capable devices may enjoy a more sophisticated user experience.

Restricting bitmap images

So, I'm suggesting that if we take a step back and take stock of the relative appropriateness of the design elements that typically comprise a website, large bitmap images are rather far down in the pecking order. The ideal website should be built of lightweight resolution-independent building blocks. Big bitmaps are heavy, and they only come in one size.

The commercial constraints within which most web designers work means that larger raster files will always be with us, at least until a resolution independent format for detailed photographic images comes along. Clients expect image driven sites rich with appealing photography. And if we're honest so do designers: its easier and quicker to put together an effective design using good photography than to craft intricate vector illustrations.

But if we are serious about creating sites that go some way toward respecting the essential spirit of the web then we could try to stop using them quite so much. Easier said than done, I know. I'm certainly not giving them up: very often you just need photography and raster images - vectors aren't sufficient. But the changing nature of the web is forcing us to go back to first principles and re-examine everything, just like those confused designers nearly 100 years ago.


For more parallels between the Bauhaus and web design you might want to have a look at Simon Collison's fascinating presentation of a few years ago, Bauhaus Ideology and the Future of Web Design.