The Electronic Canvas:
Web Designer Beware!!

This is one in a series of Presentations given by Bud Kraus, Web Design Instructor and Consultant. Contact Bud at bud@joyofcode.com or 973 25 1452 if you'd like him to present any of these talks to your business or organization.

Old World vs. New World Media

Understanding where we are in today's electronic environment we look to the past and draw distinctions between the Old and New Worlds.

Why Is It Important To Know About The Electronic Canvas?

Choosing one perspective over the other - Old World vs. New World - is as much an expression of values as it is an artistic choice..

What are some of the implications for design which tilts in the direction of either world?

• How businesses are organized
• How employees work
• How customers are treated

That's why design choices matter. Are you going to design for The Electronic Canvas, or are you going to remain stuck in the Old World?

It's The User, Stupid!

Who rules the online experience?

Those who acknowledge and embrace the New World paradigm and put personalization at the center of their service, will be in the best position to serve their users/customers effectively.

A benchmark for determining how a site was designed - Old World or New - is an organization's concept of who's in charge in the online world. Their design is their expression of that concept. Do they understand the implications of the differences between paper and electronic publishing? Do they get it?

The three main forces that have much to say about who rules the online world are the Client/Site Owner, the Web Development Team, and the End User.

Spheres Of Influence For Web Site Design

The answer to the question, "Who Rules The Online Experience?" ought to determine in whose favor design should lean.

In the Old World, there is no user. Only a passive reader unable to rapidly act upon anything on demand.

In the New World, design for The Electronic Canvas is a pas de deux between the designer and the user where the values are embedded in the design. This "dance of two" lies at the heart of communication between the site and the user.

Who rules the online experience? All 3 have influence, but in electronic publishing the user can exercise the greatest influence over site design. Don't ever forget that!!

In print design, it is the client who is in the Center of the design.
In electronic design, it is the user who must be served first.

It is the nature of The Electronic Canvas, and the user agents (browsers) which operate within it, that is the controlling factor as to how successful sites are made.

Web Designer - Beware!!

The Theory Of Relativity

Einstein got it right.

He really was on to something when he realized that Velocity, like much in our world, is relative.

If you're driving 85 MPH on the New Jersey Turnpike, are you really going 85 MPH? Not really. The speedometer says "85," but did you forget that you're on a planet which is spinning around every 24 hours, which in turn is spinning around our sun? That package (our solar system) is spinning around the Milky Way which is also spinning around our galaxy, and that glob is spinning around the universe.

I get dizzy thinking about this stuff!

Clearly, you are not moving at 85 MPH in an absolute sense. Everything is moving at one time. The speed at which anything is moving is relative to something else. Everything is relative.

What the Good Professor couldn't know was that his Theory Of Relativity would hold true in the electronic world too.

Why? Because The Electronic Canvas is a stretchable and fluid surface. Just about every conceivable notion about measurement is relative in it and is measured against something else.

Elements Of The Canvas

No matter which display environment your design ends up in (i.e., which user agent is involved), chances are you're going to be dealing with The Electronic Canvas. The Electronic Canvas features the interplay between

• Screen Resolution
• The Viewport
• Re-sizing The Viewport

What do all of these have in common?

• Bubble Gum
• Saran Wrap
• The Electronic Canvas

They all share the stretchability gene, expanding and contracting in the hands of a user.

The fundamental difference between print and electronic publishing is that, with the latter, the designer has no control over the size of the user's viewing surface. It's not just the different sizes of the screens, it's the user's ability to change a screen's resolution by changing the operating system's display driver settings. Add to this the possibility that a browser might not be opened to its maximum viewing area.

This makes The Electronic Canvas fluid, liquid-like, and stretchable just like Silly Putty.

Because of the "Silly Putty Factor," it's a myth to think in terms of design that has to work only in one type of resolution.

The Wrong Question

Have you ever asked, or heard someone say, "What is the optimum width for a web page?"

