Designing the Sustainable Web

The Web Standardistas gave their keynote on designing the sustainable web at DrupalCon London on Thursday 25th August, 2011.

To begin with, they’ve surveyed the landscape and looking at the history of web design, however their not going as far back as Tom’s keynote yesterday. In the last few years we’ve seen a proliferation of devices, including smartphones, tablets, desktops, laptops and old phones. Bringing that together makes it a difficult landscape for designing. Also, the context has become to change, as we’re consuming the web pretty much everywhere. In this regard we don’t only have to think about screen size, but also the shift of content. As designers, we need to present the content relative to where it’s consumed.

How do we confront this challenge? We need to create a sustainable web through a thoughtful combination of beautiful markup and classic design. It’s not about building from the top, but from the bottom up. There are a lot of sprinkles that you can add, including gradient, highlights, text shadow etc, but you need to start from basic principles, including hierarchy, composition, typography, semantics, device independence and openness.

As a beginner for composition, we need to look at design principles within print. There are basic things that have been refined over hundreds of years that still stand as true for good web design as well. With typography, there are also a few classic print-based rules that should be adhered to. But none of this is really new…

What the Standardistas suggest is the ‘Iceberg method’. We usually only care about what’s above the water or what’s below the water, but now we have to start caring about both. We begin below the water with the Markup Timeline, which are encompassed by semantics, device independence and openness. Back in the early 90s, all code was semantic, as it was mostly text based. What happened in the late 90s was animated gifs, tables etc came along and moved semantic markup away from what it was intended to do. Zeldman pulled together the community by taking over the Web Standards Project (WaSP) to take semantic back to what it was intended to do by adopting a standards based approach. Markup is evolving and we can learn from along the way. In the end, we need to understand that HTML is a design element, and we should treat it as such.

On the design layer, if we look at composition, hierarchy and typography and look at classic ideas of balance and weight within print design principles, we can create some beautiful looking pages. If we combine the two that’s how we move towards beautiful and sustainable web design. Some great examples are this year’s Build website and the 5 Simple Steps website (and the books), as well as Simon Collison’s personal site and the CSS Zen Garden.

Together, these make a marriage made in heaven to create well balanced, beautiful and sustainable web design.


Q: Are there practical ways of applying typography rules in our web design?

A: Tim Brown from Typekit has a website called Nice Web Type, where they have a lot of articles on the topic.

Q: What are your feelings on moving away from XHTML markup to HTML5?

A: It’s something we’ve been rattling with for a while. When you had the strictness of XHTML you had to say ‘you had to do it this way’, whereas HTML5 is a bit wishy washy and says you can do it a bunch of ways. It’s more of an open landscape, but what you decide to do should be an informed choice, and be more about guidelines and standards than what is valid and works.

Q: When it comes to new devices and grid systems, how do you apply grids to a device that has no physical bounds?

A: You have to think of a grid system that’s appropriate to each of the devices. The heart is understanding the way the content works with the designs. Also, you need to think more in percentages and ems rather than pixels.

Suggested reading

HTML5 for DesignersJeremy Keith

Responsive Web DesignEthan Marcotte

Ordering Disorder: Grid Principles for Web DesignKhoi Vinh

Grid Systems in Graphic Design: A Handbook for Graphic Artists, Typographers, and Exhibition Designers - Josef Muller-Brockmann

The New Typography – Jan Tschichold




Published by Luke

Luke is one of Ubelly’s resident social media guys, occasionally switching hats for a bit of design. He is the in-house meme expert, uses foursquare a little too much and gets hot under the collar when it comes to design, usability and gorgeous code.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>