Liquid CSS Layouts - Design Alternative to Table Based Websites
How to transform fixed table layouts to liquid CSS based layouts
This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we're applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.
Before reading please be aware that in order to fully understand this article you need to:
Have understanding of CSS (Cascading Style Sheets)
Have understanding of HTML
Be familiar to the liquid design concept
Understand the necessity of cross-browser testing
Have some basic knowledge of accessibility guidelines
Have the patience to go through the code and tweak it until the result is satisfactory
Advantages of CSS liquid design over other types of layoutsDecreases the HTML/body text ratio
Is completely flexible
Increases accessibility and usability of a site
Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.
Drawbacks of the process
Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.
Key principles to CSS layouts
Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.
The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.
The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.
The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it's that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.
You can use your imagination to find countless ways to use the z-index and margin properties. The flexibility of CSS allows virtually any layout to be easily created.
Let's begin
Please bear in mind that all snapshots are in fact thumbnails. You can click on them to see the full image.
Liquid CSS layouts tutorial structure
Introduction How to transform fixed table layouts to liquid CSS based layouts
Step 1 Analysing the site's original layout
Step 2 Identifying key areas
Step 3 Analysing the source code of the original and final layout
Step 4 Let's create the CSS layout
Step 5 Let's reinclude some of the initial elements
Step 6 Let's apply liquid design
Step 7 Making the existing boxes expand
Step 8 Creating an additional box for liquidity purposes
Step 9 Left and right margins and other browsers
Step 10 Final testing of liquid CSS design
Step 11 Cross browser testing of CSS layout
Sitemap
Ecommerce
Financial
B2B
Free Evaluation
Source:http://www.mardiros.net
How to transform fixed table layouts to liquid CSS based layouts
This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we're applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.
Before reading please be aware that in order to fully understand this article you need to:
Have understanding of CSS (Cascading Style Sheets)
Have understanding of HTML
Be familiar to the liquid design concept
Understand the necessity of cross-browser testing
Have some basic knowledge of accessibility guidelines
Have the patience to go through the code and tweak it until the result is satisfactory
Advantages of CSS liquid design over other types of layoutsDecreases the HTML/body text ratio
Is completely flexible
Increases accessibility and usability of a site
Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.
Drawbacks of the process
Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.
Key principles to CSS layouts
Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.
The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.
The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.
The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it's that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.
You can use your imagination to find countless ways to use the z-index and margin properties. The flexibility of CSS allows virtually any layout to be easily created.
Let's begin
Please bear in mind that all snapshots are in fact thumbnails. You can click on them to see the full image.
Liquid CSS layouts tutorial structure
Introduction How to transform fixed table layouts to liquid CSS based layouts
Step 1 Analysing the site's original layout
Step 2 Identifying key areas
Step 3 Analysing the source code of the original and final layout
Step 4 Let's create the CSS layout
Step 5 Let's reinclude some of the initial elements
Step 6 Let's apply liquid design
Step 7 Making the existing boxes expand
Step 8 Creating an additional box for liquidity purposes
Step 9 Left and right margins and other browsers
Step 10 Final testing of liquid CSS design
Step 11 Cross browser testing of CSS layout
Sitemap
Ecommerce
Financial
B2B
Free Evaluation
Source:http://www.mardiros.net
<< Home