Things to consider while making your layout flexible or fixed

There are two kinds of website that you can design, one is flexible and another is fixed. The flexibility and fixed ability of a webpage is actually the flexibility or fixed width setup property. Flexible web design carries variable width which varies with the browser’s viewing area. While fixed web design has fixed width as always no matter what the size of browser viewing area is.



Flexible web designs are used in such sites where the contents can accommodate the change in width of the main container. Flexible design can be used easily used in text based website. It can be helpful if you are designing the mobile version of your website. After all you set your web design’s flexibility using CSS. You can add conditional tags to make your web design flexible for specific web browser.



Whereas fixed contents are used to make your web design look more stable and stronger. Use of images also forces you to design your page in fixed layout. For example, if you are designing news web site then you’ll prefer fixed layout because, the flexible layout may dismantle the image positioning and floating contents.



Anyways, if you really want a flexible website you must consider some major things.

As always, do code the division and HTML code before going to CSS. Later define each classes and IDs in your style sheet file. This makes you easy to modify the CSS in live which you cannot do if you’ve already defined the CSS and later you start coding HTML. Take an example of clothing; we cut clothes according to your body. Where body is the HTML and clothe is the CSS.



For flexible web site, your outer wrapper has width set in percentage rather than pixel. The percentage is in reference to the width of the browser view. Now one of the most important things to consider while making a flexible layout is the flexibility or fix ability of inner divisions.



If you are a newbie designer then you may sometime set the width of the outer wrapper to 80% and set inner content wrapper and side bar wrapper 600px and 300px respectively. This is very wrong and mistakeful step. For clearer reason refer to following illustrations.





In the above image, we’ve set the width of right column and left column fixed. Let’s see what we’ll get when the browser window width is expanded.







Here we got a problem, there is a big gap between left and right column. This is because we set the width of inner containers fixed. When we enlarged the browser, the outer wrapper which width is set in percentage got increased relative to the browser width. But the inner divisions’ width will remain constant as we’ve specified it a constant width in pixel.

Now let’s do re-coding.







Here we changed the values of width in pixel for all of the wrappers.

Now whenever we resize the screen we’ll get exactly flexible web page.







This is how you must layout a completely flexible web page.



OK that was one of the important things we must consider while creating flexible layout.

Now for fixed layout I have two suggestions for you. That is either making your inner layout flexible or set your entire layout fixed.



See the illustration below:







This is when you have everything fixed.







This is when you let outer wrapper fixed but inner wrappers flexible.



What is the difference between them? If you are 100% sure that your web site needs 800px outer wrapper width, then it’s OK you set width all fixed in pixels.



What incase if you are designing for others, who might want different width than you specified. Since you’ve specified the exact width and you’ll have to reset it all, calculate again and set the width of each container again. This can be really time consuming part. Here you’ll find flexible inner layout helpful.



If your customer is not feeling ok with 800px width then just change the width of outer container to 1000px. All the inner contents will automatically adjust relatively with the outer wrapper. No hassle right?







There you have, the outer wrapper width set to 1000px for a fixed layout.



I also recommend you to use flexible inner contents in case you are using dynamic web design program which allows your customer to layout as they wish, change the width of the webpage as he needs. You can see this happening in Thesis WordPress Template.