If you want your static website to be converted to HTML5 , easy tips by Guy McDowell
Here are some tips to trim the fat, in no particular order.
1. Use Tables Sparingly
Tables are a catch-22. In the beginning, they were used to lay out design as well as put content into table format. As the design layouts got more complex, the tables got bigger and nested deeper, and that always means a slow down on load time.
Cascading Style Sheets (CSS) came along and really helped the problem of using tables for layout. Unfortunately, the browser makers couldn’t seem to wrap their heads around the idea of standards – and still can’t. What looked great in CSS in Firefox looked like a dog’s breakfast in IE and possibly didn’t even render in Safari. Don’t get me started on IE5 on a Mac. I’m still in therapy over that.
Please only use tables to layout content that must be in a tabular format – like a price list or hockey stats. That reduces the number of tables, and depth of nesting, which means speedier load times. Learning CSS will make a big difference, if you must have a fancy layout.
2. Use HTML to Create Colour
Yep, I’m Canadian, so it is colour with a ‘u’ to me. I know HTML is America-centric so the attribute is ‘color’. Learn your hexidecimal color codes and use them to to liven up content instead of images.
Try adding the color attribute to your HTML elements to spice it up. This works especially well in tables, or the body tag, like such:
If you were a browser, would you be faster at loading a simple 7 characters of #FF00FF or a 10×10 pixel image of the colour fuschia a few thousand times? That’s a rhetorical question, you in the back row. Put your hand down.
3. Link To Scripts/Style Sheets
How to Call an External Cascading Style Sheet:
It’s that simple. The attribute href is where you set the location of your style sheet. The rest of the attributes tell the browser what that file is, so it knows what to do with it.
Some developers may use the @import method to call a stylesheet. In Internet Explorer, this is like having your tag at the bottom of your file, causing it to load the whole page and THEN render the styles on it. Not good.
4. Combine Your Commonly Used Scripts in One File
Many web developers will use the same scripts over and over again. Perhaps there’s a clock script and a calendar script and maybe some sort of special effect script that they’ll use on every page. Instead of having 3 separate files, with 3 separate HTTP calls, put the scripts in one file and call it once. That cuts your HTTP calls by 66% and it gets cached as well. You speed demon, you! Before you raise your hand again, yes, you can do the same thing with CSS files.
5. Do Not Use HTML to Change the Size of Your Images
If you want to use an image that is 1000×1000 pixels on your web page, but you want it to be only 250×250 pixels, change it in an image editor. Some people will ’shrink’ the image using HTML like such:
If that 1000×1000 pixel image is 2 MB in file size, resizing it with HTML doesn’t make the file size any smaller! In fact it may take longer to load, because now the browser has to put 10 pounds of poop in a 2 pound bag, so to speak. Not an easy task.