May 02

Coding a layout in HTML5 and CSS3

Posted by Benedikte Vanderweeën on 02/05/2010 at 03:41 PM   (3) Comments -

Since several months, i’m reading - in between client work - about the HTML 5 and CSS 3 specifications. Many blog writers encourage web designers to implement - already - some of the new HTML 5 and CSS 3 features in their websites (progressive enhancement).

I'm trying out here a very simple example layout/mockup that I will code in HTML 5 and CSS 3 to have a snippet (code) that i can implement later on in my design code. I'm not implementing new HTML 5 elements like video, canvas, etc... I will only cover the layout and structure of a HTML 5 document. Here we go:

A simple design

A simple design

I chose to make a really simple layout so I can use the basic setup of the page for other projects too.

Making a HTML structure

structuring the layout

Before we can start writing html code, the lay-out is structured in :

  • header > h1 for the introduction heading
  • aside for the illustration background
  • section > article > header > h2 for the title of the article
  • section > article > p for the content of the article
  • footer

Writing the html and css

The document structure with html5 elements
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>An example html5 document</title>
  6. </head>
  7. <body>
  8. <header>
  9. <h1>Title</h1>
  10. </header>
  11. <aside>
  12. <p>illustration</p>
  13. </aside>
  14. <section>
  15. <article>
  16. <header>
  17. <h2>Title</h2>
  18. <p>content</p>
  19. </header>
  20. <p>content</p>
  21. </article>
  22. </section>
  23. <footer>
  24. <p>content</p>
  25. </footer>
  26. </body>
  27. </html>
css for global html

/*Layout*/

html {
	margin: 0;
	padding: 0;
	background: #eee9df url(../images/tile1.png) center top repeat;
}

css for body and specific html5 elements

body {
	width: 940px;
	margin: 0 auto;
	font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}

/*HTML 5 specific*/
header,section,article,aside,footer{
	display: block;
}
css for header

h1 {
	font: 32pt Helvetica,"Helvetica neue", Arial, sans-serif;
	background: url(../images/header-bg.png) center top no-repeat;
	text-align: center;
	text-transform: uppercase;
	color: #e5b7ad;
	padding-top: 30px ;
	text-shadow: 1px 1px 2px #fff; 
}
css for aside
aside{
	float: left;
	width: 470px;
	min-height: 480px;
	background: url(../images/aside-bg.png) center top no-repeat;
	margin: 0 0 20px 0;
}
css for section and article

section{
	float: right;
	width: 428px;
	padding-left: 20px;
	margin: 0 0 20px 0px;
	border-left: 2px dotted #b2a497;

}

section h2 {
	font: 14pt Helvetica,"Helvetica neue", Arial, sans-serif;
	font-weight: lighter;
	text-transform: uppercase;
	color: #493831;
	padding-bottom: 10px;
	margin: 0;
}
css for footer

footer{
	clear:both !important;
	width:940px;
	height: 100px;
	padding: 10px;
	color:#200f08 ;
	background:#ddd3bf;
	
	/*Opacity*/
	filter:alpha(opacity=50); /* msie */  
	-moz-opacity: 0.50; /* firefox 1.0 */  
	-khtml-opacity: 0.50; /* webkit */  
	opacity: 0.50; /* css 3 */

	/*Gradient*/
	background-image: -moz-linear-gradient(top, #ddd3bf, #bcae91); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ddd3bf),color-stop(1, #bcae91)); /* Saf4+, Chrome *
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91')"; /* IE8 */

	/*Round corners*/
	-moz-border-radius: 12px; /* FF1+ */
	-webkit-border-radius: 12px; /* Saf3+, Chrome */
	border-radius: 12px; /* Opera 10.5, IE 9 */
}

Implementing javascript

For all HTML5 elements to work in Internet Explorer, we use a javascript that will render the HTML5 elements This javascript was done by Remy Sharp. You can link to it directly from Google code. Visit his website: HTML 5 enabling script

Put this piece of code in the head of your document to link the javascript:


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Browser testing

This webpage was successfully tested in:

Mozilla Firefox for Mac 3.6.3

Mozilla Firefox for Mac 3.6.3

Safari for Mac 4.0.5

Safari for Mac 4.0.5

Google Chrome for Mac 5.0.342.9

Google Chrome for Mac 5.0.342.9

Further reading and resources:

HTML5
CSS3
Browser support

Download the template

Download the ZIP files

View Demo

Readers Comments

1. Gregory Van Looy

on 02 May, 2010
at 05:07 PM

avatar Bene

nice article, I gave it a first quick scan and I especially love the extra links at the end with the additional info/read-up.

So that’s what the dribbble teasers were for wink

grtz
G.


2. Benedikte Vanderweeën

on 02 May, 2010
at 08:53 PM

avatar Bene

Thanks Gregory, happy you like it, there is a lot to read in those extra links smile Yes indeed, the Dribbble shots were the start of this article…


3. Luke Dorny

on 20 May, 2010
at 05:14 AM

avatar Bene

I’m floored!
Great site and great writeup about this. Seriously. Keep it up!


Leave a comment

Commenting is not available in this weblog entry.