After reading the article on the ideal width of web sites, we now know the ideal width of websites for a better display on most monitors. But is there a way to designate web sites so that they fit all screen resolutions? This article presents different solutions.

1. Three possible solutions to the screen size problem

There are 3 ways to develop a site so it is best visualized on any resolution screen:

• - Fixed-width sites whose page stick to the left or right of the window browser if the window is too large.
• - "Liquid" sites, whose width is fixed, but which remain at the center of the window browser when you resize it.
• - "Fluid" sites, that fit whichever width the browser window has.

Let's start by seeing some example sites in order to understand what we mean.

1.1 Fixed-width sites

The Gluten Free Gourmet is such a fixed-width site stuck to the left of the browser window. Sites stuck to the right of the browser window are very few in our culture and are usually the result of experimentation. Indeed, since we are used to reading from left to right, it would be confusing and counterproductive to see a site stick to the right of the window.

1.2 Liquid sites

Currently, many sites use this method, it is very popular with web developers and web designers because it makes creating attractive websites easy. The designer knows the width of the site (knowing the ideal width is around 950 pixels) and will create all its graphic designs to the right size. The integrator will therefore provide mainly fixed-size element. The site is automatically placed at the center of the window, regardless of whether the window is too wide, the site will always be the center of attention. Examples are of liquid sites are many, for example the publisher La Marelle and t-shirt seller Yellow Bird have made their site this way.

1.3  Fluid Sites

Fluid sites are much less numerous. Making them requires advanced knowledge of HTML and CSS and a certain discipline in the development process. Among those there are many wikis (the most famous example is wikipedia), sites focusing on information (like Gmail)), forums (such as La boîte à Pixel) and some personal web sites (Yvette's recipees) which use C.M.S. with fluid design. Beautiful, ergonomic and well designed sites with a deliberately chosen fluid design are still very few. It is the choice made by Kameleoon, the shop of the publisher Eyrolles, or that vendeur of recycled accessories.

Choosing a site with a fluid design is the solution for your site to fit all screen resolutions.

2. How to make a fluid site

Here are six design rules for a successful fluid site:

1. Do not assign elements a fixed size in pixels, but focus on percentage or em unit.
2. Do not give block-level elements (div, p, h, ul) 100% width, since there is risk of getting display bugs.
3. Do not require that the site retains the exact same look for all Internet users.
4. Do not impose a fixed size font, emphasize the em unit, since there also is risk of getting display bugs.
5. Optimize the web design by using images which can be tiled where possible.
6. Do not assign a fixed width to the element hosting the main content.

Fluid sites are not always guaranteed a good visualization on extreme resolutions (extremely huge or extremely small screens). To prevent the site being too stretched or compressed too much, the properties min-width and max-width are a great help.

The second problem is that Internet Explorer 6 (IE6) and lower do not render correctly these properties, you will have to write code to make your site work for those browsers.

3. Conclusion

Fluid, liquid or fixed-width sites, the choice is yours. Whichever you choose, make your choice before designing and developing your site.