Lee Munroe » html

Are you an HTML5 web designer?

Lee — Tue, 29 Mar 2011 09:01:10 +0000

HTML5 is quite the buzzword at the minute. A lot of designers and front-end developers will now say “I use HTML5 and CSS3″ rather than just good olde “HTML and CSS” (I’m one of them, depending on the context).

At some point the HTML5 fad will die and we’ll go back to saying HTML (did you ever say you used HTML 4.01?) but until then we’ll throw the HTML5 buzz word around a bit more.

But what does it actually mean to say you use HTML5?

I see HTML5 being broken down into 5 different levels.

1. Doctype

Technically if you use an HTML5 doctype declaration, you’re using HTML5.

Along with your doctype you can tidy up the rest of your head like so.

...

This is simple stuff, and you usually have this saved in some sort of template.

2. Forms

The next level of HTML5 is adding some niceness to forms.

Validation, place holders, calendars, input types can all be declared with HTML5 and in most cases all that is needed is dropping in an extra attribute to your already existent XHTML forms.

3. Layout and elements

We get a bit more advanced now with layout. HTML5 has introduced several new block elements for marking up your layout including header, footer, article, aside, section, figure.


Heading goes here



Something in here


Something else in here



Something to accompany your article here


Copyright 2011

For these new block elements to work across all browsers, make sure you declare them as block level elements and use the HTML shiv script for IE compatibility.

Include this in your head:

And this in your stylesheet:

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

4. Video and audio

There’s a good chance most of you have looked at levels 1 to 3 as most projects require markup, layouts and forms but not all require video and audio.

No longer do you need to embed video and audio into Flash. They now have their own elements and controls you can customise in HTML5.

5. Advanced features and Javascript

I’ve called level 5 advanced features as we’re now diving into Javascript.

Most of the blog articles and books I’ve read on HTML5 cover the 4 levels above but brush over these advanced features, most likely because they deserve full books dedicated to the topic and are more developer than designer related.

These features include:

Canvas
Local/offline storage
Geolocation

How much HTML5 are you using?

To date I’ve only been using levels 1 to 3 myself. I’ve yet to have an excuse or reason to delve any further.

Are you using HTML5? Have you looked at any of the advanced HTML5 features mentioned above?

How To Setup A Reusable Framework For Your Next Website

Lee — Wed, 03 Mar 2010 10:01:05 +0000

You’ve done your research, sketched out the wireframes, designed a stunning mockup and now its time to markup. Where do you start?

Having your own reusable framework is a great way to save time and provide a basis for your next website.

Your own reusable framework is by no means perfect for every project that you work on but it is a great starting point and it can evolve over time.

This post looks at the current framework I have in place and breaks it down. Please feel free to reuse this as you see fit and also point out anything that you feel would be beneficial to add (or remove).

Framework structure

All files are kept in a folder simply named ‘NewSite‘ which contains the following:

ie.css
A stylesheet specific for IE6 (or sometimes 7) that at the end of a project will usually contain various CSS bug fixes and PNG transparency fixes.

images/ directory
For storing all images for the website.

index.html
The main template for the website. Depending on CMS or programming language I use this will be chopped up at some stage.

print.css
A stylesheet used when printing a document.

scripts/ directory
For placing all the project’s Javascript files.

script.js
A default script for placing most of the project’s Javascript code, stored in the scripts directory.

style.css
The main stylesheet.

Now lets look at what each file contains.

index.html

This is the main template for any website and the starting point for marking up.




	
	
	
	
	
	
	
	
	
	
	

	
	
	




Skip to content


	
	
		
		
		
		
	



	
	
	
	
	
	
	



Copyright ©

Notes about the markup used:

The doctype is HTML 5
There is a ‘skip to content‘ link for screen readers (the style sheet will hide this)
Uses a conditional statement to load ie.css for Internet Explorer browsers below version 7
JQuery library is included using Google’s CDN (but is commented out until it is needed)
The bare bones of the markup has been added

styles.css

Now lets look at the default stylesheet I’m using.

/*
Author: Lee Munroe
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
a:link, a:visited{text-decoration:none;outline:none;}
html {overflow: -moz-scrollbars-vertical;}
#skipto{position:absolute;left:-9999px;top:-9999px;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}

#logo{width:;height:;background:url(images/logo.gif) no-repeat;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}

/*
# Lists ################### 
*/



/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}

Notes for the stylesheet:

Author name at the top. I’ll also include the project name and date here. This is mainly for the records of anyone the site is handed over to.
Using comments to break down the stylesheet into sections making it easier to scan down and find styles. Larger projects may have a different structure.
A general reset for margins and padding. There are lots of more advanced resets out there but I find this basic one works well. Read about CSS reset here
.group:after – the group class is applied to any element that needs cleared right after. Usually where there are 2 or more floats side by side.

ie.css

.group {zoom: 1;}

Notes:

As it stands, only contains a fix for the .group class

print.css

