Cleaner code is better than faster code
I can’t tell you how many times that my programming experience (in Java, PHP etc) has guided me in my web design work … and strangely, even in other aspects of my life not at all related to topics ‘nerd’.
… Ah, nerd wisdom prevails in all aspects of life.
Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.
-
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
- … and consolidating css code into one file, to minimize the number of server hits.
… The idea 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.
What is HTML and CSS code collapsing?
In a nutshell:
This is simply removing white space in your code. So you can take this:
Web design rocks!
Web design rocks!
And cut it down to this:
Web design rocks!
Web design rocks!
… The idea is that if you cut down 7 lines of code to just 1 line, the file will be a touch smaller. And this is true.
This old-school technique was used back in the 1990’s when everyone was on slow dial-up Internet connections and everyone had much slower computers.
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 (generally) 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 to:
- Lots of white space so the code is easy to read.
- Lots of comments so that you can much more easily understand what is going on 6 months down the road.
- Code that is ‘chunked’ into logical groups so that (again) it is easy to update etc.
The rise of object oriented programming is the best example of this understanding.
Object oriented code will almost always be slower (when running) than old school procedural programming. Nonetheless, object oriented programming now dominates the programming world and all the major languages use it including:
- Java
- PHP
- Ruby
- Actionscript
… and many others.
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?
Well, write cleaner css and HTML that is easier to understand and easier to work with. To repeat the list from above:
- Use lots of white space so the code is easy to read.
- Use lots of comments (in your html and css) so that you will be more 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 seemingly strange markup.
- Organize your css into logical groups (and pages) so that it is easy to update etc.
Won’t cleaner code slow down my pages?
The fact of the matter is, for the vast majority of websites (%99.99999999999999999) you will not see ANY difference in terms of speed or cost in bandwidth.
… The ‘optimize code to save money’ is a wurban (Web + urban) myth.
Stefan Mischook
www.killersites.com
May 11th, 2008 at 1:44 pm
I received a degree in Computer Science before I started my web design company, and couldn’t agree more. I expected that web designers would follow “best practices” and make their code clean and easy to read, but apparently this is not the case. I think that perhaps one of the reasons for this, is that there are many web designers who have no intention of maintaining their code – unlike “real” software developers. Over and over again I have people contacting me who need website maintenance done – and alas- their original web designers are “unavailable” for some mysterious reason. Honestly this annoys me. Because I also have an engineering degree, and building something that’s hard to maintain is considered bad design.
On a similar vein, I am also annoyed by web designers who make their websites in 100% flash. I get call after call from small business owners asking me why their websites don’t show up in search engines. (I wrote this article in response recently http://aldebaranwebdesign.com/blog/artists-vs-engineers-best-website/).
And guess what, when these small business owners need updates to their websites, for some reason, they aren’t contacting the original designer either.
As a former engineer with a computer science degree who is now in the website design business, I wonder how ethical it is to take someone’s money and give them a website that is not easy to maintain and hard for search engines to crawl…and then, simply abandon the small business owners. I see it every day.
Can’t we be more ethical and create websites that are easy to maintain and perform over the long run?
May 12th, 2008 at 1:48 pm
This is a great point. I would like to throw a little wrench into the mix, and that is with regards to SEO. I think that designers would do well to keep it neat and clean AND keep it as short as possible (without becoming illegible). Google spiders likely measure the number of lines to the first Title tag, H1 tag, etc., so it is a good idea not to take *too* much time getting there.
So, to use your example, you can tighten it up from 7 lines to perhaps two lines. This way, spiders will reach those key tags faster, but it will still be easily read when it comes time to do some website maintenance.
In short, a good balance is in order here if you are also concerned about SEO.
~Graham
May 19th, 2008 at 10:23 am
I can’t but agree more. I used to develop websites without much thought about maintenance until I ran into trouble when a site i had designed was brought the back to me for maintenance. You could not believe the stress i had to go thru!
Maybe because i did not have a programming background (am still teaching myself web design)contributed to this but really a lot of designers are guilty of this and this has to stop.
The more we think about our clients, the better it would be for business