|
The Electronic Canvas: Designer Beware!!By Bud Kraus
Understanding the nature of The Electronic Canvas is essential in the development, design and production of web sites which yield the highest values and best experiences to users and clients. Ignorance is just no excuse. It can lead to unexpected consequences. Working with the dramatic and profound differences between the electronic screen (proportional and scalable display) and fixed media (whose display dimensions are fixed in size) is essential to designs which will work for everyone, everywhere. Designs which will have integrity today and tomorrow. These facts must be kept in mind whether you are a web designer, author, or content creator.
Old World vs. New World MediaUnderstanding where we are in today's electronic environment we look to the past and draw distinctions between the Old and New Worlds.
A Matter Of ValuesChoosing one perspective over the other - Old World vs. New World - is as much an expression of values as anything else. What are some implications of the Old and New World? It affects:
Who Rules The Online Experience?Those that understand and embrace the New World paradigm will be in the best position to serve their users/customers more effectively with personalization at the center of their service. A benchmark of determining where a site lies - Old World or New - is an organization's concept of who's in charge in the online world and how 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? Three main forces have much to say about who rules the online world - the Client/Site Owner, the Web Development Team, and the End User.
The answer to the question, "Who Rules The Online Experience?" ought to determine in whose favor design should tilt. 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 design. Answer to the question? All 3 have influence but in electronic publishing the user can exercise the greatest influence over site design. DOn't ever forget that!! The Screen As Silly PuttyThe 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. Look at these screenshots of msnbc.com taken before their major re-design in 2005. It's illustrative of so many sites.
Note that when the width of the page is set to a fixed size (in this example MSNBC had it set to 779 pixels), the page appears different depending on the display driver. "So what," you ask? What do you see?
If the New York Times took the "printhink model of web design" and used it for their printed version would they leave 25% of the paper blank, like this?
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. In the next few years, with improvements in CRT and LCD monitors expect to see the "standard" go to 1280 X 1024. 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 two sources. "The "Myth Of 800 X 600" is a great read and the inspiration for this lecture. What about display drivers? Can users change these settings? Here's how.
The Theory Of Relativity Einstein got it right. Everything is relative. He really was on to something. Everything is relative. If you're driving 85 MPH on the New Jersey Turnpike, are you really going 85 MPH (even with your head sticking out of the sun roof)? Not really. The odometer 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 85MPH in an absolute sense. Everything is moving at one time. The speed at which anything is moving is relative to something else. 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. Still not convinced that the electronic world is a world of relative sizes? Answer these:
It's all relative. Hallmarks Of Good Design For The Electronic CanvasSo is good design for the web only about understanding the nature of the effect a display driver has on your designs? Hardly.
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 our CSS styles - wall coverings, window treatments, moldings - are applied. Use XHTML elements to build your structure...
then use CSS to apply style to the structure. Some CSS Properties
Separating Structure From Style Means Using Tags For What They Were Designed To Do And Nothing ElseExamples Of Bad Practices:
Instead Of This, Try This....Here are 4 examples which leverage the power and principles of the electronic canvas and move you away from "printhink." 1. Life Without SpacersMany designers still rely on lots of transparent .gif images to control spacing between images, text and other elements. Get rid of all that unnecessary page bloat. It can be done!! Instead of using a transparent image to provide padding like this...
try using CSS padding properties to provide white space between images.
2. The Background Of A Good Tiled HeaderCSS background properties allow for placement and positioning of images which repeat. This means that many graphical elements can be designed to appear to scale as opposed to the use of a singular image whose width and height are fixed. Instead of creating a solid mass header like this whose width is fixed at 706 pixels... Browser View  Code View try using a header and a tiled background image which scales like this Browser View
Code View The 3 images used to make a scalable composite header were:
Ideally, you'd like to have the Silly Putty logo and eggshell images on a transparent background. The background image (in the middle) was kept unusually large (64 pixels wide) because I wanted a certain textured look. 3. Scaling TablesWhile using CSS for content layout is gaining favor, tables remain the number one method to organize content. Instead of creating tables with a fixed width (such as 400 pixels wide) like this... try making your tables scale using a width percentage (in this case width="50%") like this. 4. Relative Font SizesThis one's as controversial as the above. Instead of The choices users have to change a page's font size depends upon the browser and operating system they are using. In this example I set my font size to 10pt but see my WARNING which follows. Try this The choices users have to change a page's font size depends upon the browser and operating system they are using. In this case I am setting my font to 95% of the user's preference. My font will reliably be 95% regardless of the browser or operating system. WARNING!! Do not get fooled into thinking that because the font size is 10pt in the first example, that the appearance of the font size will be the same in every user's browser. The actual size of the font will vary depending upon the operating system and screen resolution. What Do All 4 Of These Examples Have In Common?They don't runaway from the nature of the electronic canvas. They embrace it. XHTML and text copy are the only elements that are truly native to the web browser environment. All other elements - including .gif and .jpg images - are not. Images are names of files inserted (referred to) into the page and not the image itself. Almost all other media require embeds, applets, players and plugins. Take the hint. Why not lean the hardest on XHTML and text copy which are native to web browsers? What Am I Looking For?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:
Reasonably high end production values on a scalable canvas.
These guys are the gurus of the most sophisticated web design. No tables.
The Digerati are model citizens of the web - and their origins are from the Old World.
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!!
The oldest of Old World companies has come a long way but they have some work to do. Design Is Always About Making Choices. Make Sure You Understand What Those Choices Are, Then Choose Wisely.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Bud Kraus: friendly@joyofcode.com | © 2000 - 2008 TryNet, Inc. | 973 235 1452 |
Summary
