Last month I did a talk at the Campus Party, one of the biggest technology events of the world, talking about Fireworks, HTML5 and CSS3. It was very nice, the receptivity of the audience was sensational, and thinking that many of you would also like to see the contents of the workshop, so decided to write a full case study and share here on the blog.

Many people ask me about the real possibilities to start using HTML5 and CSS3 today, and I'm sure we must explore the best that the web provides us with the goal of always improving the user experience. Maybe we can not reach 100% of the users, because there are still some browsers that do not support most of these new features (we know what browser I'm talking about, right?). But I believe that working to enable the legitimacy of content and navigation to 100% of users, why not make it even easier and more enjoyable browsing for many users who use browsers that allow this?

My main bibliography for this case study were two books: Html5 for Web Designers and CSS3 for Web Designers. Definetly worth the read!

Tutorial: Case Study with Html5 + CSS3

Preview Template - Download

*This template will be best viewed at Webkit browsers, like Safari and Chrome.

Layout

To start our case study, I created a simple layout, but where it could apply different concepts of CSS3 and still assemble a structure using HTML5, using the major changes that have occurred on its semantic. The layout that we will build is below:

Tutorial: Case Study with Html5 + CSS3

From this layout we divide it into a base structure with the main areas that will make our HTML.

Tutorial: Case Study with Html5 + CSS3

HTML5

Having all the basic layout complete, the structure in the head and the images had already been exported, we will begin to assemble our HTML. Here we can notice some differences, even simplifications in relation to XHTML 1.0. See how easy it was to decorate the raw Html, or tell me that you knew by heart everything that should contain inside DOCTYPE for example?

We have one more thing to get attention here, this script. Actually this makes that our new elements are rendered in browsers that do not yet support HTML5.

	
<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8" />
  <title>Ferris Buller on Abduzeedo</title>
  <link rel="stylesheet" href="style.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
</body>
</html>

Since the basis of Html got ready we start to insert our element. Starting at the header, the news here are quite clear, as the elements < header > and < section >. Not to be a long post I will not go into merits of all the new tags and serving each one, but there are very good documentation on the Internet, including the two books that I refered at the beginning of the post.

Tutorial: Case Study with Html5 + CSS3

<header id="main-header">		
  <section id="block-twitter">			
    <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p>		
  </section>		
  <section id="block-title">			
    <h1>Ferris Bueller</h1>
  </section>
</header>

With the header done, we should go to the content. In the left column we have a very important element to talk about here, are the forms. It has pretty cool thing about them in HTML5, using the attributes "placeholder", "type" and "autofocus". Play around with them and if you want to read a little more in this great article at 24ways.org.

Tutorial: Case Study with Html5 + CSS3

<div id="main-content">
  <section id="content">
<section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section>
<section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section>

In the right column, we have the portfolio. Here are the new items < figure > and < video >. The videos and audios are now easily inserted on html without the need to make a Flash embed for an example. Each browser has (or will have) its own player, and with a single line of code we have running our video! Of course, for browsers that do not support yet, well, just insert the embed flash and it's ready, all users affected!

Tutorial: Case Study with Html5 + CSS3


<section id="portfolio">
  <figure>
    <a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a>
    <a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a>
    <a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a>
    <a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a>
    <a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a>
    <a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a>
  </figure>
  <video controls width="380" height="210" poster="images/placeholder.jpg">
    <source src="video/video-1.mp4" type="video/mp4">
    <object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4">
      <param name="movie" value="player.swf?file=video/video-1.mp4">
    </object>
  </video>
</section>
</div>

And finally the new tag < footer >. Without much news here!

Tutorial: Case Study with Html5 + CSS3

<footer>
  <p>Design by Fabiano Meneghetti<br/>
  2011 - Oficina Campus Party</p>
</footer>

Aqui da pra ver o que temos ate agora.

CSS3

With the html ready we shall start our CSS. In this picture I show the key features of CSS3 that we will test here.

Tutorial: Case Study with Html5 + CSS3

To start our CSS I always like to use a reset.css, download the template and you can analyze it a little better. Moreover we need to include our new HTML5 elements as display:block, so we reach all browsers, even those that do not support html5.

	@import url("reset.css");

	/* New HTML5 elements */

	article, aside, figure, footer, header, hgroup, nav, section { 
		display:block; 
	}

	/* -------- */