When web design teams sit around pondering what is the optimum width for their design , they are asking the wrong question. They ask, "Should we design for 800 pixels wide X 600 pixels high? But isn't everyone using screen resolutions of 1024 X 768 these days?"

That question may have led to this MSNBC site of several years ago.

The site's designers thought that by choosing a fixed width of 779 pixels they could control the design on everyone's screen. They were designing for paper, not The Electronic Canvas. They were using "print think."

This is the question that should have been raised:

"Should we use an absolute (fixed size, like pixels) or a relative dimension (like percentage) for the width of our web page so that it will have integrity - that is, work for the greatest number of user agents for the betterment of the greatest number of users?

There's that word "relative" again. The Electronic Canvas is a surface of relative dimension.

Let's apply "print think" to another electronic canvas, television, which has many different screen resolutions and standards.

Shouldn't President Bartlett fill up the entire screen and not just the left side? (Get it - left side?)

Of course. If you saw this picture on your TV screen,you'd think something was wrong with your TV or the way the show was produced. Why don't you think that something's wrong when you see a design like the MSNBC example?

It's all relative. No matter what size TV screen you're using, chances are Bartlett is going to fill it up.

There are certain laws, like gravity, which can't be ignored. You can try, but you won't get very far.

---

Can Users Change Their Screen Resolution? What Are The Trends?

Computer users can change their screen resolution by adjusting the display driver.

Most Widely Used Display Drivers

Resolution	Percentage Of Users In 2005	Percentage Of Users In 2001
640 x 480	0.6	7
800 x 600	25	53
1024 x 768	54	31
1280 x 1024	14	3
other	-	4

The trend is clear. Miss it and your designs will not be forwardly compatible.

What's important is that, over time, screen resolution sizes change and get larger. Don't be surprised to see the "standard" go to 1280 X 1024 in the near term. Are you going to be making designs today that will be needlessly out of date tomorrow because you chose not to work with the characteristics of The Electronic Canvas? Are you going to work in a fixed dimension, such as the above example with MSNBC, and end up with an "ever shrinking web page?"

I got my information from the following three sources. "The Myth Of 800 X 600" is a great read and the inspiration for this lecture.

• The Myth Of 800 X 600
• Browser Display Statistics
• Resolution Trends

Still not convinced that The Electronic Canvas is a world of relative sizes? Answer this question: What is the default width set for XHTML elements? Is it pixels or percentages?

The Viewport

The viewing surface of a user agent is its viewport.

Characteristics

• The areas in gray are known as chrome and reduce the size of the viewport. The uppermost area holds the Title and toolbars. The right side is the scroll bar. The bottom is the status bar.
• Chrome dimensions will vary between browsers and users. For example, toolbars will reduce the height of the viewport. The width of scroll bars can be adjusted in the operating system.
• Most chrome can also be removed with the Full Screen command.
• With larger resolutions, more content can be shown in the viewport.

Resizing The Viewport

One of the most significant unknowns faced by web designers is the width and height of a given user's viewport.

Viewports can be scaled to a maximum width and height of 100% to a minimum of 0% - with any size in between. Unlike changing a display driver, most users know how to minimize and maximize their viewports. Many of those users also know how to resize between those options.

Good news. Modern browsers do a much better job than their predecessors with resizing in a way that will not break your design. Even if the designer gets it wrong, the browser can get it right.

The Electronic Canvas - Test Suite

I recommend that you develop your design test suite to include evaluating your design in some or all of the following:

• a wide range of display drivers beginning with 800 X 600
• a wide range of browsers in their most updated versions
• legacy browsers as deemed necessary
• Windows, Mac, and other operating systems
• viewports maximized and re-sized to different dimensions
• Page zoom (Opera)
• Full Screen View
• Different Font sizes (not discussed above)

Test your design with these variables in as many combinations as possible. Testing should be done with a user group. Don't let the experts test!!

Tricks Of The Trade

Guiding Principle: Follow The Rules

