WPDFD Issue #24 - March 01, 2000

Advanced Techniques

INTRODUCTION This section covers some more advanced techniques for Web page design. When I say 'advanced' I don't mean bleeding edge technology, I'm just pushing the envelope of existing technologies to give these pages the 'edge' over the plethora of basic, push button solutions built into many editors and image manipulation programs. Hopefully, the basic ideas and principles here will provide inspiration for you to produce even greater things.


The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy! Reading a book is essentially a linear process. You start at the beginning and read to the end. Some books, and all newspapers and magazines are designed to be dipped into at will. You don't have to read the whole thing, but the bits that you do read, are read in a linear fashion.

This month, I have a major new featurein WPDFD. It is the first of a series of 'Masterclasses' on aspects of Web page design. This one is called 'Advanced Techniques' but there will be something for newbies too, at a later date. Before telling you what the advanced techniques are all about, let me give you a little background. Being primarily a graphic designer, I am more interested in communication and less in 'razzle dazzle' gimmicks.

JavaScript Charts

Charts don't have to be static GIF files, here are some ideas for manipulating graphics using JavaScript to produce dynamic and stunning charts and graphs. You feed them the raw data, and they draw themselves. By manipulating the height value of an image, it is possible to produce graphs and charts dynamically. This function takes the Y-axis value (h), scales it to fit a given height, and document.writes it into a table cell in the specified color (c).

Adobe SVG

Wouldn't it be nice to be able to design a Web page where you could use any layout you like, any set of fonts, whatever images or animation takes your fancy and to be certain that they are going to download quickly, look the same in every browser and print just like they appear on the screen? Pipe dream? No, it's closer than you think. Adobe have just launched public betas of their implementation of SVG, or Scaleable Vector Graphics.