Well, now it's time to put the hand in the CSS, here are only the main elements that form the basis for our site.

	body {
		margin: 0;
		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
		font-size: 13px;
		line-height: 20px;
		color: #5F5E59;
		background: url(images/bg_body.jpg) left top repeat;
	}
	a:link, a:active, a:visited {
		color: #305F9B;
		text-decoration: none;
	}
	a:hover {
		color: #000;
		text-decoration: underline;
	}

	/* ID's */

	header {
		background: url(images/bg_header.jpg) left top repeat-x;
		margin-bottom: 25px;
	}
	#block-twitter {
		width: 700px;
		height: 60px;
		position: relative;
		margin: 0 auto;
		padding: 20px 200px 0 0;
	}
	#block-title {
		width: 900px;
		height: 80px;
		position: relative;
		margin: 0 auto;
		padding-top: 25px;
	}
	#main-content {
		width: 900px;
		position: relative;
		margin: 0 auto;
	}
	footer {
		width: 900px;
		position: relative;
		margin: 0 auto;
		clear: both;
		padding: 30px 0;
		background: url(images/img_star.png) left top repeat-x;
	}

	/* -------- */

The news on the CSS start here. Note that in the texts that we already use elements such as column-count and column-gap, for texts in multiple columns. Notice also the use of prefixes and -webkit and -moz, you can view this article a list of prefixes for all major browsers http://peter.sh/.

	/* Header */
	#block-twitter p.tweet-text {
		color: #FFF;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-style: italic;
		font-size: 14px;
		text-shadow: 0 -1px 0 #000;
	}

	#block-twitter span.tweet-time {
		color: #E3BACA;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-style: italic;
		font-size: 12px;
		text-shadow: 0 -1px 0 #000;
		padding-left: 6px;
	}

	header h1 {
		width: 454px;
		height: 53px;
		background: url(images/img_ferris.png) left top no-repeat;
		text-indent: -9000px;
		margin: 0 auto;
	}

	/* -------- */

	/* Text */

	section#content {
		width: 400px;
		float: left;
		text-shadow: 0 1px 0 #FFF;
		padding-bottom: 40px;
	}
	section#content h3 {
		margin-bottom: 15px;
		color: #949691;
		font-size: 18px;
		font-weight: bold;
	}
	section#content p {
		 margin-bottom: 15px;
	}
	section#content section.two-col {
		-moz-column-count: 2;
		-moz-column-gap: 40px;
		-webkit-column-count: 2;
		-webkit-column-gap: 40px;
		column-count: 2;
		column-gap: 40px;
		padding-bottom: 20px;
	}
	section#content section.two-col p {
		font-size: 20px;
		line-height: 28px;
	}
	ul#social-icons {
		border-top: 2px dashed #AAA19F;
		width: 180px;
		height: 55px;
		padding-top: 20px;
	}
	ul#social-icons li,
	ul#social-icons li a {
		width: 60px;
		height: 55px;
		float: left;
		display: block;
		text-indent: -9000px;
	}
	ul#social-icons li a:link,
	ul#social-icons li a:active,
	ul#social-icons li a:visited{
		-webkit-transition: background 0.3s ease-out;
	}
	#social-icons li.bt-twitter a {
		background: url(images/social_icons.png) 2px top no-repeat;
	}
	#social-icons li.bt-twitter a:hover {
		background: url(images/social_icons.png) 2px -56px no-repeat;
	}
	#social-icons li.bt-facebook a {
		background: url(images/social_icons.png) -59px top no-repeat;
	}
	#social-icons li.bt-facebook a:hover {
		background: url(images/social_icons.png) -59px -58px no-repeat;
	}
	#social-icons li.bt-linkedin a {
		background: url(images/social_icons.png) -121px top no-repeat;
	}
	#social-icons li.bt-linkedin a:hover {
		background: url(images/social_icons.png) -121px -57px no-repeat;
	}

	/* -------- */

