Previously if we wanted to include some placeholder text in an input field we’d have to either use the value attribute or inject it using JavaScript, neither of which are the most accessible.

With HTML5 though, we can now use a new placeholder attribute to add text to the input field using the following:

<input type="email" id="input-email" placeholder="Enter your email address">

Placeholder Attribute Browser Support

The latest versions of Firefox, Safari, Google Chrome and Opera all support the placeholder attribute. However, IE9 and below have no support for the placeholder text so it’s important to consider how input fields will appear on those IE browsers.

I’d fully expect IE10 to support the placeholder attribute but for now and for the foreseeable future while older versions of IE are being phased out, we’ll need to implement a fallback.

Using the Label Element

Regardless of the HTML5 spec not requiring a label element to be associated with an input element, I still think it’s a good idea for accessibility purposes to include a label so it’s clear and easy to see what the form field does.

<label for="input-email">Email Address</label>
<input type="email" id="input-email" placeholder="Enter your email address">

jQuery Placeholder Attribute

As well as using the label element to clearly identify what the input does, I’d also consider using a jQuery solution so that anyone using IE that has JavaScript available will also see the placeholder text.

Daniel Stocks has written an excellent jQuery placeholder plugin which you can download from Github here:

• jQuery Placeholder Plugin

All you need to do, is download the plugin (either the uncompressed or minified version) and include the following lines of HTML and JavaScript, making sure that the jQuery plugin has the correct path.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>

Summary

And there you have it, a consistent appearance for the placeholder element across all browsers.

The Spec

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

How to use the article element

For standard content pages the <article> element is fairly self explanatory. You’d simply wrap the <article> element around your main content like the following example:

<article>
<header>
<h1>Heading</h1>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!</p>
<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer</h1>
</article>


That’s pretty straight forward but there are more subtle times that you’d use the <article> element. In order to determine when you should use it, I like to think of whether the article would make sense independently of the current site that it sits within. Would it make sense if it was published on its own as an RSS feed within someone’s feedreader for example? If it does then it should probably be an <article> if not then it’s more likely that you’ll need a <section>, <aside> or <div> depending on the type of content (I’ll cover these elements in another blog post).

Other uses for the article element

Another example of using this element would be to nest them within blog post comments as these could be treated as articles in there own right. For example:

<article>
<header>
<h1>Heading</h1>
<p>Published: <time pubdate datetime="20011-01-15">15th January 2011</time></p>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur...</p>
<section>
<h2>Comments</h2>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-17">17th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-18">18th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
</section>
</article>


Here you can see that everything is wrapped within the main <article> element but then the comments are wrapped with a <section> and within that are another couple of <article>’s for each of the blog comments.

Things like widgets and forum posts can also be handled in the same way. Just think that if you read the article independently of anything else on the page would it still make sense?

Further reading

There’s a couple of great articles on this subject available here:

• The Article Element by HTML5Doctor
• HTML5 articles and sections: what’s the difference?

Now before everyone jumps to the comments section, I’m fully aware that there are other solutions including @font-face, Cufon and sIFR but they create their own problems with regards to font licensing. But there is a solution for certain situations and that’s to use more intelligent CSS font stacks.

What is a CSS font stack?

Anyone that is used to creating CSS will be familiar with a font stack:

body { font-family: helvetica, arial, sans-serif; }

The browser will use helvetica if it’s available (usually Mac’s), if it’s not available then it will use Arial (most PC’s) and then if neither of those fonts exist it will use the system’s sans-serif font. This is a fairly common concept and is used all over the web and most designers will stick to using a combination of Andale, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

However, as mentioned earlier, these fonts were bundled with Windows XP. We now have many users on more modern versions of Windows and common software (like Microsoft Office) which comes bundled with other fonts which are now common to many more machines.

So we can use any font?

Not exactly.

But what we can do is use a font that isn’t included in the web safe font list and provide alternative similar fonts for users who don’t have that font installed on their machine.

For example:

p { Baskerville, "Times New Roman", Times, serif; }

Nathan Ford created an excellent article on CSS font stacks which has some great examples of using fonts by selecting your fonts using the following criteria:

