PapaGeek

I just added a new feature to my Variable HTML script and I’d like to get some opinions and suggestions.

Sometimes, when creating a fluid design website, you’d like to include some images that are rather large. Of course this defeats the purpose of fluid design because as soon as the image fills the entire width of the screen, the page can’t shrink any further.

The process works off of the class name in the img tag. The image in the example has the class name: vis95p700x. where the “vis” flags the image for processing, the 95p says to make it 95% of the width of the page (less exclusions), and the 700x says the max width is 700 pixels. Additional fragments of the class name could be 400n to indicate a minimum width of 400 pixels, and 350e to exclude 350 pixels from the page width before calculating the percentage.

In the example, the “excluded” area is handled by the Variable HTML control file because it changes as the layout changes.

Sorry if that sounds a little complex, it isn’t that easy to explain. I’d love to get some feedback on how to explain that in clearer terms.

Please check out this page and notice how the image changes size as you change the width of the page.

http://www.variablehtml.com/readability.htm