Speed up your HTML development   

23 July 2009
Back 39 comments

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

head-startspeedy-gon-whatsnel

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.

Back 39 comments

39 Responses to “Speed up your HTML development”

  1. Harm 2009 July 23

    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.

  2. Robin 2009 July 23

    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?

  3. Sibran 2009 July 23

    Some stuff sounds familiar :)

  4. Thomas 2009 July 27

    @ 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

  5. Thomas 2009 July 27

    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

  6. Elien 2009 September 11

    very useful !

  7. Robin 2009 October 01

    Thank you, I give it a try

  8. 25 Beautiful Blog Comment Designs | Vandelay Design Blog 2009 December 15

    [...] Mr. Henry [...]

  9. 25 Beautiful Blog Comment Designs | JKookServ Hosting Blog 2009 December 15

    [...] Mr. Henry [...]

  10. Alex Alcyone 2009 December 16

    Wow, this site looks fantastic. I just wanted to say that. Bookmarked as an example of inspiring design… many thanks.

  11. speedmax85 2009 December 20

    Hi ! Yes i also like alex suggestion , this is great site , definatly everyone like to bookmark it.

  12. Professional web designers and web 2.0 experts » Blog Archive » 25 Beautiful Blog Comment Designs 2009 December 30

    [...] Mr. Henry [...]

  13. 25 Beautiful Blog Comment Designs | iDESIGN 2010 January 07

    [...] Mr. Henry [...]

  14. 25个漂亮的博客评论设计 - 菠菜博 2010 January 27

    [...] Mr. Henry [...]

  15. 25个日志评论列表样式设计 « Lx实验室 2010 February 09

    [...] Mr. Henry [...]

  16. 40+ Excellent Comment Designs For Design Inspiration 2010 February 28

    [...] 16. Mr Henry [...]

  17. 45+ Excellent Comment Designs For Design Inspiration | Son Of Byte - Web Design & Development 2010 March 04

    [...] 16. Mr Henry [...]

  18. More than 45 Beautiful Comment Designs, Must See! | Information to Web design, Great Graphics Design, Web design portofolio, Web design Tutorial, online bussinesses web design bussiness, Articles about graphics website for internet online bussiness |web d 2010 March 15

    [...] 16. Mr Henry [...]

  19. 25个特色的博客评论设计 - IETester 2010 March 17

    [...] Mr. Henry [...]

  20. eaembtnoadn 2010 July 26

    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

  21. 25个博客网站的评论功能设计 | 第一站长站 2011 March 31

    [...] Mr. Henry [...]

  22. 环保锡丝 2011 August 01

    Hey there! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My web site looks weird when viewing from my iphone. I’m trying to find a theme or plugin that might be able to correct this issue. If you have any recommendations, please share. Thanks!

  23. yves 2011 August 01

    Hi,

    you should look at http://html5boilerplate.com/mobile/
    or google for ready-to-use WP themes like http://wordpress.org/extend/plugins/wptouch

  24. Wwmxibnh 2011 September 24

    Do you play any instruments? Hussyfan Jailbait gfiihw

  25. Gbxarigy 2011 December 16

    We need someone with experience Preteen Toplist
     :-) )

  26. Chevrolet Lanos аэродинамический обвес Nika 2012 January 05

    Действительно удивили и порадовали Никогда не поверил бы, что даже такое бывает

  27. Llfsjbqj 2012 April 21

    I’d like to send this letter by cliphunter
     is beautiful girl………
    porn365
     Heather is way better.
    tubeko
     Wao! Lex Has Fans. LMFAO!
    youporno
     Sooo… what’s her name then?
    gallerygalore
     had to comment again. this is a favorite…even though the dude looks like jim rome.
    empflix
     the redhead reminds me of my mom when she fucks me. lol
    alotporn
     stunning whats her name i must see more
    ebonyporn
     Holy Smaoke…hope the camera man had a rain jacket on!! XD
    jizzhut
     fuck the first cooments
    cuckshare
     The dog it is nice than her ahahah

  28. Omcpnaig 2012 April 21

    I’d like to speak to someone about a mortgage dtvideo
     she has a beautiful pussy. Look how it opens and closes like a flower.
    maxporn
     this orgie not a threesome
    1trannytube
     ich will auch si eine lehrerin haben die mit mir fickt =D xD
    xpornz
     why cant girls be this fucking sexy in america?
    freepornos
     Oh my goodness… this one is perfectly astonishing
    youporno
     this shit should be under anal section
    bestporn
     who is the inked up chick?
    jizzhut
     Pills do what for his dick? I’m confused.
    pussycalor
     I want to stick my hard cock in that white girls ass!
    cuckshare
     Why? Becuase he has a small dick+

  29. Rusxgsil 2012 April 21

    We need someone with experience stileproject
     A very nice video! Thanks for uploading – Yours truly!
    maxporn
     think his wife was blinking help me ,is this woman still alive
    xvideoslive
     hot….would love the rest of the movie
    juggworld
     OMG she fucked Bullseye!! lol
    badgirlsblog
     Perfect girl love it
    myhomeclip
     his dick aint big -.-
    empflix
     ,oh super Thanks
    xnxxcom
     :ha ho ich fand das video richtig gut!
    pussycalor
     i would buy that album…
    hardcoretube
     i wanna fuck you so hard ^^

  30. Rydecsax 2012 April 21

    We went to university together haporn
     Oh she’s wonderful!
    stileproject
     still got the same old song though
    cliphunter
     great natural body, and good work!! Nice!!
    maxporn
     Love this movie, so fucking hot!. Wish my school was like this.
    porn365
     Some very satisfied penises as balls are drained by horny girls
    1trannytube
     WOOOOW thats one good piece of porn!
    eporner
     That is simply amazing. I just fell in love. THE perfect girlfriend. Mmmm
    al4a
     love it and what a cock lol
    myhomeclip
     She is a realy profi ! She is a dirty bitch and she likes to fuck – come to me
    3movs
     Damn I would never get tired of fuckin her. she is fine!

  31. Lillian 2012 May 01

    International directory enquiries Prozac Zoloft 303 Person Code A/N 3 variable O The 2 digit numeric Medicaid

  32. Tyucuikp 2012 May 02

    Your account’s overdrawn http://fanoroolyc.blog.free.fr/ teen plus modeling That guy was either really really nervous or half asleep. He just looks bored as hell having these two sexy girls drooling over his cock…..

  33. Clzgkzin 2012 May 02

    When do you want me to start? http://eheikygoni.blog.free.fr/ preteen thumbniles dam shes fiine id fuk her so hard and lik her fine ass pussy and cum all over her face for finishin off

  34. Gkrltdbu 2012 May 02

    I’ve just graduated http://bupogigedot.blog.free.fr/ bbs forum boys lover I would love to have a boyfriend who would fuck me when he had invited a LOT of his friends over and left the door open for them to just walk in and join us

  35. Bqjjjtcl 2012 May 03

    Can I call you back? http://ysadoraap.de.tl chinese model sexy omg, watching this has got be so turned on and my undies a little soaked. if u want to reinact this find me here lonelyandbored. c o m

  36. Lqmqqdoy 2012 May 03

    Could you please repeat that? http://ysimoifiaro.de.tl naked nymphets toplists I farted just prior to clicking on this vid. I imagine the Smell-o-vision version of this clip would have the same effect. I sure hope it does anyway, we’re out of beans and fruit in this joint!

  37. Kxmoshey 2012 May 04

    this is be cool 8) http://kyasefodico.de.tl teen model alina WHY DO WOMEN FUCKING LET THESE SICK MEN FUCK THIER THROATS??? ITS DISGUSTING! SHE DOESN’T DESERVE THAT CRAP! (yeah, im a dude). What The Fuck! I’m getting real tired of this. Can we please have a porn with a NORMAL bj sometime this century. jesus.

  38. css-weaver.com » 40+ Desain Tampilan Komentar untuk Web Design Inspiration » css-weaver.com 2012 May 05

    [...] 16. Mr Henry [...]

  39. Zcvvjoyq 2012 May 05

    How much will it cost to send this letter to ? http://orysufeaip.de.tl elite nymphets gallery Went on myspace…met a chick like this. I HAVE BEEN CUMING EVER SINCE! Her husband has not idea we meet every Friday

Leave a Reply