Che Tamahori

elastic web pages

> Verbiage

Verbiage is a random thought, but a deepfelt one. More importantly, it demonstrates a web design principle I wish people used more often -- a composition that flexes and scales to fill whatever space the audience allots it. Go to Verbiage, and play around with different window heights, widths and sizes...

One of the best know examples if this kind of layout must be Brad Johnston's contents page. The great thing about this approach is that you retain control as a designer, without trying to enforce a fixed display size on a diverse audience. After all, how much control does a one pixel GIF give you if that pixel is a different size on every screen... hmmm?

The secret is to use percentages instead of fixed sizes for table and image dimensions. When browsers come across images that need to be reduced in size, most do an admirable job of anti-aliasing the result. And tables can be created that control layout based on a regular subdivision of the visible window, rather than fixed width tables that look ridiculous on high-resolution monitors.

HTML layouts like Verbiage can have a variety of contrasting scales within the elements, and you can play on the course nature of the scaling technology. Yet if an appropriate native size is selected for the images, even small letterforms look fine as they change in size. Ideally, the composition will be visible in the smallest window, yet comfortably fill a 20 inch trinny.

Note that the main image in Verbiage [here] is actually only 100 x 75 pixels in its native size. Using this technique, anyone can fill a screen, even on the meanest bandwidth; the entire page is only 12kb with all the graphics.

home / thought < > elastic web pages

> shockwaved ideas

c o n t a c t   m e  :  c h e @ s f x . c o . n z