Here we begin working on our form. Note that here we use functions like box-shadow and transition, Transition I believe it is one of the main novelties of CSS3, using with care and in some places we can enrich the user experience too. It's the kind of feature that does not affect users who do not support CSS3, and using it properly can keep the loyalty of content reaching 100% of users correctly.

	/* Form */

	aside#form input.textfield,
	aside#form textarea {
		width: 380px;
		padding-left: 8px;
		margin-bottom: 10px;
		border: 1px solid #CCC;
		padding: 10px;
		color: #6C595F;
		-webkit-box-shadow:inset 1px 1px 2px #999;
		-moz-box-shadow:inset 1px 1px 2px #999;
		-khtml-box-shadow:inset 1px 1px 2px #999;
		box-shadow:inset 1px 1px 2px #999;
		-webkit-transition: border 0.4s ease-out;
		-webkit-transition:-webkit-transform .2s ease-in;
	}
	aside#form textarea {
		height: 100px;
	}
	aside#form input.textfield:hover,
	aside#form textarea:hover {
		border: 1px solid #999;
		-webkit-transform:scale(1.1);
		-moz-transform:scale(1.1);
	}
	aside#form input.textfield:focus,
	aside#form textarea:focus {
		outline: none;
		border: 1px solid #6C595F;
		-webkit-transform:scale(1.1);
		-moz-transform:scale(1.1);

	}
	#form form input.submit {
		background: #6C595F;
		font-size: 13px;
		font-weight: bold;
		color: #FFF;
		padding: 5px 10px;	
		border: none;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		-khtml-border-radius:4px;
		border-radius:4px;
		float: right;
		-webkit-transition: background 0.4s ease-out;
		cursor: pointer;
	}
	#form form input.submit:hover {
		background: #333;
	}

	/* -------- */

In the portfolio we have a very nice effect, using the "transform" with CSS3. Its hard anyone believe that this was done without JS or even Flash. Another news is the "nth-child", with it we have control over all elements of a repeat, as the thumbs of the portfolio, removing only the margin-right of the right elements. To learn more give a read on this article css-tricks.com.

	/* Portfolio */

	section#portfolio {
		width: 410px;
		float: right;
		padding-bottom: 40px;
	}
	#portfolio figure a.link-thumbs {
		width: 190px;
		height: 156px;
		display: block;
		float: left;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;	
		-khtml-border-radius: 8px;
		border-radius: 8px;
		-webkit-box-shadow: 1px 1px 2px #999;
		-box-box-shadow: 1px 1px 2px #999;
		-khtml-box-shadow: 1px 1px 2px #999;
		box-shadow: 1px 1px 2px #999;
		margin: 0 20px 20px 0;
		opacity: .6;
		-webkit-transition: opacity 0.4s ease-out;
		-webkit-transition: -webkit-transform 0.4s ease-out;
	}
	#portfolio figure a.link-thumbs:hover {
		opacity: 1;
		-webkit-transform:rotate(-15deg);
	}
	#portfolio figure a.link-thumbs:nth-child(2n) {
		margin-right: 0;
	}
	#portfolio video {
		background: #C9CEC8;
		padding: 10px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;	
		-khtml-border-radius: 8px;
		border-radius: 8px;
		-webkit-box-shadow: 1px 1px 2px #999;
		-box-box-shadow: 1px 1px 2px #999;
		-khtml-box-shadow: 1px 1px 2px #999;
		box-shadow: 1px 1px 2px #999;
		clear: both;
	}

	/* -------- */

And finally our footer, no big news;)

	/* Footer */

	footer p {
		font-size: 11px;
		line-height: 18px;
		background: url(images/logo_abduzeedo.png) right center no-repeat;
		text-shadow: 0 1px 0 #FFF;
	}

	/* -------- */

Preview Template - Download

In general I can say that we have to start using HTML5 and CSS3 today, it is possible. There is much documentation showing tips and tricks for always reach every single user on the main principle of a website: content and navigation. Allowing access to this to 100% of users, then just work to improve the experience for those who use modern browsers!

About the author of this post

I'm an architect and designer from Porto Alegre, Brazil. I've been working with design since he got my degree in architecture, a bit odd isnt it? I'm a fan of Fireworks, CSS among other skills. Besides that I'm co-founder of ZEE.