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.

Create a design with relative units

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.

• Bodyfont-size equals 100%

• Bodyfont-size equals 110%

• Bodyfont-size equals 90%

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?

Modern browsers: use CSS media queries

In CSS3, there is a new feature called mediaqueries. You can set the behaviour of your web page depending onseveral variables, including width.@media screen and (max-width: 600px) {body {font-size:80%}}@media screen and (min-width: 600px) {body {font-size:90%}}@media screen and (min-width: 1000px) {body {font-size:100%}}@media screen and (min-width: 1200px) {body {font-size:110%}}Depending on the window size, these directives will be executed by thebrowser. Of course, you will have to think about the limits of yourresizing. On really large screens, it would not be advisable to resizeto the max, because that would result in really large letters. So,choose your variables wisely.However, this technique only works for browsers who support mediaqueries, which does not include older versions of Internet Explorer,Firefox, Chrome and Safari. To solve this problem, you may use aframework to make Internet Explorer CSS3 compatible, or use ageneric Javascript solution instead.

A plain old Javascript solution

Using only Javascript, you can mimic the media query feature quitesimply. The following method should work in most browsers. First, wehave to get to know the width of the window. That could be done usingsomething like this.function getBrowserWidth(){ if (window.innerWidth){ return window.innerWidth;} else if (document.documentElement && document.documentElement.clientWidth != 0){ return document.documentElement.clientWidth; } else if (document.body){return document.body.clientWidth;} return 0;}The main function needs information about the boundary conditions forresizing, like the maximum size of the website and the resizing steps.You could call the following function from a body onLoad and onResize,for example.function dynamicLayout(sSize, rStep, sPer, dPer, amount) { var browserWidth = getBrowserWidth(); var startSize = parseInt(sSize, 10); var stepSize = parseInt(rStep, 10); var startPercentage = parseInt(sPer, 10); var stepPercentage = parseInt(dPer, 10); var amountSteps = parseInt(amount, 10); if (browserWidth >= ( startSize - stepSize )) { document.body.style.fontSize = String(startSize) + "%"; } var i = 0; for (i = 1; i <= amountSteps; i++) { if (browserWidth < (startSize - (i * stepSize))) { var newPercentage = startPercentage - (i * stepPercentage); document.body.style.fontSize = String(newPercentage) + "%"; } return true; }}Now, the website should resize with the window width. Happy resizing!