#29 Liquid, stretchy web pages

I saw a nice webpage layout in a PDF tutorial. The page was laid out in quadrants and my first reaction was, "I wonder if you could build that using HTML Frames using percentages for the individual frames instead of fixed widths."

So another experiment was born. I do not advocate usage of Frames because of the mantra out there on the Internet to "Never Use Frames". But I obviously don't care. The complaint mainly originates from formally-educated programmers because they were taught such stuff in school. As Mark Twain said, "I never let my education get in the way of my learning."

I've attached some stills that compare browsers set at different window sizes to demonstrate the changes. Here's a live page so you can play with it and explore.

To make this work, I bought a Flash script from ActiveDen for $10. I wanted an image rotator that produced some dynamic resizing of the JPEG images. Meaning: if the screen dimensions were altered the image would try to reshape itself to match.

The script I bought rotated 6 images each time the page reloaded chosing from random but never reshowing the last one viewed. That seemed handy and it was editable in Flash version 8 which I happened to have. I'm not a Flash programmer but I wanted to remove some of the "extras" from the script and also make it into a 2-image rotator. It was actually pretty easy because the code was well documented (i.e. Change this number right here, stupid!). I just reload the same image for each time on this site. A cheap trick to make the Flash widget do what I wanted.

The interesting thing about the Flash script was it built the image from the top-left corner and tried it's best to match the height and let the horizontal aspect ratio follow that. This actually worked pretty well. But I had to adapt images so most of the JPEG image "baked-in type" was to the left.

I used stock animal images from stock.xchng. They were free. So the animal photos are used throughout.

If you'd like to learn some extra goodies to educate your clients, download the free PDFs in the SEARCH and DESIGN sections of this demo site.

In these attachments, look primarily at the jaguar to see how the image gets cropped in different ways but still works. Test the other pages live.

The links on Firefox are different (white) because they have all been "visited".

Different and smaller aspect ratios on the same browsers. As you can see Flash and Frames work on all desktop browsers. Where they have failings is on mobile or Apple devices that don't support those technologies. Mobile is growing fast.