The Green Team, Part I – The role of Art Direction in Sustainability

This post elaborates on some earlier discussion of the role of various roles in a web design/development group, and how each person’s work relates to the larger goal of creating more sustainable websites. In those posts I called out Art Direction and Hardcore Coding as the two parts of the team pulling away from sustainability, and UX, Front-End design/development, Interaction Design members as  frequently pulling the team to sustainability.

Let’s remind ourselves what sustainability on the web is – we want to Internet to hum along, without degrading the larger world (by sucking too much power due to inefficient websites), and internally (via sites optimized for users and use). The goal is long-term stability, rather than unlimited growth. Too much growth in the virtual realm is big images,  big code libraries, extra rich media, and the like, when greener solutions are possible.

Let’s also remember that sustainability is best achieved by a team of “hybrids” who know each other’s work. This allows issues like efficiency to come up through the iterative design process. In a hybrid world, the hardcore coder may be a great designer, but they have taken some design classes and they understand why design is important. The designer may not hardcore coder (though hopefully they understand HTML, CSS, and JavaScript) but they understand it well enough to design for its effective use.

This post concerns the “siloed” – by that I also mean “pure” art designer who doesn’t have these abilities. They are more likely to create an unsustainable website than hybrid designer/developers.  By pure art designer I’m don’t mean “graphic artist” – there are lots of great web designers who have the job description.

Are you one of them? Or are you in a silo?

According to the principles of Sustainable Virtual Design, unsustainable web art has the following features:

Produced using graphic design tools created for non-web media.

Created by print designers who haven’t learned about the web as a design medium, yet “shoehorn” their print design onto web pages. There’s absolutely nothing wrong with print design, and ideas from print have been borrowed for the web, e.g. baseline grids. But the web is not a funny piece of paper with wires.

Created by artists who don’t know how computers or the web works, don’t know any HTML, CSS, or JavaScript, and don’t really understand how the whole Internet infrastructure of clients, servers, and networks come together to create the site you see online. They live in a bubble, assuming that they can create for a medium they don’t understand.

Art Directors, we find you guilty.

You should be making sustainable art in your organization.

Now, I know some of you out there spend all day in Adobe CS, but at the same time you do understand the web as a medium. In other words, even if you’re not a daily coder, you’ve taken the trouble to know the differences between print and screens, between static design and interactive design. You understand Responsive Design and Progressive Enhancement, and you create using these strategies. In other words, you create art for the web. This screed isn’t aimed at you.

At the same time, I bet you have peers who have created web pages and fit the description above.

Well, how does Art become Sustainable? How do we move to Green Art?

First off, it isn’t about putting “green” symbolism in your designs.  A previous post documented the code bloat on many supposedly “eco” websites. Draped in green, they are bloatware. The designers were unaware that onscreen pixels are real, use energy and resources, and impact the overall environment. They treated the web as “weightless”. Thus, their clients now drive to the environmental rally in a virtual Hummer H2.

Now, this is a discussion of your message – but “the medium is the message”. Since the medium is strongly tied to message, art that is unsustainable in a resource or energy sense is also bad message.  So, drop the leaves in your CSS backgrounds – they don’t make you sustainable.

Second, consider your design process. If you do all your work in Illustrator or Photoshop, or worse yet, Quark or InDesign, you’re almost certainly making less sustainable web pages. If you “burn” web pages from these tools directly to the web you are a menace to sustainability. Here’s why:

  • Your design tools use a lot of electricity, when there are more efficient ways to create web assets. A study on Tom’s Hardware found that PShop can grab > 120watts of power off a desktop – it revs the system well past base power consumption or just viewing a web page. For small, low-traffic website, your “energy of design”, spent pushing the pixels in place, might form a significant part of the overall environmental impact of the web page, cradle to cradle.
  • Your design tools start with an implicit bias that your art will be in a fixed with document, like a sheet of paper. This subtly pushes design to a rigid grid with elements “locked” at fixed positions in a defined screen size. In addition, the mechanism for positioning objects in these tools is so different from HTML and CSS that it is easy to make a bloated web page without knowing it. Things that look easy in Photoshop are hard in HTML. Small design changes often cause big increases in usability and efficiency of the final page at the site and user level. Has your art been too precious to allow change?
  • These tools have no support for efficient motion graphics, unless you count embedding a big Flash movie as efficient. Flash can be used efficiently, but burning with something like Catalyst doesn’t make things efficient. Like most machine-generated code (like MS Word’s Save as Web Page…), it is clumsy and results in a larger file.
  • Most importantly, these tools do not support the most important features in art and layout relative to sustainability – Progressive Enhancement and Responsive Design. The web allows you to create flexible grids, and sites that dynamically adjust to(1)the screen size, and (2)the features and limitations of the computer and web browser pages are displayed on. Good web design requires that you apply techniques to make you pages accessible – sites are supposed to function in screen readers (meaning no graphics, or a device that “speaks” the web page to a blind person).

