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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">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.
<meta 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.
<meta 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!
<meta name="distribution" content="Global"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="revisit-after" content="31 Days"> <meta name="email" content="hello@mrhenry.be"> <meta name="author" content="Mr. Henry"> <meta name="publisher" content="Mr. Henry"> <meta name="copyright" content="copyright 2009 Mr. Henry"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="rating" content=""> <meta 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!
<link 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.
<title>Starting HTML template | Site name</title>
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.
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css" media="screen, projection"> <link href="stylesheets/general.css" rel="stylesheet" type="text/css" media="screen, projection"> <link href="stylesheets/typography.css" rel="stylesheet" type="text/css" media="screen, projection"> <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
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.
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.load("swfobject", "2"); </script>
After this hazzle dazzle, we include the application.js. In this file we write our home-made javascript, fueled with jQuery.
<script src="javascripts/application.js" type="text/javascript"></script>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.
<!--[if IE 6]> <script src="javascripts/DD_belatedPNG_0.0.7a-min.js" type="text/javascript"></script> <script> DD_belatedPNG.fix('*'); /* string argument can be any CSS selector */ </script> <![endif]-->
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.
I think it’s better to use specific IE6 or IE7 stylesheets with conditional comments instead of al these * __ hacks in your general.css
Working by the standards is always better IMHO. Especially when someone else has to work with your code.
This was an interesting article. It gave me a new view on how to build a website in a more structured way!
When PHP is in the game, how do you deal with all those files?
Some stuff sounds familiar
@ Robin: if you’re using PHP I’d suggest keeping your web-accessible stuff (flash, JS, images,…) and Server-side scripts (PHP) in different locations, and make sure that the PHP-directory can’t be visited from the web. Doing so will guarantee that malicious users can’t access certain PHP files you don’t want them to see. Here’s how it could work:
project_dir/
php/
config/
config.php
init.php
lib/
mysql.php
lib.php
main.php
templates/
_footer.php
index.php
page1.php
_header.php
web/
css/
base.js
index.php
js/
basejs.js
images/
whatever.png
You should place your project folder outside you web server’s public or www dir (or whatever it’s called) and tell the web server that it can read from your project’s web dir (e.g. with a symbolic link or a virtual host). The index.php in your web folder should include or require your main php file.
Also, you should use HTML templates in PHP to try and separate your PHP and HTML as much as possible. This requires you to write or use a template engine so it’s more work in the beginning but you’ll greatly profit later on because your code doesn’t get all messy.
And when you’re working on a big PHP5 project and learning something new doesn’t scare you, you should try Symfony, it’s a PHP framework that helps you build projects. It takes a while to learn but once you do it’s great.
http://www.symfony-project.org/
I hope this helps
Greetings,
Thomas
Damn you Blog, you trimmed my directory tree!
Anywayz, here’s how it should look:
project_dir/
- php/
- – config/
- – - config.php
- – init.php
- – lib/
- – - mysql.php
- – - lib.php
- – main.php
- – templates/
- – - _footer.php
- – - index.php
- – - page1.php
- – - _header.php
- web/
- – css/
- – - base.js
- – index.php
- – js/
- – - basejs.js
- – images/
- – - whatever.png
very useful !
Thank you, I give it a try
[...] Mr. Henry [...]
[...] Mr. Henry [...]
Wow, this site looks fantastic. I just wanted to say that. Bookmarked as an example of inspiring design… many thanks.
Hi ! Yes i also like alex suggestion , this is great site , definatly everyone like to bookmark it.
[...] Mr. Henry [...]
[...] Mr. Henry [...]
[...] Mr. Henry [...]
[...] Mr. Henry [...]
[...] 16. Mr Henry [...]
[...] 16. Mr Henry [...]
[...] 16. Mr Henry [...]
[...] Mr. Henry [...]
ambien cash on delivery Anybody
alprazolam online cheap Tower
Buy soma cod
tramadol with saturday delivery creator
phentermine perscriptions builta76yahoo
no prescription required overnight tramadol cod embrace
25mg viagra standards
phentermine prescription drug fittings1
xanax free shipping Faces
viagra overnight shipping Molly
Seroquel no prescription Killeen
valium fast delivery 1Lemay
Klonopin without prescription
cod soma Fitzpatrick
buy soma overnight 1900s
order chead tramadol divorcee