|
Creating a baseline HTML 5 document |
||||||||
Browser standards and cutting edge web design are not great bedfellows. I've heard the arguments from creative designers that you have to write specific browser CSS styles to accommodate the multitude of browsers and their own unique way of rendering CSS.
I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters.
Firstly I'd like to point out that the demo included here has no actual styling attached to it. I am aiming to creating a baseline template that anyone can drop into a directory to kick off a new project. I'm not too bothered about the look and feel at the moment.
Goal 1 - The same output in all supported browsers
To clarify 'supported browsers' I mean almost everything post Internet Explorer 6. I totally agree with the 'kill IE 6' campaign and unless someone makes a serious case as to why I should, I do not support it anymore. I've come around to thinking that it is ok now to point people towards upgrading their browser as they will have a poor experience using legacy browsers.
If you take a look at the Demo here: http://www.mccran.co.uk/examples/html5 in any of your browsers you should see exactly the same thing. It should be identical, I mean all of it. The margins, spacing and fonts etc are all the same.
The key to starting any project, is to have a clean slate. Try and keep your layout and styling separate, and as I have done here I really, really, recommend using a reset Style sheet. In this way all of the elements a browser does not recognise are handled like Div elements.
This is what I'm using as a reset CSS at the moment.
2b, blockquote, big, body,
3center, canvas, caption, cite, code, command,
4datalist, dd, del, details, dfn, dl, div, dt,
5em, embed,
6fieldset, figcaption, figure, font, footer, form,
7h1, h2, h3, h4, h5, h6, header, hgroup, html,
8i, iframe, img, ins,
9kbd, keygen,
10label, legend, li,
11meter,
12nav,
13object, ol, output,
14p, pre, progress,
15q,
16s, samp, section, small, span, source, strike, strong, sub, sup,
17table, tbody, tfoot, thead, th, tr, tdvideo, tt,
18u, ul,
19var {
20 background:transparent;
21 border:0 none;
22 font-size:100%;
23 margin:0;
24 padding:0;
25 border:0;
26 outline:0;
27 vertical-align:top;
28}
29
30ol,
31ul {
32 list-style:none;
33}
34blockquote,
35q {
36 quotes:none;
37}
38table,
39table td {
40 padding:0;
41 border:none;
42 border-collapse:collapse;
43}
Goal 2 - No optional technology
This is a simple principle really. Do not create elements of a site/application that rely on option technology, such as JavaScript. If it is possible for users to block or disable the technology that you are using then do not rely on it for a critical part of your site.
There must be a guaranteed baseline user experience for everyone. By using the Reset CSS file above rather than a JavaScript HTML 5 workaround you are ensuring this.
In this way all Browsers will work in the same way, without the need for user buy in to specific technology. This is the code version of my HTML 5 baseline template, you can see it rendered here ( demo of a HTML 5 template)
This template has been successfully validated using the W3C markup service as valid HTML 5: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mccran.co.uk%2Fexamples%2Fhtml5%2F
2<html lang="en-GB">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="reset.css" type="text/css" media="all">
6<title>HTML 5 template</title>
7</head>
8
9<body>
10
11<!-- header -->
12<header>
13
14 <!-- navigation -->
15 <nav>
16 <ul>
17 <li>nav item 1</li>
18 <li>nav item 2</li>
19 <li>nav item 3</li>
20 <li>nav item 4</li>
21 </ul>
22 </nav>
23 <!-- end nav -->
24
25</header>
26<!-- end of header -->
27
28<section id="content">
29 <h1>Header 1</h1>
30
31 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor dolor in erat venenatis quis vulputate mauris aliquet.
32 Aliquam nec urna porta odio accumsan convallis. Curabitur ut orci orci, eget posuere enim. Etiam est elit, pulvinar id
33 malesuada id, bibendum sed purus. Sed arcu magna,
34
35 <article>
36 <h2>Header 2</h2>
37 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor dolor in erat venenatis quis vulputate mauris aliquet.
38 Aliquam nec urna porta odio accumsan convallis. Curabitur ut orci orci, eget posuere enim. Etiam est elit, pulvinar
39 id malesuada id, bibendum sed purus. Sed arcu magna,
40 </article>
41
42</section>
43
44<!-- bottom aside area -->
45<aside class="wrapper">
46
47</aside>
48
49<!-- footer -->
50<footer>
51
52</footer>
53<!-- end of footer -->
54
55
56<!-- GA tracking -->
57<script type="text/javascript">
58 var _gaq = _gaq || [];
59 _gaq.push(['_setAccount', 'UA-']);
60 _gaq.push(['_setDomainName', '']);
61 _gaq.push(['_trackPageview']);
62
63 (function() {
64 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
65 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
66 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
67 })();
68
69</script>
70
71</body>
72</html>
Yes, I suppose I could have used the boilerplate code, I've arrived at this example myself though, so I quite like using code I've evolved myself. I always feel like I know it more, and I understand what each element is actually doing.
I'm a very 'learn by doing' kind of person.
That's a good spot, I'll give it a try and make sure it still validates, I find it much more interesting evolving documents like this.
<noscript>
JavaScript is disabled.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js...;
<![endif]-->
in the footer.