Painting the Web

Chapter 1. You Must Have Fun

Do you remember your very first web page? The first one you ever saw? I remember the first time I saw a web page. I'm not sure if such a memory is unusual, or if many people remember their first glance at what was to become ubiquitous in a very short time.

The time was late 1993 or early 1994. I was working at Intel as a contract software developer when one of the other developers asked me if I'd seen this application called Mosaic. I wasn't among the first to see this new type of application, but at that time the Web was still in its most primitive form. The first web page I saw had a white background, a larger, bolder header, and text formatted into several paragraphs. It wasn't anything special, and nothing to excite interest. However, in the page was a thing called a hypertext link, an underlined piece of text that, when clicked, opened another page—one on a completely different computer, connected to the first only by a domain-driven location.

The second site, like the first, was also incredibly simple. It featured the same black text on a white page, and the only typographical variation was the larger font for the titles. It was completely empty of any graphics. No CSS; no images or Flash; not even a FONT or BLINK. However, the two pages did demonstrate all that was critical about the Web: both pages were available to anyone with an Internet connection, each was at a specific location that could be called up again, and the pages were served through a coordination between server and client that was both unprecedented and mesmerizing.

What an odd way to begin a book about graphics: describing plain web pages completely devoid of any graphics. There is a purpose behind my madness. By describing this earliest glimpse of the Web, I hope to make an important point—that web graphics are not an essential component of the web experience. We can strip a page down to the most minimal markup without any use of Cascading Style Sheets (CSS), images, Scalar Vector Graphics (SVG), or Flash, and the page continues to be Web-like and useful.

Graphics are not necessary to the web experience. They can, however, add immeasurably to the richness of the Web, making the difference between a site that's lively, compelling, and exciting, and one that's merely functional. By looking at web graphics less as an essential component of the Web and more as an exhilarating companion and accessory, we can begin to free ourselves from the restrictions on, and requirements for, web graphics that have sprung up over the years, and to push against the "musts" that have constrained their use. Musts such as the following, for example:

• Web animation is good. On the other hand, web animation is bad. Same for Flash, Ajax, scripted effects, SVG, the canvas object, and so on.

• The creation and use of web graphics should be left to the professionals. One must have years of training and be hugely dedicated to work with web graphics.

• Sophisticated graphics require expensive software and equipment to produce.

• Web graphics are inaccessible bandwidth pigs that eat mobile devices for lunch.

• Web graphics are serious business because, as everyone knows, working with web graphics is hard.

So many musts, so little time.

I'm reminded of one of my favorite scenes from the Kevin Costner movie Robin Hood. In the movie, a Moor named Azeem (played by Morgan Freeman) is sitting at the edge of a village celebration, light shining on his dark skin. A cute little village girl approaches him shyly and asks, "Did God paint you?" Azeem responds in surprise with, "Did God paint me?" He then laughs gently and replies, "For certain." "Why?" she asks. "Because Allah loves wondrous variety."

All the various forms of web graphics—from CSS to images, Flash to SVG—can be many things, including useful, functional, and professional. Leaving aside all these practical considerations, though, I like to think that what graphics add to the Web is a wondrous variety. To support such a view, one can't be held down by all the musts; the only real "must" with web graphics is that they don't interfere with the functionality of the page. Once that's assured, anything goes.

In the rest of this chapter—the rest of this book, in fact—we'll look at the wondrous variety of web graphics. In the process, we'll also show we can bust every one of rules just described, and have a blast doing so.

What Was Good Enough for Grandpappy…

A functional world might be efficient, but it's not terribly interesting. It would be like living on a diet of bananas, nut and seed granola bars, and vitamin water—it might keep you alive, but it wouldn't be fun in the long run. In the end, when functionality is pushed up against individuality and choice, individuality triumphs. Black cars were good enough for Ford, but not the rest of us. Black and white TV was useful, but we wanted In Living Color. The whole premise behind the iPhone is that one can never have too many color buttons to touch. The push for variety has been the forerunner for the overall evolution of any invention in the past, and the Web is no exception.

If all web pages were simple text, we wouldn't need the enhancements we've achieved in serving up web applications. We added graphics, though, which pushed the color requirements, as well as the sizes of pages. Our monitors improved, both in size and number of colors supported.

Then we thought, how nice it would be to be able to add interaction and animation to pages. We created animated GIFs, Flash, and JavaScript-driven effects, which attracted more people to more applications, increasing the demand on the Web yet again, leading to yet more improvements in the underlying technology.

Music. Did someone mention music? Music to download, music to share, music to create and publish online, and music to sell. In just a few short years, the iTunes, eMusics, and Amazons have redefined not only how we use the Web, but how we find, purchase, and listen to music.

Of course, now we're faced with the ultimate media: video, including complete movies being streamed from sites. Let's see, tonight I think I'll watch Core through Netflix. Or perhaps I'll watch Max Headroom through Joost.

Pop! There went the Web! None of this is essential to the Web, but having access to such things has become essential to us. Some would say it was the economy of the Web that pushed improvements in web services. I put such improvements firmly on the graphical goodies.

Which of the items mentioned, though, are web graphics, the topic of this book? Most people think of image files with extensions of JPEG, GIF, or PNG when they hear the term "web graphics." However, I consider anything that impacts the visualization of a web page, above and beyond the components that provide the initial structure, part of the family of web graphics. This includes:

• Image files, as we would expect

• Visual attributes associated with the page elements, and the CSS that controls them

• Embedded or integrated graphics, such as VML, VRML, SVG, and the canvas element/object

• Scripted effects, such as those made popular with DHTML and now Ajax

• Packaged, interactive animations such as those provided by Flash

• Frameworks and libraries that generate graphical effects using any of the above

The one item missing is video, and that's primarily because video examples are a little hard to embed in book pages. Perhaps by the time this is ready for the second edition, we'll have a workaround for this particular challenge, and I'll add it to the list. For now, other than video and Flash, these items form the basis of this book.