DivitoDesign » HTML

HTML 5: Structuring

Stefan Vervoort — Wed, 10 Nov 2010 20:40:14 +0000

The web has been constantly involving since its invention back in 1969. Webdesigners keep pushing the limits of web pages and their languages to get more functionality in to their web sites.

For years we have been working with HTML 4 and XHTML 1.0 to build our web pages, but these languages do not have the functionality the current generation of web professionals ask for. Now there is HTML 5, the upcoming web standard.

Background

The new version of HTML is under development since 2004 and is a collaboration between the W3C HTML WG and the WHATWG. They work closely together with representatives from the four major browsers creators Apple, Mozilla, Opera and Microsoft.

On top of these close collaborations everyone can get their input in. There are mailing lists and forums to keep updated and get your own ideas into the process of developing the new web standard.

Doctype

The idea of HTML 5 is to make things work smarter, faster and more organized on the web. I’ve told you about Doctypes before and they were version specific with earlier versions of HTML. However with HTML5, things have been made easy.

Add this line above the ‹html> tag and you are ready to write HTML 5 in your webpage.

Document Structuring

Every web designer uses a different way to structure their HTML codes. Usually it comes down to a few sections to develop the framework of the web pages.

Header section (#header)
Navigation section (#nav)
Content area (#content)
Footer section (#footer)

These different areas on the site are called for by for example ‹div id=”header”>. With HTML 5 these sections can be added in a more structured way. The new structure of the webpage can be build like this. Explanation follows below.

Document Header
Navigation

   Title
   
      Section #1
    
   
      Section #2
    

Sidebar
Footer

The HTML5 structure put in work.

Headers

The new ‹header> tag can be used to specify the top section of an section of your website. For example, your webpage has a header section and you can use the ‹header> tag there to define that. But there are more uses for this tag. It can also be used as header of a specific section like the main content:


The article’s title
Paragraph #1
Paragraph #2

Navigation

Many websites have a section on their website to display some general navigation links for users to browse to the website. In HTML5 you can do that via the new ‹nav> tag. For general usage here is an example:



	Homepage
	About
	Contact

When using a navigation structure like Previous and Next (for example with blog posts), you can use the ‹nav> tag as well.


Previous Post
Next Post

Article & Sections

The ‹article> is to define the main content section, just like ‹div id=”content”> does in HTML4. Inside, place your article, your blog post: the main information you want to show your visitors, but also the search engines.

Different sections in your content are structured by the ‹section> tag. Like this:


The article’s title


	Section’s Title
	Paragraph #1



	Section’s Title #2
	Paragraph #2

Aside

We can also call this sidebars. Sidebars are there to add additional information to support the main content. It’s pretty easy to use:


	Archives
	
		2010
		2009
	

	Resources
	
		HTML 5
		Semantics in HTML5

Footer

The footer element is suited for the copyright notices applying to the content the website has published. It’s very easy to use.

© Copyrighted by DivitoDesign. All rights reserved.

Please get your thoughts in about structuring Web pages in this manner using HTML5.

Case Study: Revamping an Existing Site

Stefan Vervoort — Tue, 27 Apr 2010 21:39:00 +0000

Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with a guest post about a case study on revamping his outdated site. Enjoy reading about his revamping project.

Below is a case-study on how I used the Blueprint CSS Framework and jQuery JavaScript library to rebuild an outdated site – somehow you helped me with it, so in return I share my work, hoping it can be of future use. Thank you!

The website we are talking about was build back in 2001. As you would understand we are talking about a heavily-aged website that had the following ‘problems’ or difficulties:

using some CSS, but mainly tables
the menu is a separate JS file: easy to maintain, but it doesn’t look too good
a few years ago I added the rounded corners (using JavaScript) and the red backdrop/border, but that doesn’t look too flashy either
the source is not W3C compliant (outdated code like
– instead of the current
)
the footer is embedded in each page (hard to update for about 100 pages)
in general, look & feel is not ‘up to date’
the enquiry form uses a JavaScript file that is no longer supported
in Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table – probably easy to fix, but never got to it):

For a website in the modern internet world, that is not acceptable. For this reason, I compiled a list of features I would like to have on the modern, good looking website.

Site Features we Need

W3C compliant code
CSS and HTML in separated files
browser compatibility
rounded corners & drop shadow
1 central menu file
JavaScript support (instead of using several separate scripts that (might) interfere)
structured design (layout without tables)

Where to Start?

Last year I read this very useful article about building HTML/CSS sites using a template. This template has a grid CSS layout and the jQuery framework build in. I had seen those before, but was not yet using them in combination with WordPress.

I also found this site for dropshadow & rounded corners. As I wanted to avoid too many jQuery plugins, I didn’t use jQuery for the round corners. So far my experience is that jQuery rounded corners can interfere with other plugins, needing too much work to fix (and warrant) it.

For this reason, the no-Java-script solution seemed preferable. Provided, it had worked – it did not – as it uses several , it messed up the Blueprint classes, it didn’t display properly ‘underneath’ the header images etc. The typical pain when it comes to CSS and different techniques in different browsers.

So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners? Dilemma there….. Until playing around with Blueprint a bit more…. as it comes with grid.png, to display the columns for design purposes, which you can switch off when you go live. But then, if you can remove that backdrop, why not adding your own???? Using my own image I had created for the initial technique, but thought useless now, it worked flawlessly!

Here is what I did – in the Blueprint folder, there is a screen.css – just add one line and comment the grid-line – that’s all!

In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you want to display the Blueprint-columns):

The grid.png is repeated both horizontally & vertically, but my one large image is not, so it fits perfectly – I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-paper with a unique texture – using only a small slice/strip and repeating that would make it look unnatural. And I use a footer-image – including it in php, it neatly fits underneath the length of the actual content – not the full background image of 1600px – it ‘stretches’ to the maximum height, but resizes to the needed height.

I wanted to use this menu for this website. One problem though: it has no single menu file (eg. menu.php) you can add to your website. After building that menu.php file myself, the jQuery menu worked perfectly.

When I created the header.php and footer.php files and included in the website using PHP, they are easily updated in those 100 different pages. Depending on the page of the website, I can now include different images via one page. Pretty efficient.

The Template

With all this now in place, this is how the code looks like (this is what I will use as the ‘page-template’ (there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an individual page is placed within the (both -classes, in blue) – everything remains in place, no fluid/stretched text (in different browsers).






 
"container" class="container showgrid">
"header" class="span-24 prepend-top">
"prepend-1 span-22 append-1">


"CONTENT" class="prepend-1 span-22 append-1 prepend-top">
"span-17">
Main content
Put your main text here (17 columns wide).


"span-5 last">
Sidebar
Some sidebar on the right (5 columns wide).




"footer" class="span-24">

Blueprint-grid enabled:

And this is how it looks like (pictures not optimized yet):

I need to finalize the CSS and do some tweaks here and there, but the very flexible yet sturdy framework is there. You can visit the live version of the website right here to check how it works.

Thank you – I hope this is of help to you – let me know if you have any questions or feedback by adding a comment.

HTML/CSS Template Version 1.0 – Build Sites Faster & Better

Stefan Vervoort — Sun, 03 Jan 2010 02:37:22 +0000

Currently, I am up to my ears in the PSD to HTML/CSS conversion work. The client supplies a design that needs to be converted to a valid and cross browser friendly website.

The HTML/CSS template that I have been using has been a success for me; my conversion time is faster than before and the code quality is higher. I’ve released the resource on DivitoDesign for free as well, but that version was a little bit outdated.

All the new and better coding practices I have been experimenting with to create a HTML/CSS template that works properly for any kind of website, have been build in. Time to release the updated version to the crowd.

You can find all the information and explanation regarding the HTML/CSS template by clicking here. To give you a summery:

Copy the map and use that as your root-folder of your website.
The CSS, Images and JavaScript folder are already there,
Open the index and build your website.
Template uses Blueprint CSS, jQuery, IE7 JS.

Try customizing the template layout, CSS and images to your likings and save a couple backups. When you are used to this system, your HTML/CSS skills will increase and be a lot faster and better.

Version 1.0 has improvements in the following area’s:

Better CSS commenting
Added a Favicon
More basic CSS tags
Other footer structure

You can download version 1.0 of the HTML/CSS Template by DivitoDesign for free by clicking on the following link.

HTML/CSS Template by DivitoDesign.

Building HTML/CSS Sites: Use a Template

Stefan Vervoort — Fri, 27 Feb 2009 13:04:51 +0000

If you are developing HTML/CSS websites with occasionally a little bit of JavaScript (just like myself), it can be very un-productive to write your basic codes over and over again.

For example, if you want to include a JS file for your dropdowns, a CSS framework file and print CSS files every time you start working on a new project, you better read this article for some time-solving solutions.

Create a Template for Starting From Scratch

We are going to make a Template Folder we use every time on a new project. This includes a basic index page, the JS files, the CSS files and our basic images. In my projects, I use these files almost every time:

JavaScript (folder /js/)

pngFix.js (to have transparant PNG files in IE6)
custom.js (with a search form fix + the suckerfish JS to make dropdowns work)
jQuery.js (to have a good JS library to start with)

CSS (folder /css/)

Blueprint CSS Framework
- screen.css
- print.css
- ie.css
custom.css (for all my custom styles)

Images (folder /images/)

RSS icon

I suggest you take a look at some of these links I provided in the list and check out what you need yourself in a regular project. If you need other JavaScript fixes or basic CSS code, be sure to use them instead and add them in the same way I will describe below.

Let’s build our Template’s Index page

I hope you have placed all the files you need in an appropriated folder. For example, I have placed my images in /images/, my CSS files in /css/ and my JavaScript files in /js/. This will make things look pretty structured.

Alright, Let’s start with a standard HTML page:

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />
</span>Untitled Document<span class="html-other-element">

Description + Keywords + Robots

Any site needs a proper description and maybe some keywords. They won’t do much to your SEO rankings, but they will help you displaying your search engine results in a proper way. It could also be a good idea to add a meta tag for robots, so your search engine knows they can index your site.

Here is what I have added to my standard META tags. You should add all the following codes + inclusions between the tags in your HTML page.

"description" content="" />
    "keywords" content="" />
    "robots" content="index,follow" />

CSS Framework

We have to add our CSS Framework first. Depending on the way your framework needs inclusion, here is the Blueprint way:


    "stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    "stylesheet" href="css/print.css" type="text/css" media="print" />

Custom Styles

Next, I think it’s important to have a custom stylesheet at hand, so let’s add our custom.css stylesheet.

1
2
3


    "stylesheet" type="text/css" media="all" href="css/custom.css" />

JavaScript files

Now we have added style to our template, let’s add some JavaScript. I suggest you include jQuery first, because if you include jQuery plugins before the original library, they won’t work. So, here’s how I include my JavaScript files:

Everything we needed to include is done right now. We can now start adding some more code to our template’s Index file.

Structuring codes

Depending on your framework, you could add a basic structure between your tags. Most sites I developed have this structure:

Container
- Header
- Content
  - Content
  - Sidebar 1
  - Sidebar 2
- Footer

That’s why I have already created the structure so I can start right away.

"container" id="container">

    "span-24" id="header">

    "span-24" id="content">

       "">
       "">


    

    "span-24" id="footer">

As you can see, I haven’t given my DIV’s inside my Content DIV any ID and I even commented one of them. This is for the simple reason I don’t know what I will be adding to the content area yet. Every project is different, however, I usually choose two or three DIV’s inside the content.

Our Custom CSS Files

Next thing we will do is creating some basic CSS styles.

For example, it is important to structure your codes pretty well. When you need to work fast, you often work less structured and nice. With the use of a template, the structure is already there. You only need to fill it up.

Comments

I am not going to teach you how to write structured code as Woork has some great tutorials on them. You should always start with the basics details on your project. You can add more or less details in here, that’s up to you.

/*
Author:           Stefan Vervoort
Author URI:       http://www.divitomedia.com/
Version:	   0.9

Project:
Description:
*/

I think next, a table of contents is appropriated:

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- RESETS
	-- BASICS
	-- CUSTOM
---------------------------------------------------------------------------------------
*/

You should add a heading above each section of your stylesheet. For example, when styling basic stylesheet attributes, you can do it like this:

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
body { }
a { }
a:visited{ }
...

And, next, you add this section to your table of contents. I suggest you only place only your larger sections in your table of contents. This is just a basic lesson in structuring your CSS file.

CSS Resets

First, I have added a Reset. My personal favorite is the Eric Meijers’ Reset Reloaded.

/*---------------------------------------------------------------------------------------
--- RESETS
---------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
	p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	:focus {
		outline: 0;
	}

	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

The basics

The next thing I have added are a couple basic styles, without adding to much behavior. I have added default font sizes, some classes I always use (like .left, .right, .clear, .padding) and some image styles. Be sure to include your own preference in there too.

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
html{		font-size:100%;	min-height:101%;}
body{		font-size:62.5%; color:#666;}

a{		}
a:hover{	}
a:active{	}
a:visited{	}

.left{		float:left; }
.right{	float:right; }
.clear{	clear:both; }

img.left{	margin:0 1em 1em 0; }
img.right{	margin:0 0 1em 1em; }

.padding{	padding:10px; }
#content p{	margin:1.1em 0; }

Dropdown Menu

Because I tend to use a dropdown menu in all my latest projects, I have all the styles added to my stylesheet to make the dropdown menu work proper, just without color styles. This makes it easy for me to style these menu’s easily.

If you want to use the suckerfish dropdown menu and want to add some basic behavior to your stylesheet, here are my codes. I always place my navigation menu inside a DIV with ID navigation.

/* ------------------------------------------------------------------------------------
NAVIGATION MENU				 */
#navigation, #navigation ul {		padding:0;	margin:0; list-style:none; line-height:1; float:left;	}
#navigation a {			display:block; padding:6px 10px; text-decoration:none;	}
#navigation a:hover{			text-decoration:underline; padding:6px 10px; }
#navigation li { 			float:left; width:auto;	}
#navigation li{			padding:0; margin:0; }
#navigation li ul li{			padding:1px 0px;}
#navigation li ul li a{		padding:6px 10px; width:110px; }
#navigation li ul { 			position:absolute; padding-top:1px; width:130px; left:-999em; }
#navigation li ul ul {			margin: -1.5em 0 0 130px;	}

#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {	left: -999em;	}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul,
#navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { left: auto;	}

Site Structure

It’s easy to gather all your structure DIV’s and put their ID’s under each other. This way you always know where to look when something isn’t right in your structure.

/* ------------------------------------------------------------------------------------
STRUCTURE					 */
#container{	overflow:hidden; border:solid #000; border-width:0 2px; font-size:1.5em; }
#header{}
#footer{	clear:both; }
#content{}
#right{}
#left{		}

Time for the custom code

My default styles I use in any project are in my stylesheet now. One thing I do next is adding this comment:

1
2
3

/* ------------------------------------------------------------------------------------
CUSTOM				 */

Which means, we are ready to start.

Template Done

We are ready to start developing with our new template system. Remember to always make a copy of your template before you start editing there. If you don’t do that you will loose your basic template, because you’ll save custom files over your original.

One tip I can give you is to email your template to your own email address. Once you, accidentally, lost your original template, you will be able to retrieve your original one! A backup is a live saver.

Download my Template

I can give you my template to use on your own projects and you will have everything all together. I hope you see the advantages of this way of starting on a project and I hope it’ll save you some time.

Download HTML-CSS-Template.

Any Tips?

If you spot any faults in the code, or if you think some code can be optimized, or if you have some tips to add to the template, don’t hesitate to leave a comment!

66 Links To Learn The Webdesign Basics

Stefan Vervoort — Mon, 25 Aug 2008 20:11:54 +0000

In the past, DivitoDesign has learned you how to start blogging and many people have learned from that. So I thought, why not give beginners some articles that help you to start with webdesign in general.I remember the time I started out and it wasn’t easy, simply because I didn’t know where to begin. It’s time to change that. Here are some of the best articles and sites from around the internet that will learn you all the basics you need.

General

Programs

Adobe Photoshop CS3 (Design)
GIMP (Design)
Adobe DreamWeaver (HTML/CSS/PHP editing)
NVU (HTML/CSS editing)

HTML

CSS

Design

Site Structure

Tutorial Sites

Colors

Resources

Stock Images

Search Engines

Inspiration

Fonts / Typography

Usability and Accessibility

Blogging

Suggestions?

If you think a beginner would benefit from an article you have wrote or which you have found, feel free to leave a comment with the link, or send me an email!

For more articles on webdesign, blogging, CSS or Seach engine optimizing, consider subscribing to the RSS feed.

HTML – ABBR Property to Explain Abbreviations

Stefan Vervoort — Sun, 01 Jun 2008 16:42:44 +0000

HTML has many properties. There are a couple of them we don’t use that often and we will discuss one today. It is called the ABBR property and is used to explain and mark-up abbreviations. We bloggers write for the web and we shouldn’t forget the text should be understandable for everyone.

You might have seen news sites and information websites use this property. In the text, an abbreviation is underlined with a little gray and dashed line. When your mouse rolls over that link-look-alike, you come to the conclusion it is something else. An explanation about the abbreviation shows up. You might have seen this property more than you think.

Ok. But what is the point of using ABBR in your website? These arguments should convince you:

1. Better for Accessibility – Using ABBR properties in your website will only optimize the accessibility of your website. Some visitors might don’t know terms like “SQL”, “AI” or “NASA”. Look at yourself, do you know them all? You should try as hard as possible to make your content as accessible as possible.

2. Educate your visitors – Many websites and blogs are here to teach people with their knowledge. Those have different subjects and different visitors. When they are reading an article, everything should be clear about the topic. When acronyms or abbreviations aren’t clear enough, the visitor might do not understand the whole article.

3. Multiple purposes – Not only are you educating your visitors, you will make it easier for spell checkers, translators and speech synthesizers to understand the meaning of an abbreviation and therefore the meaning of a sentence.

4. Search engine optimizing – Another advantage is the search engine (yes, they are everywhere!). When you are using an abbreviation instead of a couple keywords, the SE isn’t totally clear what you mean and therefore they couldn’t display the most accurate data to their users.

When you are using the ABBR function in HTML, it will explain the abbreviation to the search engine as well and you have yourself an extra keyword. Always great, right?

How to use ABBR?

ABBR is not hard to use. It only uses the “title” tag to explain the abbreviation. As always, CSS is around the corner to style your ABBR tag in a way you prefer.

"Structured Query Language">SQL

When you add ABBR to an other “SQL” abbreviation elsewhere in the page, around it is everything you need to do.

When ABBR, and when Acronym?

Some abbreviations like “URL” and “SQL” are pronounced letter by letter by some, and as a normal word by others. The ABBR property should be used in these cases. Other abbreviations are just normal ‘words’ like “NAVO” or “ASAP”. Those should be surrounded by the acronym property.

1
2
3

"Structured Query Language">SQL
"Naval Oceanographic Office">NAVO

Disadvantages?

Everything has its disadvantages. The use on a blog or website has a major problem. Internet Explorer will not play along as it simply doesn’t recognize the property.

But there is a solution for Internet Explorer. We can add something extra HTML to the original codes:

"Structured Query Language">"abbr" title="Structured Query Language">SQL

In Internet Explorer, ABBR isn’t recognized and therefore not styled. The extra span is there to get this done in another way. Below are the style declarations you should use if you want your visitors to think they are dealing with the original ABBR property:

abbr, acronym, .abbr {
  cursor: help;
  border-bottom: 1px dashed #ccc;
}

Conclusion

Internet Explorer is always bugging a webdesigner. All we can do is waiting until all IE users switch to a better browser. This is hard to achieve and in the meantime… We have to live with it.

I think the advantages of this property really are great, and the Internet Explorer problem is not that big. Thanks for your time.

Guide to HTML Emails

Stefan Vervoort — Fri, 16 May 2008 10:52:27 +0000

This guide will tell you exactly what HTML emails are, how to make them and how to design your HTML emails.

What are HTML emails?

HTML emails are emails send with mark-up. Most of the time, an email just contains letters and words to bring over a message to the recipient. It doesn’t need any fancy colors or tables. HTML emails can be used to make the user experience more entertaining and can be used to focus the visitors’ attention to the most important parts.

Why should you use HTML emails?

When you are in the blogging or publishing industry you might want to send a newsletter to inform your regular visitors of new articles, updates and/or news. Most of the time, to keep your subscribers entertained, a more professional look is required. Or you want to point visitors in the direction of a great headline. This all can be achieved by using HTML emails with CSS in a proper way.

Do HTML emails always look good?

To give your HTML email a proper look, we should watch out for a couple points. As you might know, HTML and CSS are rendered slightly different by different browsers. Email clients have this problem as well. All Web-based (Gmail, Hotmail) and standalone clients (Outlook, Thunderbird) will react different.

When you have designed a website, you have to check for browser-compability by simple checking your webpage in different browsers. What we are going to with HTML has the same principle. We will test the email in different clients.

Designing HTML emails

Designing emails has the same principles as designing websites. You should grab the users’ attention, without loosing accessibility and usability out of sight.

To make sure your email looks as good as possible in as many clients as possible, it is advised to use the simplest elements. Validating your email is a good step in the right position!

Simple elements

Some elements are used for a longer time, and usually an email client will have a better support for those elements. For example, Div‘s will not get supported by most clients, but tables are supported much better. The reason is simple; div‘s are relative new compared to tables.

"0">

Stylesheets

Because we are using CSS to style our HTML elements, we have to add style declarations. Strangely, his is not possible in the regular way. Extern stylesheets are ignored by most of the email clients. Extern stylesheets are stylesheets called for via a tag in the HTML, or via the @import attribute. We have to use inline CSS to style our elements.

Styles can be declared as