HTML / CSS Template Creation Tips and Tricks

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.

  1. 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.
  2. 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.
  3. 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:
    1. images
    2. css
    3. js
    4. dwt
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Let Google host your JavaScript framework.
  9. Don’t forget about Internet Explorer (Conditional Comments).

Read HTML / CSS Template Creation Tips and Tricks

Website Testing

Whether you author a blog, own a website, are a web designer or are a web developer website testing is a must. This testing goes beyond initial testing when the blog or website is launched, it needs to be an on going maintenance task. ~ Web Page Mistakes with Solutions ~

Static HTML Website Testing

The above holds true for those who design and maintain hobby sites as well. If you have a static website, your site does not have to be on the server for you to test it in various browsers as well as at various resolutions. If you are using Expression Web and working in Design View, make sure you use the Preview in Browser (F12) feature. Don’t just check you site in your default browser. I check in three, Firefox, Internet Explorer, and Opera.  If you are using Expression Web 3.0, you have another option – SuperPreview.

Web Space Website Testing

Another way to test your site is to create a test area on your server space. It could be a subdomain you create or a folder/directory on your current site. Rather than password protecting the subdomain or directory, I use the robots.txt file to keep the search engines from indexing the site before I am ready for it to go live. Make sure you change this after the site is live.

Website Testing As the Website/Blog is Built

As you develop your site, there are things that should be tested as you work. They include:

  1. HTML Code Validation
  2. CSS Code Validation
  3. Screen Resolution
  4. Alt Attribute
  5. Correct Color Contrast
  6. Font Size
  7. Uncommon Font(s)
  8. Text Alignment
  9. Heading Hierarchy
  10. Browser Specific Design
  11. Custom Error Pages
  12. Website Navigation
  13. Search Engine Friendly Design

Read the full article Website Testing and make this a regular part of the web design process.

max-width and IE6

I have been working on a new set of templates to offer to the Migrating from FrontPage to Expression Web EBook owners and class students. I wanted to use a photo taken by a friend in the masthead. I also wanted to limit the width of the container for the page content to no wider than 1200px. No problem, just use max-width property in the external style sheet.

Example:

#outerWrapper {
	background-color: #fff;
	width: 80%;
	text-align: left;
	max-width: 1200px;
	margin: 20px auto;

}

Only one problem, Internet Explorer 6 and below does not recognize the max-width property. So I went searching with my friend Google and came up with a number of suggestions for fixes:

My choices seemed to be to use a simple “hack” to get it working, by using expressions (in javascript-like syntax) in CSS which Expression Web 3.0 did NOT like or javascript. I chose the latter and used the last one on the above list as it seemed to handle not only max-width, but min-width, max-height, and min-height. Of course, if the viewer has javascript disabled it will not work.

The three column template that is one of the three offered in this package looks like the image below and should display from 800x600px with no horizontal scroll and for higher resolution monitors will display at no wider than 1200px. A simple solution to a vexing problem.

So if you want to use a minimum or maximum width or height as part of your style sheet, you might give doxdesk CSS minimum and maximum sizes a try. Just download the minmax.js file and publish it to your server. Then add the following line of code to your DWT:

<script type="text/javascript" src="minmax.js"></script>

Make sure you adjust the path to the script to where you have published it to your server. My javascript files are located in a folder called js.

misty-morn3

Misty Morn 3 Column Template.