Scalable Web Design Part 1 Introductory Concepts

 
Published on 2001-12-21 by John Collins.

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:

Advantages:

Disadvantages:

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:

Advantages:

Disadvantages:

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 re-positioned 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 dependent 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 too 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.


Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes. With modern "responsive" web frameworks, the techniques described above are no longer required.