I have noticed that many of the designers design a great looking layout but they fail in the coding part. I have seen big companies code like a kid who has just learnt basics of HTML and some WYSIWYG editor.

Some of the pointers in this guide will help you to make your code beautiful. Yes, I mean it…

1. Use CSS based layers for the layout and use tables only for tabular data: I have seen many big the companies / designers using tables to code the layout. Tables will just help you to increase the lines of codes. Let me explain it by giving an example:

Table based sample code CSS based sample code

Table Based Code:




Home
About us
Products
Feedback

CSS Based Code: 

    
	
  • Home
    • 
	
  • About us
    • 
	
  • Products
    • 
	
  • Feedback
    •

Now in this simple example, there is not much of difference in the number of lines (since it is a very simple piece of code) but what mainly differ here is number of attributes which are simply not needed for such a small thing. We can just define display:inline style in CSS for list and specify the padding to give the same output.

To check some live examples you can take a look at the code of these sites that I have coded, you will notice that the number of lines are less than 100 in the code. If I wanted to implement the same layout in table based layout, it would have taken more than 100 lines. So I can say that I saved 100 lines by using CSS.

But again I am not saying that you should not use tables at all, tables are needed to display tabular data.

2. Use heading tags: We generally use larger font sizes to display title of the page or to display something important on the page. But many of us, istead of making use of heading tags, just use font size tag and bold tag to make the text size bigger.

Example of the code can be:

This is heading

Now we can use something like this:

This is heading

I know I know, the size of the font will be bigger than what we want but we can define the default h1 font size using css. We can use following code:

h1 {
font-size:16px;
}

Now this will be a default size for all the h1 tags on the site so you do not have to specify it again everywhere.

3. Code Logically: I have noticed many designers / coders code just for the sake of finishing the site quickly, they do not think much and apply the easiest solutions.

Few examples would make this point clear.

Recently I had checked preview site of one of the biggest portals in India and I was really shocked to see their code.

Following code was used to display list of products in bold letters.

Now the same can be achieved simply by coding like this:

CSS Class:

.center{
color:#FFFFFF;
font-weight:700;
}

That’s it. There was no need to add extra bold tags and div tags. font-weight will do the job for all the links placed under class “center”

Few more examples:

Code to make body margin as 0

Correct usage

CSS:

body {margin: 0;}

Code for table border:

If we use in above way, it will show black border only in Internet Explorer but in other browsers, it will show a dirty looking border.

Correct usage:

CSS:

.tableborder{
border:1px #000000 solid;
}

Above code will show a solid black border around the table and it would look same in all the browsers.

4. Keep the scripts Away: If you are using Javascript in your webpage, put the code in a JS file and link it in the html page rather than putting the whole code in between the html. (You can do it by using script src option)

5. Nest it well:

Messed up code:







Main Content Column


Left Column

Nested code:







Main Content Column


Left Column

Many designers do not use proper nesting for the code and they end up making a mess of the code. Messy codes makes it really difficult to edit it as it will take more time to understand, which tag is closed where and which one is opened where.

If you look at the 2nd example, you will clearly understand where id pagewidth is closed and where wrapper is. It just makes life lot easier for the coder.

6. Comment it: If you are working in a company and you coded some site and went on holiday. But to make changes in the site, someone else had to edit the code. So, if your code is commented well with proper info written in the comments, then other person can quickly make changes. If the you have not used comments in the code at all, it will make other’s life hell in making changes.

This is very useful if you are working in dynamic site where some of the content on the page is being fetched from database.

But then again, you should not use comment excessively, use it whenever it is needed and is important.

7. Validate it: This is very important factor. Many people say that validation is not important as invalid code does not make any difference in the output. But I would say for a good coder, validation is must. It helps a lot to understand your mistakes and afterall, mistakes make a person perfect, we learn from those mistakes.

I think these points are enough to make the code gorgeous looking 🙂

Following links might help you:

  1. W3 Validator
  2. CSS Layout Generator
  3. A List Apart
  4. Sitepoint CSS Forums (Best place to shoot your CSS related doubts)
Tips, Tutorials