And all of these things are your concern as an artist working on the web. You can’t just hand art to a front-end developer and just demand that it works. If you give them Hummer Art they will produce Hummer web pages. They can’t completely fix what you did, any more than a mechanical engineer can make a big SUV get 100 mpg. You’re the designer. In print design and industrial design, artists have realized this, and design as part of a sustainable process. On the web, it has yet to happen.

If you don’t consciously adopt sustainability in your art, you simply select a default for  the downstream, final sustainability of a website, and the eco-friendliness of your work.

Design is the problem.

It’s not just a problem for your programmers or site engineers. They’re already on it.

You’re the one who is not.

So, how can this be fixed?

First and most important, you have to study the unique features of the web. You can’t treat a web page as a funny electric piece of paper, a canvas, or a sculpture. Prior training in other media is incredibly useful, but it is not a substitute. The web is its own medium. There are well-known and well-thought-out aesthetics and trends that you can apply to your own work.

The three most important for artists to understand are:

  • Progressive Enhancement
  • Responsive Design
  • Mobile First

I’ll go through each in turn.

Progressive Enhancement – Unlike the casual view of a billboard or poster, the web is now a “need” rather than a want. More and more services have been moved to the web, and some of these have replaced the physical-world versions. So, for sites that are important – meaning people really need to use them – it is important that they work everywhere. Progressive Enhance is a strategy to ensure democratic, and (dare I say it) “diverse” access.

The thing is, the majority of web traffic as of late 2011, had become mobile. Desktops are going to be an ever-declining share of the market from now on. But, I bet you work on a 1600×1024 or larger screen, and your Photoshop page comps are nearly the same size. If someone loads them up on a mobile they can’t even get to most of the page, without shrinking it so the type is illegible, or zooming so everyone uses your site like a 95-year old with an eyeglass.

Progressive Enhancement helps sustainability by only sending the website that the browser can bear, or the user wants. On older systems, we don’t automatically download a bunch of scripts and images that we will never use.

Progressive Enhancement requires that you design the page several times, plotting its evolution as it appears on devices with larger screens and more and more features. To support democratic access to the site (including the “browser-challenged”), the same content must be available to all. Of course, this means you’ll have to have some technical understanding of how different browsers display a page – their capabilities and limitations.

Here’s a really great example:

example of progressive enhancement

Here are a couple of examples. In the Github example, note how the artist “let go” for older browsers – but their basic design still holds:

So, your page comp should actually be an evolutionary progression – sort of like the popular row of ape-men to human cartoons. Even though your not a technologist, you have to understand how designs “degrade” on older and less complex mobiles. You have to apply our design to make it the best it can be in all use contexts.

Responsive Design – This idea is related to Progressive Enhancement, and addresses the best strategy for handling the variety of cellphones, tablets, netbooks, and notebooks out there. Rather than trying to support every device, Responsive design uses a set of “device groups” defined by screen sizes and orientations (remember, the iPad and similar devices automatically rotate from portrait to landscape). A series of fixed layout “tipping points are set, using CSS media queries. Selection occurs via likely user viewing context. Then, a flexible grid is defined which shows how page art and other elements should slide together. Images often resize along with the grid. At the tipping points, there are major changes/realignment of page layout.  A designers should be creating art appropriate to each region between tipping points.

There are some beautiful examples of this at the following sites:

Page comps for Responsive Design from DesignModo (I’m showing just one of many here)

Designmodo responsive design page comp example

Here’s an eco-site which also has eco-friendly Responsive Design, and a low carbon footprint to boot:

