The following is a little tutorial for cross-browser development of a fullyscalable HTML layout. For example, look at the currentPeecho website. If you resize the window, you will see that thewebsite resizes itself, including fonts and such - while keeping it'soverall aspect ratio intact. To put it simple: if you make thewindow smaller, the entire website and its fonts become smaller, too -and vice versa.This means that the designer has full control over the appearance of thewebsite, regardless of the resolution of the screen or the window size -which comes in handy for handheld devices like iPad tablets and such.While this used to be relatively simple if you use only Flash, it ispossible using HTML, too.
First, you will have to create a website layout that is based onmargins, padding, element and font sizes that are relative to the CSSfont-size percentage of the top level element: the HTML body. Inpractice, this just means that you cannot use pixel sizes in yourstylesheet. You will have to restrain yourself to the "em" unit: aunit that is equal to the current font size. In theory, you coulduse percentages as well, but using em results in a moreconsistent appearance in most browsers.Images or Flash objects should have either a CSS width or height definedeither as a percentage relative to their containers or in em -that way these elements will scale along with the rest of the design.For backgrounds, you should use a design with a repeatable image... sothe background will look good regardless of the area it covers.Once your design has been set up, you can start playing around bychanging the font-size percentage of the body. You can try the followinglinks to see what it would do to this site. Refresh the page to get backto the original size.
This was all doable, so let's continue to the real question: how are wegoing to make this work automatically and relative to the window size?