Blog Design, Design

Fixed Width HTML vs Fluid Web Layouts

In the bad old days, connection to computers usually involved keyboard and line printer or a typewriter. Then visual monitors were developed from CRT technology, which was crude by current standards. Initially, if my memory is correct, the Personal Computer came with monochrome 80 characters per line. IBMs first attempt at a color monitor for PCs was 40 characters wide, fat and ugly.

Soon came the 800 pixel wide monitor, then progressively higher resolutions.

Early web designs tended to assume 800 pixel widths. With newer monitors, designers often used fixed widths, with higher resolution screens wasting space. Then operating systems were made to recognize the current resolution of the attached monitor, with the option for page designers to auto switch to that current display width.

liquid

Possibly the majority of page layouts were made with TABLEs, dimensioned in pixels. With auto sizing, people learned to set widths in percent or em (equal to the point size of the current font).

Then HTML and CSS evolved to use DIV block elements, which also can use relative, instead of absolute, dimensions. Layouts could then be made with no use of TABLES. Design with DIV can be both more difficult and far more flexible. For example, DIV elements can be set with minimum pixel widths and heights, but no maximums. Also, DIVs can be stacked in the third dimension, so that decreasing the browser width can cause pieces to overlap in controlled fashion.

I have even stuck DIVs inside TABLE cells to set minimum dimensions. Images, if any, also set minimum cell sizes.

Other than cuteness, what is this good for?

1. Users have the freedom to adjust browser size and screen resolution, or change monitors.
2. Users can increase text size without overlap to graphics or other text. This can be a huge benefit to folks with tired and/or aging eyes.maxresdefault

The difficulties of making designs work with different browsers can be major, especially because Internet Explorer still does things differently from nearly everyone else. Fortunately, WordPress and most WP themes take care of browser differences by detecting which one is in use and switching code branches.

Thus, the webmaster using WP as a contact management system (CMS) can focus on content, and ignore most of what HTML designers had to cope with.

Leave a Reply

Your email address will not be published. Required fields are marked *