Making your Web Designs much smaller and neater

I was just looking at varoius websites created by my freinds. For some of them, I found it slow to load, and the sourcecode sometimes can be messy. It came to my mind that I should write an article on how to make your codes look nicer, and of course how to make your website faster to load.

Usually, there is an universal rule that we all abide to: The website, including all images (excluding contents), should not be over 200Kb. It might be hard for some people to achieve that, and so we are going to tell you how =)

Tip #1: The use of repeat attributes and stretchable background images

Avoid fancy background images. Not only they make your page slow to load, it also distracts your users away from the main content. Try to use background images that is repeat-able , something like a gradient, or a pattern (strokes, etc.)

Example (It is only 2.5Kb):

This is stroke.png:
this is the CSS:

body {background: url(stroke.png) repeat; }

What? You can’t see the image? Let me zoom it to 32x

And when you set that as a background image with repeat on, this is what you get: (You will need to click on the image to zoom in)

It’s amazing how such a small picture can create such an awesome background effect.

What about gradients, you ask? Well, it is as simple as that. Create an image with width/height (depends on if you want the gradient vertically or horizontally) no more than 5, and the other one to as wide/high as you want the gradient to be. I will choose a vertical gradient for this one.

So this is my bg.png:
This is my css:

body { background: url(bg.png) repeat-x #a9a9a9; }

#bababa is the color where the gradient effect. The image itself is only 1.2Kb. When I have that image and css prepared in my design, this is what I will get:

Tip #2 – Use PNG for images!

It might be well known already, but I feel the urge to remind everybody that PNG is the best way to save a image. The image quality is much better than GIF, and the size is much smaller than JPG. It also supports transparency!

Let me compare GIF, JPG and PNG’s:

GIF – 2.6Kb
PNG – 2.2Kb, clearer than GIF
JPG – 10Kb

PNG has the smallest size, yet the best quality out of all these files.

Tip #3 – Use DIV’s instead of tables

Although tables are still one of the must-learn subjects in HTML, nowadays designs tend to use only DIVS now, or at least on the layout. Here are some tips of you who find it switching from tables to DIV hard

Center the cell div

On tables, you might have had 3 columns with the side ones’ width set to a percentage, or with solely the middle one’s width set to a certain amount. For DIV’s, this will be what you need:

In your css, put in this code:

html, body {
text-align: center;
}

#container {
margin: 0 auto;
width: 900px //changeable
}

Then, in your HTML put in the following code inside body tags:

<div id="container"> Stuff to be centered </div>

Using Float

Tables might be easy to create something like a sidebar, but DIV’s are too. Let’s say you have the main content in the div #content, and you plan to have your sidebar at the right side in div #sidebar with a width of 200px. This is whta you do to your css:

#content{
float: left;
}

#sidebar {
float: right;
width: 200px;
}

.clear { clear:both; }

Why is there a class called clear? The clear:both; attribute makes sure that other floating elements are not anymore allowed. In your HTML, this is what it should look like:

<div id="container"> <!-- Container -->
<div id="content"> Content</div>
<div id="sidebar"> Sidebar </div>
<div class="clear"></div>
</div>

Tip #4 – Using Lists instead of DIV’s

“Wait wait wait, Peter, you just told me to use DIVs, why are you telling me to use lists now?”. Here, I mean use lists instead of div on repeating elements, suhc as navigation menu, etc.

When i first learned to use lists as navigation menu items, I was confused as well. “Why bother? Why not just use DIV’s?” This was a question that I have been constantly thinking. After a few days of thinking and messing around with lists, I found out the answer. Sometimes designers are lazy. They want to type as less things as possible. Think about it, <li> is much shorter than <div class=”menu”>, right?

So how do you make lists not look like a list, but a menu? Here is what you put in CSS:

li {
list-style:none;
padding: 0;
margin: 0;
display: block;
width: 50px;
}

This is what it should look like in HTML:

<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>

If we used DIVs instead of lists, the code might have been much longer than that since we will need to use class in the css, instead of having the css applied to every li’s.

This is all we recmmend today. Should you have any problems in following this guide, feel free to ask us!