It is the well-worn debate. Should the web designers make use of fixed width or else liquid layout? In a few circles, debate rages furiously. I will present that best layout is one, which suits your web site’s reasons.
Only you can decide what is best for your web site. I know of excellent sites that utilize both advances. Remember, superiority web sites make layout transparent. Visitors do not care whether you have chosen the fixed width or the liquid layout. They care that your web site offers them information that they are looking for. Good quality content as well as good usability create layout question almost debatable.
What are pros and cons of every approach?
Pros of the Fixed Width Layouts:
-aptitude to create the standard layout for all the monitor resolutions beginning at 800×600.
-Simple to create the clean looking web site
-simply control ad units
Cons of the Fixed Width Layouts:
- On the very big resolutions (1600+), the fixed width layouts are hard to read. However, visitors with these resolutions will be sightless in some years anyway. As a result it is not the group to be excessively anxious about.
- Limited utilization of space or wasted space
- boring
Pros of the Liquid Layouts
-loads of flexibility
-further real estate to put in additional features, particularly above fold
Cons of the Liquid Layouts
Susceptible to break at strange 800×600 resolutions. In a few case the separate CSS file is required to regulate for 800×600. This is pain.
I am finding that a few web sites are not further designing with the 800×600 as bottom tier of screen resolution. Rather, many web sites are designing with the 1024 x 768 as standard. Over next few years I imagine 800×600 resolutions might be rare. The only warning to this is the people with the visual disabilities.
In sum, select layout, which will best suit, needs of your text. And as needs have your content alter, you can then alter layout. That’s a beauty of CSS. You are not at all locked in to anything!
Liquid layout
All containers on web page have their fixed widths defined in the percents - sense that they are totally based on view port before the initial containing block. The liquid layout will go in and out at time you resize the browser window.
• Liquid layout for example
Combination of liquid and the fixed layouts
Alike to the liquid layouts, separately from one or more containers on web page have set widths.
• Liquid and fixed layout example
Fixed width layouts
All the containers on web page have fixed widths defined in the pixels or else other fixed units. They are totally independent of view port. The fixed layout will not go in and out at time you resize the browser window.
• Fixed-width example
Em driven layouts
All the containers on web page have their fixed widths defined in ems. Further they will be scaled according to users default font size. They are totally independent of view port.
• Em-driven layout example
You can make use of combinations of above.
Secret of liquid layouts
Liquid layouts are simple to attain if you follow a few basic rules.
1. Work out the basic layout grid prior to you start coding
2. Include the gutters as a result your columns will not go too wide
3. Make use of percentage units for the widths of all the containers and the gutters
4. Don’t define containers that utilize full width of web page - let for browser rendering issues
Step 1 - begin with the layout grid
It is good idea to begin by drawing on the paper or utilizing a few imaging software the rough layout grid.
You can also start by doing the grid at 800 pixels broad. Columns as well as gutters can be further adjusted unless you are happy with layout. When pleased, these pixel-based measurements are converted in to percentage units.
If you desire to achieve the basic three column layout, your draft can look like this:
• Example mockup
Basic column grid for this particular mockup is:
As you can make out, there has been the allowance created for the gutters among each column. This will put in some space to web page and stop columns from getting too wide in very broad browser windows. This is significant, as the line length change readability.
Step 2 - Leaving space
One main problem with the percentage widths is they need to be calculated by browser consequently there will be a few degree of rounding up and down of percentage measurements. For this cause, it is forever good to leave a few free spaces on web page so there is the room for mistake. In this instance, you will just leave “gutter 4″ undefined; as a result there is about 3% of the free space at right layout.
Step 3 - Making containers
You have three gutters and the three columns. gutters can be rehabilitated to left margins for every columns:
These three columns can further be converted in
HTML code
<body>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
</body>
CSS code
#col1
{
float: left;
width: 48%;
margin-left: 3%;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%; }
#col3
{
float: left;
width: 20%;
margin-left: 3%;
}
• Example (this particular example has the rendering issues in the Internet Explorer 5.5, 5, and 6 - see below for the details and solution)
• Browser Cam results
Step 4 - Fixing the Internet Explorer bug
You might have observed that there is the problem with model above in the Internet Explorer 5.5, 5, and 6 for the Windows. left margin is broader in these web browsers. The Internet Explorer 5, 5.5 ,6 for Windows have certain issues with the margins functional to floated items, which touch left or else right edge of view port. These web browsers will at times get double these margin widths - 3% left margin will turn into 6% left margin.
In this example, all the other standards acquiescent browsers will make 100px left margin, however Internet Explorer 5, 5.5, 6 for Windows will make a 200px broad margin.
This rendering subject can at times cause third column to fall below other two columns. Fortunately, there is the work around for this trouble. In this instance you can add the “display: inline” to the column 1 and double float bug will then disappear in the Internet Explorer 5, 5.5, 6. The code is at the present:
HTML code
<Body>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
</body>
CSS code
#col1
{
float: left;
width: 48%;
margin-left: 3%;
display: inline;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
}
Step 5 - Adding headers and footers
It is simple to add the headers and footers to this instance. header <div> will of course sit on top of these floated columns as well as gutters as long it is not been floated. footer must be empty from floated item by relating “clear: both”. There are 6 <div> containers on page:
HTML code
<body>
<div id=”header”></div>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
<div id=”footer”></div>
</body>
CSS code
#header
{
margin-bottom: 10px;
}
#col1
{
float: left;
width: 48%;
margin-left: 3%;
display: inline;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
}
#footer
{
clear: both;
}
Step 6 - Working around box model
If you desire to inset the text in these 3 columns also you would like to apply padding to containers, you have to keep in mind that Internet Explorer 5 plus 5.5 for Windows wrongly render box model.
One means to avoid this trouble is apply padding to the items in the containers before to containers themselves. This can be completed with rule set like:
h2, p
{
margin-left: 7px;
margin-right: 7px;
}
or else, if you want to be little more specific, you can select to target the specific column:
#col1 h2, #col1 p
{
margin-left: 7px;
margin-right: 7px;
}
Final result
• Final result
• Browser Cam results
Once when you have established basic layout, you can then exchange columns, or else add borders as wanted:
• Variation wide middle column
• Variation wide right column
• Variation wide left column with the borders
Liquid insanity
while you appreciate how to set up the column widths for the liquid layouts, it turn out very easy to perform more higher layouts with the numerous liquid options:
• Liquid insanity
• Browser Cam results
How to change the fixed table layouts to the liquid CSS based layouts
This editorial is the step-by-step case learning showing you how to change your table-based site to the liquid CSS-based layout. Although web site we are applying css layout is a very exact case, during the tutorial we will give a variety of solutions that is to be applied to your exacting case.
Prior reading please get aware in order to completely understand this editorial you need to:
• Have little understanding of Cascading Style Sheets
• Have understanding of the HTML
• Be familiar to liquid design concept
• Understand necessity of cross browser testing
• Have a few basic knowledge of the accessibility guidelines
• Have patience to go through code and tweak it unless the outcome is satisfactory
Benefits of CSS liquid design on the other kinds of layouts
• Decreases HTML and body text ratio
• Is totally flexible
• Increases accessibility as well as usability of web site
• Works well on the modern web browsers and on a few older browsers. It proves to be very useful on text only browsers.
• Looks as fine if not superior to the table layouts once when it is ready. Misconception that the css layouts are not as visually striking as the standard layouts that has no argumentative base.
Key principles to CSS layouts
Style sheet layouts are generally based on idea of absolute positioning. That really means that each element is apparent as the unique entity which can be placed anywhere on the web page in connection to its edges. In this class we will function with div boxes, which act as the holders for a range of elements.
The two most significant things to keep in mind are margins one can place in relation to edges of web page and stack order of div boxes.
Margins can be placed in such a way that the div box can also be placed anyplace on the web page. There is the illustration of concept below. You can simply picture how this box can be placed anyplace on web page. It is very useful because as visually they keep the place required by design, in source code, it can be further placed anywhere.
You can make use of your imagination to locate countless ways to utilize z-index and margin properties. Flexibility of CSS permit virtually of any layout to easily make.
Let us begin
If we will like to expand our company in the World Wide Web, it’s necessary to the most creative web site; as a result people can go to our web site as well as want to take information regarding our services as well as products. It is also said that first impression is last impression and your web site is first impression to your goal prospective customers. Impression must be developed by your original web site in the visitor’s mind as a result it’s necessary to make more creative web site for the first impression on the client’s state of mind so they desire to visit our web site again. To design most original web site, follow under tips.
1. About web Pages
If you desire to get ideas of the visitors, then response is necessary. Contact us web page is advisable to create a link among you as well as your clients. You should offer your email address so that the visitor can get in touch with you directly also you can support completely. About us web page should be included to offer information about your business. Information can be year of organization, your enlargement, and name of the country from where you function. Home page should be included with the links to the other Web Pages. All the web pages should be given the link to Home page.
2. Attractive
Your web site must be attractive. Color selection for pages has to be looking very nice. Color of backdrop has to be little light as well as design has to be fascinated by the visitor first look.
3. Professional
Your web site must be professional, in good title pages. The text must be located and needless content should be avoided in the proper way. At primary site, it must be able to show visitor’s attention for continuing your web site. For instance, you can visit our we site - flash design fort lauderdalb
4. Small size of Web Pages
Web Pages must also be very good looking as well as creative. Web Pages must not be extremely comprehensive. Surfing of these kinds of web sites should be avoided.
5. Text
Text does not issue; issue is the look of expressions in Web Pages. Background of web page must be very light as well as text must be dark, it will be striking. To read text simply, the background must not be dark. All fonts of Web Pages must be chosen correctly which are simply available on each computer. In this instance, visitors don; t need to put in new fonts in PC to understand your text of your web page. They can explore and read your web site easily.
CSS Liquid Layout Design
CSS Liquid Layouts are made use to make the clean CSS designs, which are expandable depending on size of the browser. Mostly it bases on dimensions of containers such as columns, header, footer as well as text areas. Try to thin and expand width of the browser, you may see liquid layouts are supple and dissimilar with the normal layouts. Below I chose a list of web sites, which have succeeded at the liquid design.
(No Ratings Yet)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Laisser une réponse