Image Credit – louisedesign

Rule #1 : Lay out the Blueprint First

This is a must. Do not start your web design just on the assumption of a that you have a design in mind and you would want to see it in reality. Believe me, it never happens this way and if it doesn’t then you would just get frustrated at the failure and give up on the design in the mid way. What you must do is plan the design on paper. Some tips to follow,

1. Take a ruler, pen and paper and draw the design line by line properly with specific measurements.
2. Make it a point to consider even the length of the divisions in the layout. The length can then be easily mapped to the pixel length in your CSS
3. Describe your divisions so that you don’t forget any thing. This will be helpful because last minute additions to the design might be disastrous.

Rule #2 : Finalize your Color Scheme

This is the second and will form the heart for your design. Your web design will turn out good only if the color scheme is good else it will look boring. To decide on your color schemes first chose what the main color will be. The main color means the color which you will be using maximum in your design. Choose 2 secondary colors which suit with the main color. Do not choose more than 3 in total or your design will look messy. If you want more colors go for the lighter and darker shades to compliment your main color. To finalize upon your color scheme,

1. Surf the internet for 10 designs which have the same color scheme.
2. Show those designs to a few people and take their feedback. This is because ultimately you do not your first impression to be negative in your case.
3. From the feedback and websites you will be in a good position to finally prepare filling the colors in your blueprint. You will be more confident this time.

Rule #3 : Start With The Basic Building Blocks

Once your color scheme and layout is finalized its time to implement it. Start building the basic layout structure. By basic layout structure, I mean to say is no text should be put in to the layout. Remember, having any text in the layout will not give you a proper idea because text itself might change the structure which might be misleading. Think about a situation if you don’t have the text but have only images. Your design will behave differently in such a case. Basic blocks can be made further easier by,

1. Putting a border around each of your divisions so as to visualize it perfectly to the point.
2. Initially having a different color for each block and on completion replacing it with the desired color scheme

Rule #4 : Know your CSS and Handle it with Care

Never hard code your styling elements in your HTML files because at a later point of time you won’t have to keep searching which HTML file to correct in case you have to make any change. So it is always beneficial to have all the styling elements in a separate CSS file.

Also, before styling study your CSS so that you don’t get too messy by repeating the same thing over and over again. CSS supports inheritance. This means that the style given to a parent block will also be applicable to the child block. Use this feature to its full effect. Plan your CSS class names so they are understandable.

For example use the name “main_content” instead of something lile “div_1” because your CSS file will outgrow in its length quickly and you would be lost in trying out to recall which element points out to which block in the layout.

Rule #5 : Make Multiple CSS files

The nightmare which I had mentioned in the beginning starts here. It is very much easier to check the output of your design right at the moment in the browser. Do not use any tools for viewing the output because they cant be trusted always. Even if you use a browser for viewing the output it is possible that the design crashes in another browser. Do not panic. It is a normal thing because every browser renders the HTML and CSS differently.

It is for this case you should have one CSS file per browser so as to be sure that your design looks proper in all browsers. Of course this is not easy. But you MUST NOT try to make all the browsers happy with a single CSS file. This wont happen. If you try too much then you would be compromising more on the design. Having one CSS file will give you the flexibility to change a style for one browser without thinking of what effect it might have in another browser.

These 5 basic rules are the ground rules which will lead to a well executed design. If you want your design to be fool proof and reduce your headaches, then these rules will definitely convert your effort to success. Web designing can be a painful job if you do it in haste, so put these simple rules into practice and ease out your work.

Related posts:

• Choosing Fixed Layout Over Fluid Layout
• Design Patterns – Building blocks for your application
• CSS Builder – Fast and Easy StyleSheets
• SCDJWS study material and resources – The most searched thing
• TechTracer goes Live from today!

Manually making the stylesheets certainly gives you more freedom. It does also take out your time to properly remember all of the syntax and produce them correctly. But there is a simple solution out there on the web and it is Meta Titan CSS Builder. It does not actually give you the output but it builds the tag for you without you having to type anything. Presto! within minutes you would be ready with your style.

Be it anchor tags, the positioning, the background or the boxing. It includes everything. The creator is still on the verge of improvising it. I definitely would like to see the inclusion of a live preview on how the final output would be displayed. The important part of the utility is that you can learn out how to make different style by trying out many combinations. This is not possible when you do it manually. Try it out. I loved it, you would too!

Related posts:

• Web and Desktop Apps – the 3rd World War!
• JAX-WS + JAXP Tutorial – Building A StockQuote Web Service Client
• Google Reader Search Goes Live!
• TechTracer goes Live from today!
• Java EE – Exhaustive yet Enchanting

.box{
 	width:100px;
 	height:100px;
 	background:silver;
 	border:1px solid black;
}

And I use the above style in my page as follows,

<div class="box"></div>
<div class="box" style="width:200px"></div>

Here, the width of the second will be 200px since the inline style overrides the globally declared style. But the CSS trick to still enforce the global style is to make the concerned style attribute IMPORTANT. In the above example if I have to keep my second div restricted to 100px then I will declare it as IMPORTANT as follows,

.box{
 	width:100px !important;   /*width restricted to 100px. This is final*/
 	height:100px;
 	background:silver;
 	border:1px solid black;
 }

Its simple to co relate the !important property as a final variable in java. Sometimes you do not your styles to be overridden by other designers either through javascript or inline style. The !important property is the thing which would help in this case.

Related posts:

• The Great Ant Tutorial – a great jump start
• The Great Hibernate Tutorial – a great jump start for beginners
• Key Points for Choosing the Best framework
• Do Books Inspire You To Excel?
• Learn the Servlet API – A step by step approach