Twelve years ago, John Allsopp asked us to embrace the adaptable nature of the web. We didn’t listen.
Although the web standards movement that followed advocated the separation of presentation and content—an essential requirement for adaptive design—this only manifested itself in code. Floated divs replaced table cells, yet layouts remained governed by the inflexible conventions of print.
Today, when every device begs to be connected, it has become easier—almost necessary—to accept the adaptable nature of the web. Responsive web design is an emerging best practice, and our layouts are becoming more flexible. But once again, innovation is focused on technical implementations while the visual aesthetic remains ignored.
To put it another way, we’re embracing “responsive” but neglecting the second part: “design.” We’re replacing fixed-width divs with fluid ones. As we undergo a period of reassessment, both of our practice and of our tools, now is the right time to seek out an aesthetic that is truer to the medium.
The material of the web#section2
To properly design for a medium, you need to understand it. I like to think of the web as a kind of material, with unique characteristics we can take advantage of, and limits it can reach before it breaks. The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web.
It’s this combination of protocols and conventions that helps the web achieve what Sir Tim Berners-Lee calls its “primary design principle”: universality.
It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large.
With universality so inherent to the medium, it could be said that the web is responsive by default. “Responsive” isn’t so much a technique or process, but a fundamental characteristic of the platform—and it’s one we threaten with each line of CSS and JavaScript we lay upon it. Universality transcends visual design, too: Websites need to be just as easy to use when displayed as plain text or read out loud.
This nature, and these characteristics, should inform every aspect of our design. So how might the overriding aesthetic of the web change were we to design with this universal nature in mind?
The medium is the message#section3
Like the web, television is a medium where the access devices differ: Televisions can vary in size, resolution, aspect ratio, and refresh rate.
This was especially true in the 1970s and early 1980s. Although programs were recorded in color, broadcasters still had to consider the large number of people who owned black-and-white sets. On-screen graphics needed to work on both types of screens, so designers used contrasting shapes and colors. For example, the idents for BBC1 used a yellow (and later, bright green) rotating globe on a dark blue field. The resulting design may have been garish, but it worked.
Television is facing another period of transition, this time toward a high-definition widescreen format. Because many viewers own standard-definition 4:3 televisions, designers again need to compromise, working within a “safe area” to ensure graphics don’t get cropped on older sets. As such, graphics on widescreen televisions tend to float in the middle of the screen, not yet able to make use of the full width.
The overriding aesthetic of television will continue to change, but it will remain governed by advances in technology and designers’ understanding of its limitations.
Everything old is new again#section4
Before “killer websites” and the desire to produce print-like layouts—when bandwidth was limited and small screens could only display 256 colors—pixel graphics were considered de rigueur. Layouts were simple and focused.
In 1995, Hotwired used just sixteen colors. Navigation on the homepage consisted of little more than six four-color, 1kb GIFs representing each topic area. The layout was just those images, centered:
Hotwired, circa 1995
Surrounded by high-resolution displays and limitless bandwidth, it’s easy to forget that similar constraints still exist. Although devices are becoming ever more powerful and feature-rich, less capable devices continue to be developed as well; for example, the Amazon Kindle is a popular device, yet most of the line’s e-reader models feature cellular connectivity and a monochrome E Ink display.
Embracing constraints#section5
In the move to adaptive layouts, another constraint has revealed itself: Bitmap images fail to respond, be it to the size of the viewport or to available bandwidth.
This isn’t a failing of the web; that we can embed different types of media into a webpage is a useful feature. But not all formats share the web’s characteristics. There’s a tremendous opportunity to develop a responsive bitmap format, and I doubt images will truly feel part of the web until such a thing exists. In the meantime, the question persists: How can we make highly detailed photographic images work within such an adaptable medium?
Many have tried to answer this question with technical solutions. Since complex and fragile hacks were found wanting, efforts have moved to defining new standards, with a consensus forming around those that detect when differently sized versions of an image should be requested and displayed.
It’s in the realm of constraint that creativity is fostered. Designers have yet to push against the limits of what is possible. In seeking design solutions to this problem, we could create an aesthetic more appropriate to the medium—and perhaps realize that the responsive image problem only exists because our design conventions remain rooted in print.
Without such a period of experimentation and reflection, I fear we could actually introduce standards that go against the medium’s universality; modern-day <font> elements almost.
Designing around the problem#section6
Thankfully, developers and designers are starting to undertake such experimentation, and are finding solutions that negate the need for new standards.
1. Optimization#section7
Rather than generating differently sized images and determining which should be shown, another option is to serve a single, highly optimized image instead.
The dConstruct Archive is a small site where people can listen to talks given at previous dConstruct conferences. Here, background detail around the face of each speaker has been blurred out, generating images with fewer compression artifacts and therefore smaller file sizes. This technique works especially well for portraits, as humans tend to focus on facial features anyway.
To work out which image sizes to use, the smallest and largest displays were taken into account. We can already see a failing in current responsive image proposals. If you visit this site, you will notice that larger viewports sometimes display smaller images, because the size of the image required is often dependent on the size of its containing block, not the size of the viewport. Yet viewport is the value the proposed standards would have us query.
2. Altering the aesthetic#section8
If images with fewer colors and higher levels of compression can deliver smaller files, then perhaps our designs should reflect this.
With a theme of “playing with the future,” the dConstruct 2012 conference site employed a highly typographic design that featured monochrome images with areas of flat color. This design decision meant images could be really small, some needing as few as eight colors:
As we saw in the television example, the constraints of a medium can impact the resulting aesthetic. In that case, should images with fewer colors or blurred backgrounds—and perhaps even noticeable compression artifacts—become an accepted norm on the web? Surely the popularity of services like Instagram (itself a product born of constraints) has proven that photography is judged by its content, not by its resolution.
3. Progressive enhancement#section9
Altering the visual aesthetic to suit the needs of the medium is a fine ideal, but it’s unlikely to be accepted by some clients, and let’s face it: It’s not always appropriate. In fact, it seems we rarely ask that question: What is appropriate? By evaluating our content, we can decide how many images are actually required to convey a message.
Rather than increasing the resolution of images as sites scale up, we can think about increasing their number instead. This ties in well with the ideas around progressive enhancement: providing a baseline experience that’s enhanced as device capability improves.
The BBC News mobile site is a great example of progressive enhancement. The raw HTML source references just two images: the BBC logo, and an image for the main story. Every device receives this, and pages can weigh as little as 28kb—quite a feat in the world of 5Mb websites.
When accessed on more powerful devices like newer smartphones, tablets, and desktop computers (those that can “cut the mustard“), an image is displayed for each story. These images have been deemed “nice to have”—enhancements to the core experience that are conditionally requested after the basic page has loaded.
Progressive enhancement has long featured in the developer’s toolbox, but it should now feature throughout the design process. By thinking about websites in less binary terms (desktop versus mobile; IE6 versus “modern” browsers), we can create experiences that adapt to the diverse landscape of the web.
Adapting our assumptions (not just our layouts)#section10
Imagine the design of a new website. Do you see a layout framed by a header and footer, with navigation running along the top and a main content area featuring a sidebar?
We need to reset such assumptions.
Rather than seek inspiration from print, perhaps we should look more toward software design. Desktop applications have long been imitated on the web, particularly for productivity applications, and they are often insufferable as a result. More successful interfaces combine the best aspects of desktop applications with the native interface of the web—think Gmail versus Yahoo! Mail.
Similar thinking is now being brought to content-focused applications, largely thanks to the introduction of the Chrome Web Store in 2010. This feature gave Chrome developers a marketplace to sell and promote apps built using web standards, and many have created apps that repurpose content available on the web.
That these apps can only be viewed using Chrome is an unnerving requirement, and one worthy of protest. But, if we look at these apps from a purely visual standpoint and compare them to their traditional website counterparts, we’ll see that a blank canvas removed of assumptions can deliver experiences more applicable to the web.
Only the news that’s fit to print#section11
When we think of websites inspired by print, those of newspapers spring to mind. The website for The New York Times features a fixed, densely packed, multi-column grid. Like many contemporary sites, content is suffocated by advertising, sharing widgets, and related links:
The inappropriateness of this design becomes more apparent when compared to its Chrome App (which is thankfully accessible in other browsers). Content takes center stage, with a less cluttered, more focused interface that’s also responsive—to a point. Note that it also features less photographic imagery, supporting the idea that responsive images might only be a problem when web designers try to replicate print.
Task-oriented sites#section12
Another website that suffers from similarly crowded layouts is BBC Good Food:
Yet, when viewing a recipe page in its Chrome app, we again see a more considered, user-centered design; it’s far easier to follow a recipe when you don’t have to scroll the page.
Content, not chrome#section13
A final example of this trend can be found on Rdio. As the music-streaming service has evolved, its designers have sought consistency between the website and desktop application. Where once these interfaces shared only a few components, now they are largely the same. This has resulted in a design that falls somewhere between the two: not quite a website, but not quite a desktop application either.
Like the Chrome apps for The New York Times and BBC Good Food, this nudge toward a more app-like interface has resulted in a stronger focus on content (in this case, album covers), a more fluid layout, and less intrusive navigation.
In some respects, the new interface shares qualities with Microsoft’s “Metro” design language, found on Windows Phone and Windows 8. When you consider that some of the design principles behind Metro include “Clean, Light, Open and Fast,” “Content, Not Chrome,” and “Be Authentically Digital,” it would be hard to argue that these values couldn’t equally apply to web interfaces.
Of course, one of the reasons these apps can be treated differently from traditional websites is the absence of display advertising—a constraint not so much of the web, but of the business models built upon it. Online advertising is enduring a long and painful death: Adverts are getting larger and more hostile, while services that remove them, like AdBlock, Instapaper, and Readability, are gaining popularity. Yet without proven business models to replace it, display advertising will likely stay with us for a few more years.
This shouldn’t stop us from learning from these app-inspired designs, though. At the very least, they highlight alternative layout possibilities, and how desirable services can be when greater focus is given to content.
The journey continues#section14
As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them.
With universality as a guiding principle, we can ingrain approaches like progressive enhancement throughout our design process. Everything on the web ultimately needs to degrade down to plain text (images require alt text; videos require transcripts), so the text editor might just become the most powerful app in the designer’s toolbox.
As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.
Thank you for this Paul. I found your work to be both truthful and topical… especially your thoughts on “adapting assumptions”. Nicely done!
“As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.”
Designers have been embracing the constraints of the web for the past twenty years. We moved past the early days of listening to Tim Berners Lee argue that layouts should only be text-based into a realm where we had the ability to create truly visual solutions. Now, with the advent of responsive solutions, we are advocating going back to the days of text-based content because, well, “it’s easier to scale for mobile devices.”
Our clients pay us to devise solutions for these issues, not to simply tell them “we don’t design any longer because the web isn’t a visual medium”. Try telling that to a retailer, a media company, photographer, travel agency, etc. etc. etc.
A paragraph of text will never have the power to capture a users attention like a photograph, illustration, graphic, or texture. Designers are paid to create visual solutions that help their customers explain their brands.
In a 140 character world, how do you capture someone’s attention when you’ve only got seconds to do so? Do you place an F-bomb in huge type across the top of your layout and call it a day?
I think not. Our job, in the simplest sense, is to push the boundaries of what can be done within the constraints of a medium. To assert that the web is no longer a visual medium is ludicrous and completely ignores human psychology and user behavior.
I simply find it curious how we as a community can’t accept that the secret sauce for success on the web isn’t black and white. It’s in finding solutions that take into account all of the pieces of a puzzle that have the potential to make a promising product successful. Using the correct tools and right technology for a given solution.
Design is a huge part of that equation. It always will be. Web site development that treats “layout” as “design” is nothing more than a glorified wireframe.
@paul burton, while I agree with most of what you argue, i do take issue with the last paragraph. When designers fail to realize that layout IS design, they fail differentiate the web as a different from a piece of paper. The major point of the article is that design shouldn’t be created with the premise of print, but rather that the web is a dynamic, ever-evolving organism that required layout to be a crucial consideration of design, if not on of the most most important. If your layout fails to convey what you paid to solve for, then your design fails to do the same.
@Paul Burton I’m not saying that the web isn’t a visual medium. I’m saying that the web isn’t _just_ a visual medium.
True, a paragraph of text may not have the same impact as a highly detailed photograph. Yet, how might the same information be conveyed when accessed on a device incapable of displaying images? Or when read out loud?
Ignoring human behaviour is to design ‘immersive’ websites that require users to download 5MB of data, possibly over a intermittent cellular connection, when perhaps all they wanted was an opening time.
The web isn’t black and white, and our designs shouldn’t be either. The baseline experience is important (and often ignored) but it’s not where the challenge lies. The problem we are being paid to solve, as _web_ designers, is to create experiences that can scale up from this baseline, while taking full advantage of the vastly different devices accessing our content.
What most struck me about your comparisons between web sites and Chrome applications (the “content over chrome” concept) was that the apps invariably stripped out all advertising. Ads alone are probably insufficient to drive a massive company like New York Times, as seen by their paywall efforts, but removing them entirely seems like a bridge that many businesses would not be willing to cross. Where do we draw the line between designing for the user’s benefit and “content over chrome” vs. the necessities of running an online business? Does this approach force businesses into a subscription model?
@kzurawel You suggest that many businesses would be unwilling to remove ads, but this isn’t the case when you look at mobile orientated sites/layouts. These typically remove, or significantly reduce the amount of advertising they show; partly as there is less space on smaller screens. Making money on the web is a tough nut to crack, but it will only get tougher as more people access the web on such devices.
Right now, there is a lot of laziness in this area: “just dump a few ad units here and there”. It’s great that we’re having to rethink advertising and other means of making money on the web. In doing so however, it makes sense for us to properly understand the medium first; only then can we devise more appropriate business models.
Absolutely right. Rly nice article, keep going ^^
It is always great to read someone with fresh ideas on web experience. When it comes to quality of design/UI, I think a few online newspapers have improved considerably in the last few years. It may be probably due to increased competition and the example of some smart guys like the ones working at nytimes.com. The experiments to mix web interfaces and mobile interfaces will provide a lot of room for further improvements.
@kzurawel Perhaps the problem with advertising is that it’s being put in the wrong places?
Before the web, ads had to be in print, on TV or radio or street furniture, and you couldn’t know if a viewer was interested in it, so you had to put it in as many places as possible to achieve the required effect.
With the web, the user can (and often wants to) remove or block these ads, and with smaller mobile devices the room available for them is getting squeezed anyway!
I suggest the answer is to wait until the user is seeking information with a possible (or imminent) purchase in mind. Offering such information (which is surely the purpose of advertising, is it not?) at the point where the user is actively seeking and interested in it must surely be a more cost-effective way of spending the advertisers money.
But that requires the ad agencies and their clients (and therefore their designers) to break the habits of 150 years. Will that be too much for them?
@kzurawel
Good article-thanks for the insights.
As you and others have noted, it seems that Web design is still oven concepted the same way as traditional media–in fixed dimensions. At least some of us are working on changing this. As far as advertising–just like with print media, at least for the time, is still a necessary economic fixture. The trick is doing it in a tasteful and practical way.
On the topic of images, though–why isn’t there more of a discussion on SVG? For me, it’s pretty much full-circle (and I still create plenty of offline content in Illustrator). Aside from good photography, vector-based images don’t suffer from scalability issues, and, if properly constructed, can save significant bandwidth. While having multiple resolutions for bitmaps in RWD may be the best method at this time, vector allows the use of one image type to serve all formats.
I dont think the visual aesthetics are ignored as much as at the moment they are secondary to whats going on, its the technical aspect (devices) that is driving the change, design will follow, hopefully not as far behind as he good old days of raw HTML.
Fact is there is no “universal”, fail-proof method of designing websites. Fact is, somebody will not have a great user experience with our design work on the web. The sooner we accept this simple reality, the sooner we will be at peace with our work. Web design will never fit everyone, just like print, radio and tv never fitted everyone.
At the risk of being labeled “confrontational”, I challenge the author or anyone else to show with ACTUAL examples their philosophy at work. The only truly “universal” design would be a bunch of text with the basic HTML tags – but you can’t make a living “designing” butt-ugly sites. Clients will not pay for that.
Let me put it this way: as much I respect Jeffrey Zeldman, I have to admit that most clients would NEVER like or accept a site like zeldman.com…
@irvin I suggest you re-read my article, which includes a great example of progressive enhancement: the BBC News mobile website. Not only is it a joy to use, but it also works across an incredible range of devices. Sure, it can be a challenge designing sites that are universal and inclusive to all. Whether you accept that challenge or remain a defeatist is up to you.
@author
Sorry, buddy, scare tactics (“accept the challenge or remain a defeatist”) don’t work with adults. Show me your work, not just a little portion of someone else’s work. Until then, it remains one more bogus article dealing with the utopian quest of a one-size-fits-all solution to web design. Such a thing does not exist. Sorry to be so blunt, but that’s reality.
re 01:43 pm on October 9, 2012 by irvin
Irvin, are you really _that_ sorry? After all, constructive criticism, even outright rejection, can be clad with a modicum of courtesy without compromising the message. alistapart.com is a site with a minimum of ranting and fuming, I think this is worth to be preserved.
What a fascinating article!
It was very interesting to see those Chrome Apps; the NYT looked a vast improvement. The BBC one equally so because advertising couldn’t be lauded as the sole champion for the change.
I’m a firm believer in a more content focussed approach; viewing a site in IOS reader or Readability* massively improves the reading experience for me.
Joel
*I believe the IOS Reader functionality is based on an early version of the Readability code.
Thanks for the inspiring article, Paul! I was also very sceptic about the practical implications of that matter though. Some comments above mentioned the “clients don’t want this” issue, but I think we should differentiate that a bit. Not every web project is the same or requires the same kind of strategies, there is no “one-size-fits-all”, as some commenters have pointed out.
There is lots of discussion going on about what are natural aesthetic solutions for designing on the web and how to define a new visual language for it. It is pretty exciting, but I think it also gets kind of philosophical sometimes, like Bauhaus back in the 1920’s. Luckily, the debate now has a more user-centric view on “form follows function” (or rather “form follows content”), so hopefully designers have learned from past mistakes, leaving the user and his needs behind in favor of highly idealistic aesthetic/functional norms.
I think after the experiences we had with modernism ideals, which set technology and functionality in front, we shouldn’t design cold, pure and rational user interfaces anymore. What I see on The New York Times chrome site to me is highly functional and accessible, but it doesn’t make me wanna browse and read the storys. Personally it feels to me like some kind of designer-house where I don’t want to live in, even though I admire the brilliant design and solutions.
I also see that “Content first” is the way to go, but do we really have to sacrifice personality and treat every website as an anonymous container for content? What’s about terms like “atmosphere”, “personality”, “user experience”? When I walk into my favorite shop in my town, it shouldn’t feel like I was walking into every other shop, it should be a unique experience and atmosphere going on. Sometimes clean and reductive design can be just the right thing to do, but often it’s not I think.
But I think you already kept those differences in mind while you mentioned “progressive enhancement”. Of course, the foremost priority is accessibility, but I just wanted to point out that web designers need to be careful. We can’t just tear off the flesh and blood of the design process and stick with the bones. Humans are also emotional creatures.
Peter, I have a similar concern.
If Internet can be seen as a tool that’s in the service of the human desire to communicate (at least remotely) with one another then it may be a good idea to look more closely at the visual component of this tool.
Here I sit in front of this screen for eight hours a day. It’s true that I’m receiving impressions that have to do with how another person has arranged a series of words to convey an idea or emotion.
But, it’s also true that I’m receiving impression that are purely visual. A block of text communicates verbally, but it also reaches my eye as a text-ural shape that has a visual relationship with it’s surroundings.
The notion that visual/compositional relationships have a strong ability to communicate has been understood for thousands of years, and I find it supremely arrogant on our part to think that, in the space of thirty years, we can cook up a new and improved communications tool (i.e. the Internet) that ignores visual form.
So the tables are turned, and we as humans now find ourselves serving the Internet, and scrambling to keep up with this technocratic network that (each Fall season) produces every kind of screen size, screen proportion, and screen resolution under the Sun.
Many of these technocrats even go so far as to try to persuade me that their approach to web design is very much in alignment with Daoist principles! There seems to be this push to develop an automatically responsive web design, yet we ourselves seem reluctant to take a certain responsiveness upon ourselves with regard to developing visual relationships into what might truly be called a visual compositions.
The question for me is not so much about getting stuck on print layouts versus web, but about whether the web will become a tool for verbal communications only, or a tool for verbal and visual communication together.
Nor do I think that visual composition should be belittled with the industry-specific word of “style”. By “visual communication” I’m not referring to a kind of stylistic frosting that we find in the ever popular world of website “themes”. Instead, I’m referring to a deliberate attempt at creating a sort of “visual body language” that can be arranged upon a two dimensional surface (be it paper or pixels), and which complements the verbal content.
Paul, thanks for bringing up the question of aesthetics.
Even though this is written a year ago I suspect this information to remain relevant for some time (possibly indefinitely). I find it interesting that the web went from using basic colors over a decade ago such as the Hot Wired example you pointed out, then started using much more graphic intensive designs (often since the increased bandwidths could support such, and is now reverting to more simplistic designs again now that bandwidth along with screen space are issues. Do you suspect we will see a reversion back to more graphic intensive web designs as mobile speeds increase? I suspect that most people now enjoy the benefits of simplicity with a cleaner layout (such as with BBC news) and do not trend back to more immersive designs unless (certainly possible) technological advancements allow them flourish once again.