Speed up your HTML development

yves — Thu, 23 Jul 2009 10:19:12 +0000

Every time you start a new html project, you have to configure a couple things over and over. When you have some standard configurations at hand, this could be an enormous time saver and can avoid easily made mistakes at deploy stage! A good example is HTML/CSS/JS-kickstart.

Through the hand of time, we’ve created something alike, because there isn’t something like “the perfect starting files”. And after all, everyone has other needs and preferences. You can easily make one yourself too! Let’s take a closer look at our starting files.

We have a Github repository where you can download or fork our files:
http://github.com/mrhenry/head-start/tree/master

The tree

First of all, notice the tree structure. This is just a basic setup, but it contains essential folders for most websites. An other advantage is that you create a name spacing that you can use into all your projects.

favicon.ico
index.html
crossdomain.xml
flash
- expressInstall.swf
images
- backgrounds
- buttons
- general
- icons
- titles
javascripts
- application.js
- cufon-min.js
- DD_belatedPNG.0.0.7a-min.js
stylesheets
- general.css
- ie.css
- print.css
- reset.css
- typography.css

Ok, now you know what our tools are, let’s dive into our index.html. And we start at line 1!

Doctype

This is where it all starts, and all can go wrong. It’s really important that you choose the right doctype for the job. We prefer to work with HTML 4.01 or XHTML 1.0. Always choose for the strict version because we write clean code and don’t use presentation tags. There’s a lot of fuzz about this so if you’re a selfrespecting front-end developer, you should read about this! Oh, and don’t leave it out if something goes wrong with your layout, it’s probably your code, not the doctype *grin*.

Meta tags

In our head section of our document we start with some very important meta tags. They still are very important for search engines and their crawl bots, but also for your visitor’s browser. You can easily give a lot of information about your page in machine language.

The first one declares that we the character encoding is Unicode.

 http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This second one removes the image actions of Internet Explorer when you hover over images. Personally we don’t like this behavior, so it’s kind of personal wether you put this one in or not.

 http-equiv="imagetoolbar" content="no">

And these are important for our search engine friends. They’re easily forgotten but can make a huge difference! We picked out the most relevant ones for us. And yes, again, you can flavour this at own taste!

 name="distribution" content="Global">
 name="robots" content="INDEX,FOLLOW">
 name="revisit-after" content="31 Days">
 name="email" content="hello@mrhenry.be">
 name="author" content="Mr. Henry">
 name="publisher" content="Mr. Henry">
 name="copyright" content="copyright 2009 Mr. Henry">
 name="keywords" content="">
 name="description" content="">
 name="rating" content="">
 name="expires" content="never">

Favicons

These tiny little icons are a simple but effecient signature of your site. By adding the following line, you can make your own cool icon in .gif or .png format, and not the hard-to-make .ico. Maybe you can try an animated one!

 rel="shortcut icon" href="/favicon.gif">

Title

Your page title is a very important key to search results. It’s a good practice that you keep your H1 and the first part of your title the same. Preserve the second part of your title, behind a seperator, for your site’s name.

>Starting HTML template | Site name>

Including the stylesheets

Now we’re going to link our stylesheets. As you saw in our tree structure, we use a couple of CSS files. It’s a best practice to divide your CSS files in proper sections. First we load a reset.css file, because we want to look good in every browser *shine*. Afterwards we pick up the general.css and typography.css files. And last but not least we link the print.css and a special dish for our good friend Internet Explorer (no sarcasm). Those strange tags around ie.css are hiding it from all other browsers. They’re called conditional comments and are only recogniced by Mr. IE. If you need to write hacks, it’s better not to but sometimes there’s no other way, write them for IE, in these files. So the rest of your css stays clean and valid.

 href="stylesheets/reset.css" rel="stylesheet" type="text/css" media="screen, projection">
 href="stylesheets/general.css" rel="stylesheet" type="text/css" media="screen, projection">
 href="stylesheets/typography.css" rel="stylesheet" type="text/css" media="screen, projection">
 href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print">

Including the javascript

In modern webdevelopment, we all use javascript to let the user experience sparkle. Forget about the 90’s and the sloppy pop-up and -under scripts! Nowadays we have great frameworks at our side and they’ve taken the development speed to the next level. It’s fun to write and you can do really crazy things with them. Oh and they take care of all the browser differences too! My god, where have they been all these years! Enough blessings. Let’s move on!

Our favorite javascript library is jQuery. It’s easy to learn, fast to develop and has a huge active community. If you look at the way we load our library, you can see that we use the google.load() function. Since a couple months, this is a great way of including your favorite javascript libraries, because it’s on the Google servers and this method is used on a lot of big sites. Your visitors probably have these links already cached, which results in faster loading times! It’s a good idea to choose your version number of the library you want to load, just in case, you never know if an update can change your script’s behavior.

We use the same method to load SWFObject. You probably don’t need it in every project, but it’s handy in your head-start files.

 src="http://www.google.com/jsapi" type="text/javascript">>
 type="text/javascript">
google.load("jquery", "1.3.2");
google.load("swfobject", "2");
>

After this hazzle dazzle, we include the application.js. In this file we write our home-made javascript, fueled with jQuery.

 src="javascripts/application.js" type="text/javascript">>

Of course, we can’t leave the house without a decent PNG fix. We’ve tried tons of PNG fixes, and every one of them had it’s disadvantages. But then, one day, there was the DD_belatedPNG fix. And, as they describe it themselves, it’s the pure medicine for your IE6 PNG headache! It uses a total other approach than all the others, a better one, a more simple one. Instead of using Microsoft’s AlphaImageLoader, it uses VML, Microsoft’s baby for creating vector graphics. And miraculously, PNG images and their transparency show correctly in a VML fill element. Notice the conditional comments around, because we only want IE6 to read and execute these lines.

We can close down the HTML head section and start working on our B.O.D.Y. There’s not much to say here because you probably want to start clean every project.

A quick look inside our stylesheets

When you look inside our CSS files, you will find some predefined styles, very limited, but these come in handy when it comes to rapid development. Then comes the question whether you like CSS frameworks or not. We personally like to do it from scratch when it comes to styling. But with the limited styles available from the beginning, yes, we’ve created our own little framework. There is absolutelly nothing wrong using a CSS framework, it just has to suit you. If you are more deleting than using styles of some framework, consider NOT using one, or simply create one at your needs.

Taming Microsoft’s internet navigator

And last but not least, a quick look into our special blended CSS file for Internet Explorer. Some people use different files for the different versions. We prefer one file with version hacks. It’s easier to keep an overview this way on what you allready hacked.

Below you will find the version hacks we use. They’re commented so everyone who uses the file can easily look up which neat hackedihack to use.

    .box {
       background: #00f; // all versions including Mac IE
       //background: #f00; // IE8 only
       *background: #f00; // IE 7 and below
       _background: #f60; // IE 6 and below
    }
    html>body .box { *background: #007; Only IE7 }

The very very last thing you can say about IE is that he renders images really ugly when you downscale the actual size. We’ve added the following line to our ie.css and IE is showing those scaled images of you as they where that size ‘fo real’!

img { -ms-interpolation-mode: bicubic; }

That’s it for our first head-start files. As usual: comments are open for you much appreciated feedback.

the Mr. Henry blog-o-sphere » Internet