font-family: ideal, alternative, common, generic

He also includes some great examples of good font stacks near the bottom of his post.

For more information on the use of certain typeface on different operating systems, codestyle.org/css/font-family/ has a ton of information and statistics on the subject.

A word of warning

Using font stacks isn’t just a case of picking fonts that look similar in style as letter spacing and sizing can vary significantly between certain fonts so it is always worth testing out how each of the fonts will look in practice. If in doubt then Nathan Ford’s list at the link above is a great starting point.

Also make sure that you set a client’s expectation right from the beginning. A lot of clients will be used to the way that print design works and therefore when you show the design using one font and the functional website uses a slightly different font due to the “ideal” font not being available on their machine, it can create some interesting and unwanted debate at the end of the project so I’d always advise any designer who is planning on using this method to be upfront right from the start and make sure that the client understands that the web is interactive and not all users will have exactly the same experience.

Nav Element Specification

The HTML5 specification defines the <nav> element as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

How to use the <nav> element?

The <nav> element should surround blocks of content that act as links to other parts of the site:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Where to use the <nav> element?

The spec hasn’t completely been defined at the moment but my understanding is that you should use the <nav> element anywhere that you would consider to be the main way that a user navigates thoughout your site, these might include.

• Primary navigation
• Secondary navigation (or navigation that supplements the current content)
• Breadcrumbs
• Pagination (previous/next buttons)

At the moment it is a little open to how the author of the HTML document interprets the specification and I’m sure over the next year or so it will become common practice to use the <nav> element in a specific way. Maybe using the <nav> element for site wide navigation will become the default method for using this element but for now I’ll be using it wherever there are large chunks of navigation present within a document.

If you’re new to HTML5 then you might want to start at the following link which will give you an overview and a simple template to get you started: HTML5 Tutorial.

Header element as the page header

The first place that I use the HTML5 <header> element is for the page header which might contain a  logo, navigation and any other consistent elements that might be considered the page header:

<header>
<a href="/" class="logo"><img src="images/graphic-logo.gif" alt="Company Name"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>


Note: I’ve also included the HTML5 <nav> element within this example which I’ll cover in another article.

Header element as the article header

When using the <header> element you aren’t limited to the number of times you can use it so I’d also use it to markup the header for the actual document content.

<header>
<h1>Article heading</h1>
<p class="date">Posted on 3rd December 2010</p>
<p class="author">By Dave Woods</p>
</header>

The hgroup element

Currently in the HTML5 draft specification, the hgroup is mentioned and can be used to group a number of heading elements:

<header>
<hgroup>
<h1>Article heading</h1>
<h2>The sub heading for this article</h2>
</hgroup>
</header>

Personally, I’m not sure why we would really need this extra hgroup element for the rare cases that two headings follow on from each other directly in the source code or what extra semantic value this could add to the document? I have a feeling this will probably get dropped before the final specification for HTML5 is released.

Styling the header element

It’s important to remember that browsers don’t currently implement any display information via CSS for the new HTML5 elements so for any element that should display as a block element, you’ll need to specify it as such.

header { display: block; }

Personally, I take it one step further as demonstrated in the HTML5 CSS Reset article and use that to specify the display for these new elements straight away before I start using:

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

You can either use that and apply it to your own CSS reset file or simply download the one that’s available at the above link and use that stylesheet.

• Download HTML5 Reset.css

HTML5 Reset

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

If you’ve used Eric Meyer’s reset file then you’ll be familiar with a lot of what is included above as I used that as a starting point when I first started out with CSS and have adapted this file over the years to match my style.

Remove Firefox Scrollbar Jump

html { overflow-y: scroll; }

This is optional and won’t validate with a CSS2.1 validator, however it’s perfectly valid in CSS3 and I use it to force the vertical scrollbar to appear all the time in Firefox. Without it you may notice that shorter pages appear to jump when you navigate from a page that requires a scrollbar and one that doesn’t so I tend to include this within all my site.

Remove Bullet Points

ol, ul { list-style: none; }

