Changed the type of layout I use on the home page .. to » LIQUID-ELASTIC hybrid. If I did this correctly, you shouldn't notice any difference .. unless you change your default text-size (.. by selecting 'Text Size' from the 'View' menu in IE). Lemme know if you notice any display quirks.
There are 4 different 'types' of layout designs:
- FIXED (column widths remain fixed, no matter what, used » here)
- ELASTIC (column widths change with changes to your preferred font-size)
- LIQUID (column widths change with changes to browser-window sizing, used » here)
- HYBRID (combination of two or more of the above, used » here)
I've long preferred LIQUID layouts (sometimes called » FLUID), which resize column widths as you resize your browser window (called the "viewport" by those in the biz). It's easier for me to understand the concept behind LIQUID layouts .. than ELASTIC.
Today however, I'm demo'ing a » HYBRID layout .. that combines elements of both LIQUID & ELASTIC. [ If you've read my SCSI guide, you know I'm a fan of hybrid config's. ]
The center section/column remains » LIQUID, while the two sidebars (blue-green colums) are now » ELASTIC. This means they will resize with changes made to your preferred font-size (e.g. » small, medium, large, gigantic, etc.). The center section will continue to change proportionally, as you resize your browser window - just like before.
Resizing your browser window will no longer affect the width of the blue-green sidebars (which are already skinny), while changing your default font-size will not affect the width of the center column/section.
The design itself of the home page has remained unchanged. Only the 'type' of layout has been modified (.. from LIQUID to » LIQUID-ELASTIC hybrid). This new type of page layout is considered more 'accessible' ..
.. especially for those who might have difficulty reading smaller text, and need to bump up their default font-size.
••• today's entry continues here below •••
To be honest, I've never paid much attention to layout & styling per se (as you can probably tell) .. beyond the technology used to effect these changes .. as that's what interests me.
I've always equated 'style' with 'function' .. and preferred rather to focus my web energies on generating » CONTENT. But that's just me. Certainly style/appearance is important (.. as any pretty girl will tell you).
I admit » converting that page to a LIQUID-ELASTIC design was more involved than I anticipated. Originally thought it would be a simple case of copying old content into a new layout. Silly me. Nothing's ever simple as it seems.
Most of the migration went smoothly, especially since I was well-researched on the topic. But I had a few glitches .. that caused considerable headache, and challenged my (decent) CSS skills. The devil, as they say, was certainly in the details.
Anyway, I always use the default font-size (.. with a good pair of reading glasses). But if any of you need to bump it up a notch or two, this layout design should work nicely .. and even for those who have good eyes, if you need to resize your browser window from time to time (.. cuz now the sidebars won't shrink).
Learned much in the process. LIQUID-ELASTIC layouts are considered among the most sophisticated web page designs. FIXED designs are considered the easiest/simplest to work with (style) .. since everything remains static. (Good for the web designer, bad for visitors like you.)
Oh, there's actually one more type of layout (I forgot) .. called » ABSOLUTELY POSITIONED. But I don't know anybody who uses that design.
I originally decided to demo the LIQUID-ELASTIC layout cuz it sounded challenging. But I admit, its appeal is growing on me. It's basically a LIQUID center with FIXED sidebars -- which are already skinny -- unless you change your default text-size. Then the sidebars show their ELASTICity. So there's lots to like.
The more I learn about Cascading Style Sheets, the more they seem like a black art. The whole premise behind CSS is to » separate the structure/content of a web page (e.g. » what constitutes a paragragh and what content that paragraph contains) from its styling (called "presentation" .. or » how the content in that paragraph looks).
Style sheets give you the ability to change the look-n-feel of your entire site by editing a single file .. that contains a list (uh, 'sheet') of all your styles .. instead of editing all thousand web pages individually. Very powerful.
But also nuanced .. in the way one style (for one element) affects another (style applied to a different element). These interdependencies are not always obvious. And they exist on multiple levels. So it has become clear that CSS is (or can be) more complicated than it might seem. It's no coincidence that many web designers have little hair left.
On another note, the big news in the web design world is » HTML5 is coming. The Next Big Thing. (TNBT.) Soon as you get a handle on one standard...
For mor along these lines, here's a Google search preconfigured for the query » css liquid elastic hybrid layout design
