Friday, November 28, 2008

2 Various Web Layouts (Fixed, Elastic, Liquid)

Web designers basically have three layouts based on CSS. They are :-
1. Fixed
2. Elastic
3. Liquid

All of the above has its own advantages and disadvantages. I will describe here details of these three.

1. Fixed LayoutFixed layout websites looks same in all container. Whatever the monitor size, pixel it is always same. Because of its rigidity it is also called ice layout. Developer can organize elements any way he/she likes. If you set the width of your design to be 720 pixels wide, it will always be 720 pixels. If you then want a branding image spanning the top of your design, you know it needs to be 720 pixels wide to fit.

This layout cannot utilize space available. They are always same what ever the window size is. A site made for 800 600 screen resolution looks tiny in a higher resolution screen and in vice versa a site made for 1024 760 screen will cause scrolling in lower resolution. A reader with a mobile phone or a handheld computer will have to scroll laterally; a reader with a high-resolution monitor will see a narrow strip in the middle of the screen; when printing, the right-hand side can end up off-page. Besides, when the reader increases the text size, the text will sooner or later break out of a narrow column and we have an overlap that can render the page unreadable.
2. Elastic Design LayoutActually elastic design mainly works on websites text. An elastic layout scales with users’ text size. Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em.
  1. They are calculated based on the font size of the parent element. E.g. If a
    has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
  2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
DisadvantagesIt has same disadvantages like liquid design except that it doesn't break because of changes in text size.

3. Liquid/Fluid Layout
Liquid layout specify width height using percentage instead of px or em. For web designers the monitor screen does not have fixed width or height because these variables change, at times in unpredictable ways. People might have larger buttons, toolbars such as Yahoo or Google, they open the Favorites page on the left, they have a double task bar and so on.Therefore the width and height of the screen is different from user to user. By the name liquid this type of design implies that what ever the container that is monitor or browser the layout will be furnished according to the space. So, high, low resulution is not a problem for liquidly designed site. Main point about liquid design is accessibility. Liquid design eliminates irritating design flows such as much white space, disapperance of certain sections etc.

Too much content required for this type of layout. Too much content can confuse user.The lines of text become way too long on a large monitor Overlap is hard to avoid in small windows when a column becomes too narrow to contain long words. CSS provides a solution for both problems (max-width and min-width), but Internet Explorer doesn't support any of those.


Parvez said...

Thanks for ur site.
Rana BHai

if said...

Its really charming that you have start written. I really enjoy it.....


Mohammad Abul Khaer Copyright © 2011 - |- Template created by O Pregador - |- Powered by Blogger Templates