Scalable Web Design Part 1 Introductory Concepts

Introduction to scalable web design techniques.

What is Scalable Web Design?

In many ways, the 'Holy Grail' of web design is to achieve a website that looks great in any screen resolution, operating on any platform while being cross-browser compatible. As Netscape and Internet Explorer move closer together in terms of supporting W3C recommendations, cross-browser compatibility is becoming very achievable these days, while user platforms was never really an issue with 95% of the worlds desktops running some form of Windows OS. But what of screen resolution?

The simple reality is, lots of people use all sorts of screen resolutions to view your site, often resulting in it being cropped off the edge of the users screen, or the content being surrounded by a large white border. Neither option is preferable, so unless you intend to design a different version of your site for every screen resolution, you might come to the popular conclusion of simply designing for 800x600 and letting people who hit on your site work it out for themselves! (Not recommended...)

In Flash based web sites, designers can use Flash's inbuilt 'scaler' facility to 'scale' the site to different resolutions, resizing graphics, interface and fonts to suit the users monitor. This functionality is available using DHTML with a bit of lateral thinking, and has the added benefit (naturally) of not requiring Flash support. In this series of articles, I will look in depth at two methods of achieving web page scalability.

The Two Methods of Scalable Design

While looking into the area of scalable design for this site, I came to the conclusion that there are basically two options available, one that uses a variable unit system (based on the users browser inner resolution), and secondly one that uses a fixed unit system (based on the users screen resolution, which is generally fixed). For the purpose of this article, I will call these methods Liquid Design and Fixed Design respectively.

The basic principal that the two methods have in common is that instead of using the default units to position and size elements on screen, i.e. pixels, you are going to create your own units based on the users browser inner resolution or the users screen resolution. Therefore, in essence all units become variable regardless of which method you use.

Liquid Design

Liquid Design is based on sizing your sites layers, graphics etc. as a percentage of the size of the users inner resolution, e.g. in practical terms, a layer may be 30% the width of the screen in width, by 100% the height of the screen in height. Therefore, because you are working in percentages and not pixels, the amount of pixels available on the users monitor is largely irrelevant, the layer will ALWAYS be 100% the height of the screen. You can begin to see how this method has great potential, and combined with a function to resize the site when the user resizes their browser window, the site will display at ANY possible resolution.

The are many advantages and disadvantages to Liquid Design:


  • Site will display at any possible resolution.
  • Site will resize if the browser window is resized.
  • Only one version of the site required for all resolutions.
  • Cross-browser compatible with IE5+ and NS6+.
  • Great novelty factor! (I don't know of many sites that have such a function).


  • Difficult to implement.
  • Not very accurate in terms of layer positions and sizes.
  • Sliding layers (i.e. layers that move) may run into problems.
  • Images will distort at high and low resolutions.
  • Image aspect ratio difficult to maintain (i.e. if you design a graphic at 100 x 50 pixels, it may not be possible to precisely size the image to this size at ANY resolution).

Despite the difficulties associated with Liquid Design, it is still a technology in it's infancy so should improve with further research. It certainly is the most attractive option for scalable web design, even if it is not the most practical.

Fixed Design

Fixed Design differs from Liquid Design in that it's units are based on the users main screen resolution (640x480, 800x600 etc.) rather than the browser inner resolution, therefore it is said to be 'fixed' in nature because the user (normally) will not adjust the screen resolution while viewing your site. For this reason, Fixed Design provides a more stable basis for your site design, as you can predict with a certain amount of certainty how your site will respond to different screen resolution settings.

Lets suppose, as is the case with this site, that you have designed your site to be (ideally) displayed at 1024x768 pixels. This will form the basis of the new units that you will use to replace the default pixels, by using the following formulas:

XUnits = screen width / 1024
YUnits = screen height / 768

In the above example, a user with 1024 x 768 screen would result in 1024/1024 = 1px and 768/768 = 1px, therefore the site scale would remain unchanged, 1 pixel would equal 1 pixel. But what about 800 x 600 pixels?

XUnits = 800 / 1024 = 0.78125px
YUnits = 600 / 768 = 0.78125px

If we now use these new units to control position and size of the elements on screen, 1px now equals 0.78125px, so ALL measurements are scaled down. The opposite would happen in a situation where the resolution was greater than 1024 x 768, resulting in all units being greater than 1px.

As with Liquid Design, Fixed Design has many advantages and disadvantages:


  • Site will display at any resolution.
  • Only one version of the site required for all resolutions.
  • Cross-browser compatible with IE5+ and NS6+.
  • Accuracy of placing and sizing page elements remains high.
  • Image aspect ratio much easier to maintain.
  • Integrity of site layout maintains quite high at extreme high and low resolutions.
  • Sliding layers not a problem.
  • Easier to implement than Liquid Design.


  • Difficult to implement.
  • Images will distort at high and low resolutions.
  • Does not resize if the user resizes their browser window.
  • Best suited for a site with a simpler user interface.

I found out the last point above the hard way with this site! This method (although not as much as Liquid Design), really does lend itself to a site with a simple user interface, the more complicated the design, the more things that have to be resized and repositioned for each possible resolution. However, it is technically possible to achieve scalable design with a complicated interface, as this site proves, but it is just that bit more difficult to implement. Keep your site design as simple as possible.

Fonts, Graphics and Layers

Fonts, graphics and layers are the three main elements that will need to be resized with different resolutions. We have already discussed in detail above the two methods used to resize layers, and graphics are easily resized by placing each graphic on it's own layer, sizing the graphic 100% x 100% and using code to resize the layer holding the graphic (the graphic will now resize within the holder layer!).

It is possible to resize fonts by utilizing the new getElementById DOM, but to be honest the easiest method I found is to create two separate .css files containing the style sheet details on the fonts for high res and for low res, and use JavaScript to 'write in' the appropriate link to whichever file dependant upon the users screen resolution. You can, of course, use more than two font sizes, the decision for that lies with the designer.

What Next?

Scalable design is a very complex area, and I have only laid out the concepts of the methods involved in this article, not the solutions. I will write on each method in detail in the near future, providing examples in each case. Here is a breakdown of the articles to come:

Part 1: Introductory Concepts (this article)
Part 2: Liquid Design
Part 3: Fixed Design
Part 4: Scalable Fonts

I will try to cover every aspect of scalable design in depth in these articles, although this is an area that is constantly changing as others and myself develop new methods. For far to long designers have been content enough to design for the generic audience using 800 x 600 resolution which, incidentally, is on the decline, while ignoring the benefits of designing for higher resolutions. I hope to show that scalable design is not only possible, but also quite practical while presenting a tailored site to each site visitor.

John Collins

I have been writing about web technology and software development since 2001. I am the developer of the Alpha Framework for PHP. I love open source, technology, and economics. You can follow updates from this blog on Twitter.

The Basics of Web Technologies

Detecting the SVG Viewer