New blog series: Designing for the Web Canvas

As a professional web shop, our HTML / CSS developers are frequently taking a professional graphic artist’s vision of a website’s look and feel and converting it to work with this unique canvas we call a website. The graphic artists’ digital toolbox is full of powerful applications like Adobe Photoshop, that provide near total control over the final presentation, on a fixed sized canvas, down to the pixel.

There’s one big problem: the web developer’s canvas just isn’t that controlled or robust. And it’s not just that the unique characteristics of web layout or the code that defines how a web page should look lacks a good way to pull off a design element (which it does, often enough). There’s a bigger problem: several kinds of interpreters trying to understand the canvas, each with its own quirks and limitations. Welcome to to the world wide web canvas.

Of course, our interpreter is the web browser. There are four of them that have over 1% of market share (see the statistics here). Among the two big players, Microsoft Internet Explorer (IE), and Mozilla Firefox (Fx), there are plenty of old versions still in mass use. Even though IE7 was freely released over 1.5 years ago, the previous version (IE6) still has over one quarter of browser market share. IE6 was released in August 2001; almost 7 years ago! The last service pack to IE6 was released nearly 4 years ago. Anyone think that web design standards haven’t evolved over the last 4 years?

The standard tags and attributes known as HTML and CSS that tell your web browser what to display and how to display it are defined by the W3C. These standards are, of course, updated at very regular intervals. Constantly evolving standards let us web developers realize increasingly more complex layouts and designs in increasingly more efficient and elegant, or at a minimum, logical ways. The latest standards on paper offer incredible power and control over layout.

But even the latest versions of the web browsers not only fail to support all of the latest standards, they often:

  1. Differ in which of the newer standards they support
  2. Don’t always handle more complex standards uniformly or accurately
  3. Try to differentiate themselves by offering unique, nonstandard features
  4. Are prone to different bugs and quirks under more esoteric applications

And of course, if 25% of our clients’ audiences are still using IE6, we better make sure our code works with seven year old IE6. That often means giving up some of the power offered by newer standards.

To put this all another way, not only are web developers confined by the hard limitations of even the bleeding edge standards, in many cases, supporting the website’s audience often means catering to the lowest common denominator among the major browsers.

Don’t worry; as the many elegant websites out there demonstrate, it’s not all doom and gloom.

First of all, when push comes to shove, professional HTML / CSS developers like those at C. Murray Consulting can work around many of the hard browser limitations by balancing strict standards based design with legacy approaches, browser specific code, or other creative and unique solutions. Of course, the best approach is to avoid ending up there in the first place!

Many web development companies, including C. Murray Consulting, offer professional graphic designers with expertise or concentration in web development. These designers are able to build beautiful and functional layouts by being mindful of the final canvas’ unique properties, both wonderful (like animation or mouse over effects) and limiting or excessively difficult to effectively realize.

In many cases, however, clients choose to use talented in house designers or other graphic artists that may have an established relationship with the customer. Even clients that do outsource design to web professionals often have some great ideas for the website, sometimes even some very specific proposals.

The bottom line is, many stakeholders have valuable input to offer in the creative design process. One of our jobs is to communicate when and why certain approaches may or may not be prudent or cost effective. The purpose of this series of blog posts is to help educate web development clients and non-web savvy graphic design professionals about some of the unique properties involved in designing for the web. We hope these posts will be informative to aspiring web designers, and a useful, articulate library of information for clients involved in the design process.

Keep an eye out for the first post we’ve planned on this topic, which will discuss typeface and paragraph styling characteristics on websites.

Leave a Reply