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.
- Write clean code with consistent indentation – When writing your XHTML code, be consistent in the amount of spaces you use to indent the various lines. With Expression Web, you can set this under Tools > Page Editor Options > Code Formatting tab. Sent the number of spaces to be used for Indent. You should also limit the number of bank lines you use in between the lines of code.
- Comments are your friend. Using comments is a good way to keep your code organized. From within Expression Web, you can use Code Snippets to insert comments into both your XHTML code and your CSS Code. Ian Hayes has also developed on add-in for Expression Web 4 Code Comment Add-In.
- Use folders to organize your files – Rather than sticking all your files in the root directory of your website, create folders for your images, styles, and javascript files. I add the following folders to my websites for organizational purposes:
- images
- css
- js
- dwt
- Write standards compliant code. Make sure to check and see if your XHTML code validates as well as your CSS. This will help ensure that your pages display as you expect in all browsers. Expression Web can help you do this by using the Compatibility Checker on Status Bar.
- Use semantic code – HTML is used for writing the code, describing the content NOT for styling the content. The basic idea of semantic code is to write markup that describes your sites content. So instead of using <div class=”title”><strong>Title</strong></div> for the title of your page, use <h1>Title</h1> which is semantic markup.
- Link to your CSS stylesheets in the head of the document. Create an external style sheet and link to it rather than embedding the styles in the head section of your page.
- Put your JavaScript at the bottom. Placing your scripts right before your closing body tag will allow your sites content to load first, before your JavaScript is loaded.
- Let Google host your JavaScript framework.
- Don’t forget about Internet Explorer (Conditional Comments).