A Fluid and Elastic new layout

A fluid layout for a web page is one that adapts itself to the window size, an elastic layout is one that adapts itself to text size. When nothing of this happens, the layout is said to be fixed.

A layout that Fluid and Elastic is a step towards a future with high screen resolutions

One of my great ambitions for the Z’oC Layout was to have a layout that was both fluid and elastic layout, and this is just what I have done. I completely redesigned the layout to be fluid, elastic and more reader friendly.

A layout that is both fluid and elastic means that you are able to take advantage of all screen, whatever format and resolution your public may have and, additionally, means that you can increase the text size a lot without breaking the layout.

One of the main problems of online reading is that the resolution of the monitor is too low compared with a printed text. This may be solved in the future by having displays with extreme resolutions and increasing the relative font size.

However, if you measure everything on your site in pixels, the layout may not stand a font size doubling or more. If you measure key aspects of your site in a text-size related unit like em the layout can adapt itself to whatever text size is needed.

In fact, if the screen resolutions continue to grow and the text size remains unchanged the characters, that are only a few pixels tall, will become so small that they will be unreadable. What’s the use of a high resolution if you can’t read the text.

In a fixed layout, a little increase in text size may be work fine, but extreme changes will break it for sure. It is just a matter of how much is the threshold.

On a fluid layout, you may get over this problem, because the text fields may adapt themselves to the window size, but still, you rely on the user to adequately resize the window to best fit your page. While this may not be that bad, it would be nice to add enough intelligence to the site, so it can take advantage of both window and text size.

In my opinion, this is a subject of accessibility.

In a world where screen resolutions vary from 800 pixels wide to over 2 thousand, you need elastic layouts in order to be accessible by all

Accessibility is a buzzword on the development community these days and opinions diverge. Some people say that accessibility is about planning pages to be accessible by visually impaired people. Other people defend that accessibility is about planning pages to be accessible for as many people as possible with very different conditions, including poor internet connections, poor screen resolutions, mobile access devices and so forth.

In a world where screen resolutions vary from 800 pixels wide to over 2 thousand, you can’t be prepared to please everyone without being prepared for text size changes, and this is a matter of accessibility, because a site should be accessible by users in both extremes.

Some of the features of the new layout that I am particularly glad about are

• Main text area is fluid, but the paragraphs inside are elastic
• Sidebar is elastic
• If the window is stretched beyond the maximum paragraph size, the blank area on the right becomes a column for the pullouts

Some of the features above may not work on Internet Explorer, but still the site will be fully functional, fluid and elastic. So I decided not to support IE uselessly, once they not support the basic things they are supposed to.

In safari, opera and firefox, everything works just beautifully.