This simply removes the bullet points from ordered and unordered lists. Some people do this on an individual basis where they require it but personally I prefer to take them off and then just add them back in where I want them. You might be able to do this on a more global level by applying a styling for all lists within the article section of the page for example.

Line Through the Del Element

del { text-decoration: line-through; }

The del element is used to show when part of a document has been changed and whilst nearly all browsers display this as a line-through by default it’s good practice to include this just to be double sure.

Reset Tables

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

This bit of CSS removes the border spacing and makes sure that the space between the table cells is completely removed by collapsing the borders.

ABBR and DFN Elements

abbr[title], dfn[title] { border-bottom: 1px dotted; }

For the abbr and dfn reset I used the method used by HTML5doctor.com…

This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use abbr regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the abbr element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.

HR element

hr { display: block; height: 1px; border-top: 1px solid #ccc; margin:1em 0; }

This simply creates a consistent style for the horizontal rule element.

Form Fields

input, select { vertical-align: middle; }

This sets the form inputs so that they display nicely when inline. I’m also in the process of writing a form master CSS file to lay out forms in numerous different ways so that will be coming soon too.

HTML5 Elements as Block Elements

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

Although modern browsers recognise the new HTML5 elements, they don’t display them as block elements which can cause a lot of problems when trying to style them unless you specifically apply block individually to these elements. Including this section within your CSS file solves this problem although in the future I suspect that browsers will display these elements as blocks anyway but at least for the time being you’ll need this.

Resetting Fonts

body, select, input, textarea { font: 0.625em/1 "Helvetica Neue", Arial, Helvetica, sans-serif; }
body { color: #fff; background: #252525; }

This section is probably open for discussion as technically it probably shouldn’t be included within the reset.css file as you’d want to change it depending on the project whereas a reset.css file should probably be a standard file that you can just drop in and include within any project. However, I like to just reset the fonts to 10px here and set the body background colour, font colour and font so that it’s consistent across the sites.

Summary

This is just a starting point for your HTML5 CSS so once you’re happy that this all makes sense you might want to take a look at the Getting Started with HTML5 tutorial that I wrote some time ago. It doesn’t go into too much detail but explains how you can start using HTML5 today using progressive enhancement with JavaScript to style HTML5 elements in older browsers.

Next up, I’ll be going into much more depth regarding each HTML5 element and explain how and where to use there new elements.

Some designers have argued that IE6 is such an old browser now that we should drop support for it and completely disregard any testing or bug fixing to ensure that IE6 users are actually able to use the website. These designers have taken the assumption that if the page doesn’t display correctly then they’ll automatically realise that they need to upgrade and will happily start using IE8, Firefox or Google Chrome.

In an ideal world this would be the solution and we could all go on creating websites without bug fixing for IE6 and start using HTML5 and CSS3 without considering older browsers but sadly this isn’t the case and probably never will be.

Can we force people to upgrade?

Some designers have suggested that a message could be placed on the site which informs users that they need to upgrade in order to use the site but as this video shows, many people don’t even know what a web browser is and presumably see the “e” icon on their desktop as the internet.

If you run a site like Google, Facebook, Ebay or Youtube then you might get away with this kind of strategy but if you’re not lucky enough to be in this position then all you’ll end up doing is sending these users to your competition who have taken the time to fully support IE6.

Why are people still using IE6?

There’s a couple of reasons why people are still using IE6. The first is that people who bought PC’s and laptops until 2007 would have already had IE6 installed on their machine with Windows XP and as they don’t know any better will keep using it until they upgrade their PC which will presumably come with Windows 7 and IE8.

The other set of people are employees of corporate companies who don’t have the opportunity to choose what software they use while they’re at work. These companies control the software on a network level and force their employees to use IE6, usually because they know that their internal applications will continue to work whereas there’s an element of risk in them using more modern browsers especially when their applications have been built without web standards in mind and in some cases predate IE6.

How many people use IE6?

This is the question that doesn’t quite have a black and white answer as the number of IE6 users in the world is actually irrelevant when it comes to building websites. What does matter though is how many people are visiting your website using IE6.

You’ll tend to find that technology based websites have a lot less IE6 users than more mainstream websites. For example, this website has around 2% of visitors using IE6 whereas most of my other websites which are targeted at none technical people receive around 5%.

If your website is targeted at a non-technical audience or corporate employees then you’ll probably find that this number is even higher so the number of visitors to your website using IE6 is probably somewhere within the region of 1%-10%. This is why it’s important to use an analytics package like Google Analytics so that you understand your audience.

Should you still be supporting IE6?

As frustrating as it is, in my personal opinion web designers should still be supporting IE6 while the number of visitors is substantial.

I also take the attitude that even though your client may not know about IE6, what happens when they proudly show one of their relatives their new website only to find out it appears broken to them? Where does this leave your reputation?

How do you build a website for IE6?

Once you get used to catering for IE6 then it really doesn’t take all that much longer to ensure that a website works in IE6. It can be troublesome at times but once you understand IE6′s bugs and fixes then you can implement the most common fixes as you’re working.

I’m also a fan of Progressive enhancement so as long as the site is usable and content doesn’t appear out of place in IE6 then I wouldn’t worry too much about the site being pixel perfect as long as it is accessible and usable then you’ve achieved your objective.

Summary

A lot of designers in the community have already dropped support for IE6 and are refusing to develop for the old browser but personally I think it’s too early and a little irresponsible to disregard it completely without even considering the target audience of a website.

If a web designer doesn’t have any idea how many people will be visiting a website using IE6 how is it possible that they can blindly decide that they won’t support it? If there is evidence that by dropping support for IE6 that your client won’t lose business then that is perfectly acceptable but if that’s not the case then I’d always suggest supporting IE6.

What do you think? Are you still supporting IE6 when building websites or has the time come that you no longer even bother to test how your pages render in Internet Explorer 6 and if so why?

I’m not sure at this stage how many users they’ve rolled the latest version out to. I know plenty of people who are still seeing the old version so for the benefit of everyone, here’s a screenshot.

Design

The one thing that I initially wanted to see was how much of the redesign is a reaction to Microsoft launching Bing.com last year? I headed over to the Bing.com search results and was a little shocked at how much of a rip off Google had done of the Bing search results.

I’m neither anti-Google or anti-Microsoft so this point isn’t at all politically motivated but Google have pretty much replicated the format of Bing.com and if the boot was on the other foot I’m sure people would be making a big deal of it.

Maybe as a designer, I’m being a bit overly sensitive and most people won’t notice but the links in the top left, top right, logo placement, search box, filters and search results are all in exactly the same positions. I would have expected Google to have come up with something a bit more ground-breaking and original. It’s entirely possible that both companies invested heavily in usability testing and this was the design that both came up independently of each other and it’s just a huge coincidence that they look the same?

However, after the initial disappointment of there not being anything new in terms of the design, I was pleasantly impressed by the new Google interface…

Search Results Layout

The search results format is the usual tried and tested method of sponsored results at the top with organic’s underneath and further sponsored links down the right. Google obviously saw no reason to change what is obviously proving to be a successful method of presenting search results.

Location Specific

Google have introduced a new “Auto-detect Location” feature below the search box which should default to your current location but is also easy to customise by entering a postcode or other location which is a nice feature if you’re looking for local search results.

Filters

The big improvement from Google though which none of their current competition can rival is the filters in the left column. Now it couldn’t be easier to view blogs, images, books, news, videos, maps, social media updates and discussions. But not only that, you can now also view results that are time specific so viewing results from the past 24 hours, week, month or year is easy if you’re looking for information that can easily date.

How will the new Google design effect SEO?

It’s probably safe to say that the Google algorithm itself hasn’t changed all that much so continue to write good, original content and market it in the same way that you always have for the search engines. However, there is definitely more emphasis now on new content so it’s probably never been more important to make sure that you keep providing fresh and useful content for your website to ensure that you’re at the forefront of any time dependent search.

What do you think to the new Google search results?

Google Chrome Extensions

Firebug Lite 1.3.0

Firebug for Google Chrome isn’t quite up to a par with the Firefox version but the beta version isn’t that far off. I’ve also not found a way to see the line number in the CSS which would be really useful but it’s certainly not a reason for me to continue using Firefox anymore.

Pendule

The Firefox Web Developer Toolbar was one of the first extensions I used for Firefox and was a great tool for debugging problems. I don’t use it as much since the release of Firebug but it still has some useful features. Pendule for Google Chrome does replicate some of these features and especially useful is the ability to switch off images and CSS so this is another must have tool for any web designer using Chrome.

Resolution Test

Unfortunately one of the things missing from Pendule is the ability to resize the browser window to a specific size at the click of a button. However, the Resolution Test extension makes that easy and also allows you to launch a number of browser window sizes in separate windows which is a pretty nice feature.

Webpage Screenshot

I was using Fireshot within Firefox to quickly take screenshots but the Webpage Screenshot extension provides the same functionality for Google Chrome and in my opinion is a little more usable.

Xmarks Bookmarks Sync

I previously used Xmarks within Firefox so having this available in Chrome was a bonus. Xmarks simply allows you to synchronise bookmarks across different computers and different browsers which is very useful if you want to bookmark something at work and then have it available on your home PC or laptop.

Chromed Bird

I’ve been using Tweet Deck for most of my Twitter updates but having this available quickly and easily from within my web browser is extremely handy.

ChromeMilk

I use Remember the Milk as a daily task list. I’ve previously been using the desktop app but having an extension within the browser itself is a little time saver. You’ll need to register for free on the Remember the Milk website but if managing your tasks across different PCs or mobile devices would be useful for you then this is definitely something to consider.

Eye Dropper

The Eye Dropper extension is a simple colour picker which allows you to select any area on a web page to see what colour is being used.

Lorem Ipsum

Most designers will use latin text within an initial design before the content has been written and this simple extension quickly launches a new tab containing latin text. You can specify number of words per paragraph and number of paragraphs very easily to quickly create that placeholder text.

Google Mail Checker

This extension adds a little icon to the toolbar which notifies you if you have any email in your gmail account. Clicking it will jump to your gmail tab if you already have gmail open or will launch a new tab if you don’t, simple but a little bit of a time saver for checking your email.

Chrome SEO

Useful little tool for viewing number of pages indexed by the major search engines, number of backlinks, traffic, bookmarks on social media sites and few other useful snippets of information. Obviously it’s not the total solution to SEO but a nice summary of information.

Mini Google Maps

This probably shouldn’t really make it onto a useful extension for web developers but I find it useful so thought I’d share it anyway. It’s basically just a mini version of Google Maps that pops up from your toolbar which you can use to look at a location or get directions from one place to another. Again it’s not a huge time saver but having a little icon that you can click to quickly launch Google Maps without even having to launch a new tab is pretty cool.

PageRank

Any good SEO expert will tell you that purely chasing PageRank isn’t a good SEO strategy but it’s still something that I like to have at hand. This extension simply provides a small bar that provides PageRank information.

Summary

I’m sure that there’s many more extensions that can provide value to web designers so please feel free to share any other ones that I’ve missed off the list in the comments below.

I’d also be interested to hear if you’ve switched to Google Chrome or your reasons for using your current browser?

If you’re a developer then you can download the IE9 test drive package below:

• Internet Explorer 9 Test Drive

At the moment this is a very early version of IE9 and as such does not include the interface but it does include the new rendering engine which includes improved HTML5 and CSS3 support plus a new Microsoft JavaScript engine.

According to reports, Microsoft will be releasing other preview builds every eight weeks but as yet no time frame has been announced for the final release of IE9 which is frustrating.

It’s great news that IE9 will finally support CSS3 but I am a little concerned that they appear to be simply adopting border-radius without any prefix as if it’s their decision to decide the CSS3 specification. Mozilla and Webkit both have prefixes until the standards have been defined so why should IE9 be any different?

I think this sets a dangerous precedent where other browsers may have to follow what IE9 has done purely because they have the market share and less knowledgable web designers have implemented CSS3 specifically for IE9 without testing on other browsers.

It’s good to see that Microsoft are continuing to improve the browser but is still frustrating that it takes so long for them to implement new features and release a browser that they seem to be playing catch up with the Safari and Firefox browsers continuously.