Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:
- collapsing html
- collapsing css
- consolidating css code into one file
The idea here is to speed up web page load times and to reduce web server loads.
This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.
The fact is that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content – not the code.
HTML and CSS collapsing?
This is simply removing white space in your code. So you can take this:
<p>
paragraph one
</p>
<p>
paragraph two
</p>
And cut it down to this:
<p>paragraph one</p><p>paragraph two</p>
The idea is that if you cut down 7 lines of code to just 1 line, the file will be a little smaller. And this is true.
Collapsing code was once useful, but like the transparent spacer gif trick … it is no longer needed. Actually, it’s more trouble than it is worth.
What can web designers learn from programmers?
When it comes to code, the web design community is still not nearly as experienced as the programming community. There are still lessons to be learned by the average web designer, lessons that have been fundamental in software development for years.
Programmers have known for years that when it comes to code, it is better make it cleaner than speedier, because clean code is much easier to read, write and maintain.
So in our example above, seven lines of code are better than one.
What is ‘cleaner’ code?
Clean code can be broken down into the following:
- Lots of white space so the code is easy to read.
- Lots of comments so that you can easily understand what is going on 6 months down the road.
- Code that is ‘chunked’ into logical groups so that it is easy to update.
The rise of object oriented programming is the best example of this understanding.
Object oriented code will almost always be slower than old school procedural programming. object-oriented programming now dominates the programming world and all the major languages use it including:
- Javascript
- PHP
- Ruby
- Actionscript
After decades of experience, programmers have learned through hard experience that cleaner code is much better than faster code.
How does this apply to web design?
write cleaner css and HTML that is easier to understand and easier to work with:
- Use lots of white space so the code is easy to read.
- Use lots of comments so that you will be able to understand what is going on 6 months down the road. This becomes more important when you are dealing with tricky CSS layouts that require unique markup.
- Organize your css into logical groups so that it is easy to update etc.
Won’t cleaner code slow down my pages?
just remember that it’s all about how well you use your images and how much of your site is made up of code and how much is made up of images. if your site is running slow, chances are that your images are too big or an external api script or js src stopped responding. none of it is because of your code.
Related posts:
You write very well.