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:
Head
Main Content Column
Left Column
Nested code:
Head
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:
- W3 Validator
- CSS Layout Generator
- A List Apart
- Sitepoint CSS Forums (Best place to shoot your CSS related doubts)
Ahh…atlast a break from Movie Reviews 🙂
Deep, please give us some tutorials on Web Designing and SEO
btw, nice post!
Thanks Deep! Atlast the movie reviews slow down and you come back with some cool and useful tuts.. keep posting more and I am sure there are loads of ppl who wanna say the same thing outl.
Cheers,
Dreamchaser
hehe I don’t think movie reviews will slow down too. I am going to post reviews every friday. I write for a film portal and I have to send them reviews every friday, so it’s kinda fun.
About writing more tutorials, actually I want to but tech tutorials take out good time and believe me this tutorial took me 3-4 months. I was writing in bits and pieces and finally decided to finish it last night.
I will start off with some tutorial in a day or two 🙂
Which movie portal Deep 🙂
And well yes, your blog is a complete entertainment blog now 😉
[…] Read More…. […]
Lovely! Thanx 4 such an informative and helpful post. After htmldog, ur post is the next info bhandar 🙂
Abhinav – It is mentioned in one of my movie reviews hehe
let me make life easier.. it is http://www.nowrunning.com
Thanks Deep… we all know all of this… but never practice it! I am sure… after its come from you… things should be more into use by me!
Ah! At last something in addition to movie reviews. 🙂 But I got disappointed as soon as I read the title of this article. I thought the title will be
“Tips to make your code look beautiful part 1 of 10” 😀
You are capable of showing much more than what you have done here. Come on now, don’t be so miserly in giving CSS tips. Give some more 😀
PS: There are a couple of very small errors at some places. I will email you / call you separately for it soon. 😉