NEW: From the Factory Tutorial — Today we are going to look at some tips and tricks you can implement when creating an (x)html & css template. Hopefully these tips will increase the overall quality of your templates and help you sell more items here at Mojo Themes.
Write clean code with consistent indentation
When coding your (x)html it’s important to keep things consistent. One way to do that is to indent your code the same amount of spaces each time. I personally like a 2 space indentation, but some developers use 4 or more spaces. It really comes down to preference, but there is also an advantage to doing it. When you indent your code properly, it’s easier to see mistakes you’ve made, such as a closing div tag that may have you missed.
You should also try to manage the number of empty lines you leave in between each line of code. There really is no need for more than 1. Remember all that extra whitespace adds to the amount of time it takes for your page to load. It might not be a lot, but on bigger pages it can add up and one of your main goals as a developer should be to make your pages load as fast as possible.
Comments are your friend
Using html comments is a great way to keep your code organized. Adding a simple
[html]<!– #div_name –>[/html]
after the closing tag of a div not only helps you visualize your code better, but it makes you stay proactive about insuring you’re not missing a closing tag somewhere.
Use folders to organize your files
Make sure you separate your files into folders. The first thing I usually do when creating a new project is to create “css”, “js” and “images” folders. Keeping things compartmentalized like this actually speeds up the development proccess, because you’re not sorting through all of your files looking for the one you want. This way you know exactly where each type of file is when you need it.
Write standards compliant code
Making sure your code validates is absolutely crucial in the industry today and it helps ensure that your site will render the same in different browsers. You can use: validator.w3.org to validate your (x)html and jigsaw.w3.org/css-validator/ to validate your CSS.
Use semantic code
HTML was not originally designed as a way to make elements on the page look good, but as a way to describe the content. Following with that theme, the basic ideas behind semantic code is to write markup that describes your sites content.
Take this example. You could create a heading on your site both ways and they would look the same.
[html]<div class="title"><strong>Title</strong></div>[/html]
[html]<h1>Title</h1>[/html]
The difference is, that the second one uses the correct heading tag the way it was designed to be used. It also tells search engines that this “title” is important.
Link to your CSS stylesheets in the head of the document
This is a simple, but sometimes overlooked tip. Put your CSS in external shtylesheets and link to them in the head of your (x)html document. Also, avoid using inline CSS at all costs, because it doesn’t promote the maintainability of your code and can complicate things for anyone trying to edit your files in the future.
Put your JavaScript at the bottom
One problem with adding scripts to the head of your document is that they block parallel downloads. The browser won’t start any other downloads until your script finishes downloading. This adds to increased page load times, which we certainly don’t want. One solution to this problem is to place your scripts right before your closing body tag. This allows your sites content to load first, before your JavaScript is loaded, which adds to a better overall user experience.
Let Google host your JavaScript framework
Using the Google AJAX Libraries API as your content delivery network is a smart move. It decreases latency by spreading the JS files across a network of servers in various locations, so users far away from you will still benefit from fast downloads. It also allows for better caching of your JS files, because your user might already have jQuery in their browsers cache, but if you are hosting the files, then they will have to downloaded it at least once.
Don’t forget about Internet Explorer (Conditional Comments)
Internet Explorer is a pain for a lot of developers and unfortunately, IE6 is still around. Whether you decided to support it or not is your choice, but it’s not always the only offender. Luckily we can use conditional comments to target IE and even a specif version.
By using a simple comment like this
<!--[if IE ]>Add IE content here<![endif]-->
or
<!--[if lt IE 7 ]>Only less than IE 7 will see this<![endif]-->
You can fix some of the issues that arise with this browser.
In Conclusion
Creating an (x)html/css template can be very rewarding and fun. Hopefully you can use some of the techniques introduced here on your next project.
About the Author