If we look at the EarthHour site above, we find that its consumption of Internet resources is about half the average for the web in early 2012, and it gets a “B” instead of the “D” or “F” that many similar websites get in YSlow!using similar visual language. Following a responsive design led the artists to create a more sustainable web page.

It’s not just work by the engineer that makes asite more sustainable – it’s the art. IMHO, following Responsive Design helped the artists work in a more sustainable directon.

Mobile First – out of the three principles, this may be the hardest to swallow. You should be designing small first, big later. Starting with mobile screen sizes for your design, then blowing up if necessary for desktops, produces great design in the latter. In fact, more and more sites are making their mobile before their desktop. The desktop versions, derived from mobile, in fact are superior in design to the cluttered, newspaper-like portals produced by the “desktop first” strategy.

Here’s a great article from Luke Wroblewski on “Mobile First”.  In particular, it shows “before” and “after showing how much better the design for the American Airlines site after it was re-designed – first in mobile, then mobile to desktop:

Here’s an example from Spoon5 following a “mobile first” strategy:

Spoon 5 mobile first design

Here, the art improves due to constraint – going the the keyhole of mobile first before spreading out. Constraint, rules, things we don’t do always help the creative process. The extreme focus of a small screen will also focus your work so it is, to put it flatly, better. And your images will be of the “sustainable” variety, even as you move on to design a larger desktop display. If you work in mobile, you’ll also learn the latest standards and formats for the web, all of which are highly energy efficient relative to old school.

Sustainable Virtual Design tries to “Send the recipe”. Most parts of a web page are recipe, with the exception of the bitmap images artists create. Here are new opportunities for artists to “send the recipe”.

  • The rise of SVG Vector graphics – Illustrator can now burn SVG (Scaleable Vector Graphics), allowing you to create hyper-efficient vector art for the web. It’s lots better than the equivalent bitmap in terms of download time, page speed, and device-independent resolution. Today, most browsers support SVG, so it will be the “way to go” in short order.
  • The rise of Canvas – Canvas is an HTML5 tag that can create bitmap images. A series of commands that look like old QuickDraw or Window GDI commands are used (e.g. moveTo(), lineTo()). The commands form part of a JavaScript file. There is a new Illustrator plug-in which can convert graphics to Canvas drawing commands, and it creates files that are much smaller than even a low-resolution JPEG.
  • CSS3 as a way of creating complex gradients – CSS3 has gradient features, but you aren’t restricted to simple ones.  And, the gradients and other image features can be animated in a keyframe-like style. See these articles. Really, if you haven’t learned CSS, now is the time to. Use Safari or Chrome.

Can’t I just have someone “do this” for me? No. If you stay in your old tools, you’ll make hard things that are easy in CSS, and easy things that are hard in CSS. It’s a cool language, and not any harder than crawling through nested panels and control keys in a GUI interface. Learn it.

  • Web fonts and typographic interfaces – The rise of Windows Metro means that everyone is going to be re-thinking icon-festooned sites and wondering if “beautiful type” could replace those images with something both good-looking and highly efficient. Most browsers now support downloadable web fonts, so you’re not restricted to the end-user’s installed font stack. Type-driven interfaces combine message and medium, and will be fast – especially great for mobile access. Polish off your typographic skills – this is a real “green ingredient” for sustainable virtual design.
  • You don’t have to draw in green – this is overused hype. Sustainablity is possible through a variety of methods, most of which do not require a return to the woods. Other colors can mean sustainable, for example blue for the area beyond sustainability where you actually improve things – it’s sustainability 2.0 Throw out the old symbols. Start over.

Finally, here are some technical things you should be aware of. Wouldn’t it be fun to hassle the site engineers about these sustainable web design issues?

Content Delivery Networks (CDNs) – It’s possible to put frequently used images and code onto special networks. The advantage is, that if the resource is shared, mobiles and caching desktops will only download it once. Makes the web faster for everyone. Are you using a CDN for your images?

Static domains for images – Most websites send “cookies” which increase bandwidth and slow things down. Access can be sped up by putting images on a subdomain – e.g., with the main site at Are you using static domains to serve out those images you lovingly create?

This was an “ingredient list” for a more sustainable web. Future posts will deal with other areas of the design team, and how to formalize these ideas into specific work guidelines in a sustainable framework.

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.