Make Templates to Save Time with HTML and CSS

When you design several websites, you can save your time by making your own templates. It’s not hard. Even if you make only three websites, the templates will save you time and let you make a more comprehensive, functional, and aesthetic design.

My Model as an Example

My HTML template preserves my most common layout. I like having three columns plus a header and a footer at full width. I also have my complicated Google code in various positions, and it’s convenient not to have to refigure it every time.

A ton of comments to myself remind me of when to use each HTML tag with my typical content. Some comments about CSS are also in that template, and so are comments about other layouts. A lot of what I might want to remember is probably in comments. If it’s a templated comment I’ll want to keep in the website, I mark it with the start tag like this:

<!--!

The end tag is still this:

-->

The start tag gets the second exclamation point, meaning that preservation of the comment is intended, because some implementations recognize it, although the HTML 5.2 specification does not (a proposal was closed).

With a lot of elements on a page, especially div elements, losing track of which end tag go with which start tag is too risky. Many of them have id attributes in the start tags. So, before a problem comes up, to make diagnosis easier, in the template, I temporarily add a comment after the end tag giving the id attribute value for the matching start tag. Now, when I have, say, four div end tags in a row, I can see which one is which. They’re temporary, so I take them out of production files, but I can open a problem file’s source code and the template at the same time and find the tags I need.

Then, when I make a website, I copy the template into a folder for the new website. Then I go line by line, editing elements, inserting content, and reading, applying, and deleting comments.

I also go back and tweak the original template for the next time. As long as I’m learning improvements, I may as well keep them by upgrading my template.

CSS, Framework, At-Media Rules, and Not Minifying

For CSS stylesheets, I started with a framework (I like H5BP (HTML 5 Boilerplate)) and then I use my last CSS stylesheets as models for the next set. Comments about CSS go into my HTML template but my stylesheets are complex and I don’t want to do that much editing, so the last set is usually a more efficient starting point.

Since I use at-media (@media) rules, and I have dozens of media queries, one way to save maintenance time is to precede each query with what’s different about the rules encompassed by that query compared to the previous query’s rules. I list, in a comment, which selectors I’ve added or deleted and in which blocks I’ve revalued a property. Here’s a hypothetical example:

@media screen and (max-width:800px) and (min-width:301px) {

span.mediumprominence {font-size: 120%}

span.lowprominence {font-size: 105%}

}

/* The next following @media rule differs from the preceding @media rule only in:

span.mediumprominence by the revaluing of font-size to 110%

span.lowprominence by the deleting of it

*/

@media screen and (max-width:300px) {

span.mediumprominence {font-size: 110%}

}

Rationales for separating media queries at various breakpoints can be useful to remember. If you use that stylesheet as the starting point for your next website, you’ll want to know which breakpoints you can erase (besides deciding where to add new ones). A comment just before the @media line is a good place for a reminder of your reason for that breakpoint.

I don’t minify. Minification speeds users’ access to a website but it’s an extra step, it makes code harder to read and maintain, and it strips all comments, including those that belong in place even after downloading to a user’s browser. Since I mostly use static code, speed is not much of a problem, and Google, which recommends minification, does not complain about my sites’ download speeds without minification.

It Works

Yet, my websites look different from each other. Templating does not prevent original creativity each time.