Use web design standards. They were developed to give designers, developers, and page authors the ability to create user-centric interfaces, the principle difference when compared with traditional, print design. Design which puts users in the center gives them the sense of mastery they need to quickly achieve their goals.

User-centric design is the difference between web sites that succeed and those that do not. It is a guiding principle to successfully working with The Electronic Canvas.

Fortunately, the rules fall under two inter-connected ideas. It's easy to do both at the same time.

1. Validate Markup To Published Norms

Your code, principally (X)HTML and CSS, needs to be tested - validated - by the free Validation Services provided by the World Wide Web Consortium.

2. Physically Separate Structure From Style

If your pages validate, chances are you're doing a good job separating page structure from style.

All good design of any kind usually requires the separation of structure from style. If web pages were buildings, the XHTML would be the foundation, floors, walls, and roof, that is, the elements to which wall coverings, window treatments, moldings - our CSS styles - are applied.

Use XHTML elements to build your structure. Use CSS to make it pretty!!

The structural requirements of a web document are handled only by (X)HTML. Structure organizes content into meaningful information by using:

• Headings
• Paragraphs
• Lists
• Table Data
• Links
• Forms

(X)HTML elements provide the meaning, semantics, and purpose to our documents. They are never about style, appearance, layout, and presentation. Those matters are left to CSS properties such as:

• Font
• Text
• Padding, Border, and Margin
• Color
• Background
• Float and Position

How did we end up with the World Wide Mess? We didn't separate structure from style.

Why?

Today's bad web design practices were born in the era when browsers did not adequately support CSS. Hence, much of a page's appearance was accomplished by manipulating HTML for its apparent presentational properties to achieve a style workaround.

For example, designers were (and still are) using

• table based layout
• decorative images embedded into their pages
• outdated elements, such as the Font and Center tags
• proprietary code

Examples Of Bad Practices:

• using <ul> or <blockquote> when you want to indent and move content to the right
• using Heading Tags (like <h1>) when you want the font to be larger
• using transparent gif images to create white space between elements
• using deprecated tags like <font>

Slight Of Hand - Tiling A Background Image

Here's a real neat trick that resolves a width issue as it might pertain to a page's header. It also illustrates the difference between an embedded image and a background image.

As much as anything this demonstration will show how you can make The Electronic Canvas work for you.

Controlling Width

Users are not happy when they need to scroll horizontally when the viewport is at maximum. This makes the width of a page a sensitive issue.

Use CSS to influence the width of a page or elements within it.

Here's a simple example showing the use of the width, min-width and minimum width properties of CSS.

I'm Looking For A Few Good Web Sites

For whatever reason, I picked on the following sites to judge them for their "electronic canvas-worthiness." I do this at the risk that these sites may have changed, making my comments obsolete or irrelevant:

The criteria I'm looking at are:

• The Electronic Canvas Test Suite
• Layout Method (Fixed, Liquid or Combo)
• Font sizing (Fixed or Scalable)
• Use - or absence of - graphical text

Killersites.com

• canvas scales
• font size is fixed
• graphical text used but good "alt" tagging

Reasonably high end production values on a scalable canvas.

A List Apart

• canvas is fixed
• font scales
• no graphical text (navigation is list markup)

These guys are the gurus of the most sophisticated web design. No tables.

Wired

• canvas is fixed
• font scales
• virtually no graphical text

The Digerati are model citizens of the web - and their origins are from the Old World.

amazon.com

• canvas scales
• font scales
• little use of graphical text

Amazon, like Wired, spent a fortune to get this way but they can move forward for years to come with their design. They're the consumer-centric company and it shows!!

New York Times

• fixed width
• font scales (yes - the Times Old Gray Lady scales much of its font - can you believe?)
• moderate use of graphical text with shaky "alt" tagging

The oldest of Old World companies have come a long way but they still have some work to do.

Design Is Always About Making Choices. Make Sure You Understand What Those Choices Are, Then Choose Wisely for The Electronic Canvas!!