#header, #footer{display:none;}

Notes:

Removes the header and the footer when printing. The final file will need tinkering with though.

script.js

/*
$(document).ready(function() {
	
});
*/

Notes:

The document ready function is for JQuery Javascript functions that you want to run when your page loads. This is commented out until needed.

Conclusion

Download framework as zip file

Please feel free to use these templates in your own projects.

Again, this is just a framework I’ve put together over time. I recommend you adapt it to suit your own environment.

What does your framework look like? Anything useful I’ve missed?

Book Review: HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

Lee — Mon, 28 Sep 2009 11:27:15 +0000

Every so often I will receive an email that asks the following:

How can I learn how to build websites?

There are two approaches you can take to learning how to build websites.

Learn how to build websites
Learn how to build websites the right way, aka the Web Standardistas’ way

I built my first website over 10 years ago but it wasn’t until final year of my University degree course Interactive Multimedia Design (IMD) that I discovered how to build sites properly using well structured HTML and CSS. Before this I was using tables, unstructured markup and invalid HTML. Who do I have to thank for this? Chris Murphy and Nicklas Persson, two lecturers on the IMD course.

Now you don’t have to take a University course to be taught by these two world renowned mentors. They have branded themselves as the Standardistas and have put all their years of wisdom and knowledge on paper in the form of HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach.

This book will teach you how to build websites from scratch. Starting with the basics of semantic markup and how web pages work moving onto styling your first web page with CSS. It’s a one stop shop for putting together your first web site.

Who is it for?

People who want to learn how to build websites
Developers who need to brush up their front end markup skills
Designers who are using outdated techniques e.g. tables, to build websites
Professionals who want to earn the badge of a Web Standardista

Benefits of the Web Standardistas’ approach

Separates content and presentation (easier to update layouts)
Reduced markup (reducing page download times)
Increased accessibility (for screen readers and other platforms)
Cross browser compatibility
Forward compatibility

Valid (X)HTML – Is it important?

Lee — Tue, 02 Dec 2008 09:00:04 +0000

As a web designer you’re encouraged to write valid code, but is it really important?

I’ve took a look at the reasons behind validation and checked out 25 of the web’s most popular websites to see if they bother validating their code.

What is validation?

Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking…W3C

Why validate, what are the benefits?

1. Non uniform browser correction

Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn’t and you end up with a broken layout.

2. Rendering time

If your code is valid the browser has to do less thinking as it doesn’t have to correct any code, therefore the page will render faster.

3. Future proofing

You never know what’s around the corner in regards to technology but the chances are that if you have valid (X)HTML, you’re ensuring that your website will work with future technologies.

4. Google prefers valid code

Shaun Anderson conducted an interesting validation test; Does Google like valid code?.

This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.

5. Accessibility

A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.

6. Self satisfaction

If feels good when you run a validation check on your site and you see the green bar appear :)

What are the common validation errors and how to fix them?

a. Ampersands

This always catches me out. Ampersands must be written ‘&‘ and not just ‘&’. This is true for writing urls too.

Paragraph

Do the web’s biggest sites validate?

So do all the big and popular websites out there validate? Below I’ve put together a selection of some of the most popular websites and ordered them from best(valid) to worst.

BBC

Wikipedia

Apple

Facebook

Number 10

Digg

Yahoo

Twitter

Times Online

Google

YouTube

Barack Obama

Microsoft

eBay

What about the design community?

Looking at some of the biggest sites (and authors) in the design and technology community.

A List Apart

Smashing Magazine

Web Standardistas

Zeldman

Future of Web Design

Use It

37 Signals

Simple Bits

Freelance Switch

Slashdot

TechCrunch

Conclusion

I think it’s worthwhile validating your websites and it’s good practice. From looking at the sites above however (which are all great sites and designs), it’s obvious that not having a validated website is not the end of the world.

If you’re like me though you’ll sleep better at night knowing your website validates.

Does your site validate?

It was very hard work trying to track down valid websites for this post so it would be great to see some examples. Use the W3C Validator to check your site then submit your link and comments below.

It would also be good to hear your points about validation and if you think it’s worthwhile.

Lee Munroe » html

Are you an HTML5 web designer?

1. Doctype

2. Forms

3. Layout and elements

Something in here

Something else in here

4. Video and audio

5. Advanced features and Javascript

How much HTML5 are you using?

Further reading

How To Setup A Reusable Framework For Your Next Website

Framework structure

index.html

styles.css

ie.css

print.css

script.js

Conclusion

Further reading

Book Review: HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

Who is it for?

Benefits of the Web Standardistas’ approach

Recommended

Valid (X)HTML – Is it important?

What is validation?

Why validate, what are the benefits?

1. Non uniform browser correction

2. Rendering time

3. Future proofing

4. Google prefers valid code

5. Accessibility

6. Self satisfaction

What are the common validation errors and how to fix them?

a. Ampersands

What about the design community?

Conclusion

Does your site validate?

Further Reading