… 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

Killersites.com is an old site, nearly 12 years old now!

Over that time (as we added more articles and tutorials), our directory structures and file naming styles changed as conventions changed. So now I have a huge mess to clean up.

… There is a lot of information buried in killersites.com that people just don’t find.

Fortunately, over the last 12-13 years of building websites and web applications, I’ve been able to figure out the best way to organize a website:

In this article, I discuss how to create an easier to maintain, more user friendly website by way of using intelligent paths.

-

So what are ‘intelligent paths’?

I’m talking about URL structures of course! So that means a few things:

1. Building a SENSIBLE website directory structure.
2. Using meaningful words in page names and directories.
3. Using lower case text for page and directory names.
4. Using dashes between words in both page and directory names.

… Let’s go over the details.

Sensible website directory structures

I am talking about being logical (in the hierarchy of your website) so that it should be easy for people to find content in your site. So for example, on killersites.com I now have major sections for Wordpress, Dreamweaver and soon Flash. So when someone comes to my web site and finds themselves in the Dreamweaver section:

http://www.killersites.com/dreamweaver/

That same person, an enterprising nerd, might think that given the above Dreamweaver address/URL, that the Wordpress URL could be found at:

http://www.killersites.com/wordpress/

… And thankfully, they would be correct!

And since killersites.com has plenty of free video tutorials to offer, it only makes sense that the videos be kept in a ‘videos’ sub-directory:

http://www.killersites.com/wordpress/videos/

Wanting to be consistent (and logical) we should do the same thing for our Dreamweaver videos as well:

http://www.killersites.com/dreamweaver/videos/

Later on, as I add new content (and reorganize the old content) I should remember to keep my directory/URL structures consistent. This will make the web site easier to navigate (users perspective) and easier to manage for us web designers.

Using meaningful words in page names and directories

I think this point is self describing …

As people are getting more web savvy, they will tend to look at page names and URLs more and more. Good (self describing) URLs give the surfer (and search engines) information about the content of the page they are visiting:

www.killersites.com/dreamweaver/videos/

… I think that it is pretty clear what they will find on this page!

Consider a bad URL:

www.killerdreamweaver.com/dw/vt/2008.html

… how are people (and search engines) supposed to figure out that the above page is filled with Dreamweaver (dw) video tutorials (vt) made in 2008?

Using lower case text for page and directory names

This is more of an aesthetic thing – lower case text across the URL text is just nicer to look at. Consider an old (soon to be retired) URL:

http://www.killersites.com/videoTutorials/Tutorial_WebDesign/webDesign.jsp

Yikes! I describe the content well enough but the text just looks ugly! This would be nicer:

http://www.killersites.com/video-tutorials/tutorial-webdesign/web-design.jsp

Easier to read, but some of the combined names will not make Google happy and the URL is kinda long. How about this:

http://www.killersites.com/web-design/videos/

… Now that’s a sensible URL!

Using dashes between words in both page and directory names

I know for a fact that search engines have an easier time discerning the subject of a page when words are separated by dashes as in:

web-design

.. rather than:

webdesign.

Besides the search engine advantage, the use of a dash makes it just a lot easier to read.

Conclusion

Just by following these few simple rules, you can make your web sites easier to maintain, easier to navigate and friendlier to the search engines.

Thanks for reading,

Stefan Mischook

www.killersites.com
www.killerphp.com

Hi,

In my continued attempts to teach web designers how to program with PHP (now an essential web design skill,) I’ve just released part 1 of 3, of my video series on creating custom functions in PHP.

We cover the very basics and learn about one of the key advantages of creating functions in php versus just write straight PHP code to your pages.

The Video: Custom PHP Functions

Part 2 and 3 will be out soon.

Thanks,

Stefan

www.killersites.com

I won’t go into what you needed in the past, because it matters not. So let’s talk about what you need to know today, to be a complete and competitive web designer.

The Web Designer’s Study Guide:

1. HTML
2. CSS
3. PHP
4. Javascript

Comments:

I think the first two on the list would make sense to most. But #3 is probably confusing the heck out of some of you, so let me make a few quick points.

WHY WEB DESIGNERS NEED TO LEARN SOME PHP

In a nutshell:

• Most web projects will require some basic dynamic functionality that PHP makes easy.
• Blogs and CMS software – read below.

Today, it is becoming more and more common that web sites are based on a blog or CMS package. For example:

• Wordpress
• Drupal
• Mambo

To take full advantage of these, you should be able to dig into the code so that you can make the changes for your clients particular needs. Not all blogs/cms are written in PHP .. but many are, including the ones listed above.

I go into more detail about php for web designers on my dedicated PHP site for web designers:

www.killerphp.com

Thanks,

Stefan Mischook

www.killersites.com

Podcast running time: 7:30

Download MP3 link: 3 Reasons to hand code

Thanks,

Stefan Mischook