Sometimes you just need to build a website from scratch. However, trying to get your HTML & CSS code to display correctly in the plethora of browsers in use today can be a nightmare. Throw in the netbooks, mobile devices and tablets with touchscreens, and you'll be up all night pushing bits and pixels around.
Oh yeah, there's also another version of Internet Explorer around the corner. It seems every new release of IE brings with it new problems to contend with.
Well, it turns out that it's not as difficult as it sounds to create your site's code framework so that it displays nicely across all devices and browsers old and new. Some smart guys have been hard at work creating code that will also likely continue to work in future browser versions.
What's All the Hubub About HTML5
By now you've been flooded with a myriad of opinions, advice and recommendations about the new HTML5 specification which, at the time of this post, is still under development. That doesn't seem to stop the browser developers, as they've already implemented some of the features of HTML5 into the current released versions of their browsers.
This post isn't about all the coolness that HTML5 brings to your toolbox. You probably already know a good deal about that. If not, there are plenty of articles covering that subject. What I do want to introduce you to is the following.
Best Practice Website Code For Today and Tommorrow
After over 2 years of iterative development, Paul Irish, Divya Manian and an army of contributors have come up with HTML5 Boilerplate which, in their words is "the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site".
Major Benefits of Using HTML5 Boilerplate
- Cross-browser compatible (IE6, yeah they got that)
- HTML5 ready
- Optimal caching and compression rules
- Mobile browser optimizations
- Progressive enhancement graceful degradation
- An optimal print stylesheet
- iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
- Fully commented, so you know what's happening
- Way, way more!
The HTML5 Boilerplate Components
These are the pieces you get to help you start building that future-proof website.
- index.html - Get the right DOCTYPE, the right load order, layout and more
- style.css - Contains a reset, font-normalization and base style
- plugins.js - Code optimization and "safe" console.log
- script.js - A placeholder for your concatenated and minified code
- robots.txt - Don't let the robots run wild on your site
- crossdmain.xml - Can remote Flash access your site? Two settings provided: most and least restrictive settings
- .htaccess - Optimize your Apache Web Server!
- web.config - Fast and secure web pages on your IIS web server
- More tools and goodies!
Head on over now and take a look at the full documents and download either the commented or uncommented versions of the files.
Using these best-practice code templates will ensure you start your new web design on the right foot and minimize the coding hassles so you can focus on the content, design, workflow, usability and more.
Please be sure to subscribe to our feed (above) or follow WebMasteryMadeSimple on Facebook to get more tips on designing, building, hosting, running and promoting an effective website.