Lee Munroe » google

How HTML5 element names were decided

Lee — Tue, 19 Apr 2011 09:01:12 +0000

I had the pleasure of attending a talk by Chris Mills, creator of the Opera Web Standards Curriculum, which was organised by those Standardistas fellas and Build. Chris was talking about HTML5 and one of the things I found interesting was the research behind how the HTML5 element names came about.

Google research

Google looked at something like a billion web pages and measured what ID and class names were used the most.

The results looked like this:

footer
menu
title
small
text
content
header
nav
copyright
button

See the full results here.

Look familiar?

Opera research

Opera then conducted their own research too, which came up with similar results.

Classes

footer
menu
style1
msonormal
text

Full class results here.

IDs

footer
content
header
logo
container

Full ID results here.

And that’s how HTML5 element names were decided

As you can see the new HTML5 element names were decided based on the most commonly used IDs and classes that web designers were already using.

Both ‘main’ and ‘content’ are the obvious omissions. I’m not 100% behind the reasoning for this but I guess ‘section’ and ‘article’ work better semantically for the main content areas.

Good to see ‘msonormal’ didn’t creep in there.

How to get your website’s rich snippets displayed on Google search results

Lee — Mon, 28 Feb 2011 09:01:38 +0000

Two years ago when we launched Lookaly, a local review website for Northern Ireland, we included microformats that would tell the “Google bots” some useful information about the reviews we were receiving on our site.

Only last week our rich snippets started appearing on results. Hallelujah!

If you’ve ever read an article, book or listened to someone talk about microformats they’ll usually say all you need to do us mark up your page with microformats. But it’s not that easy.

What are these rich snippets you speak of?

Google displays extra information with their search results where applicable.

Websites like TripAdvisor, Yelp, Amazon etc. stand out over other search results with their star ratings. The hope is that if Google show Lookaly star ratings along with their results, it will increase click throughs (which it has done already).

1. Mark it up with microformats

You can markup the following with extra information for Google:

2. Test to make sure it works

Use the Google rich snippets testing tool to make sure it’s picking up your data.

As a Google Chrome user I also found the Michromeformats extension very useful.

3. Submit your site to Google

Submit your site here.

4. Be patient

I’ve submitted Lookaly at least 10 times over the past 2 years and have never heard back from Google (even when they accepted us).

I don’t know how they work but all I can do is assume they only approve websites that they see as:

A reliable source of reviews
Have a substantial amount of reviews
Are marked up correctly

If you’re able to tick these boxes then you shouldn’t have a problem.

It’s fantastic that Google have enabled rich snippets for Lookaly and a great milestone to reach. If you’re wondering, Lookaly has over 5,000 reviews and 10,000 business listings for Northern Ireland.

Have you attempted and/or had any success with Google rich snippets?

Useful links

Perfecting User Experience Design with A/B Testing

Lee — Wed, 25 Nov 2009 08:02:29 +0000

As a web designer it’s hard to get the user experience design right first time, you never know how users are going to use the site or how big a difference small iterations will make, so it’s important to test the user experience and try out different solutions. That’s where A/B testing comes in.

A/B testing

A/B testing involves showing different users different versions of a site and measuring how each version performs.

Design two (or more) versions
Randomly show users different versions
Track which version performs/converts better
Evaluate
Use the best version

Sounds complicated doesn’t it? Thanks to Google it’s not as hard as you think. Google has a Website Optimizer service that enables you to easily setup A/B tests and then analyze the results for you.

A/B testing in action

I recently setup a very simple test with Sharethrough changing the call to action text of two buttons and measuring conversion to the products page.

Some users seen these buttons…	and others seen these (50/50 split)

A	B 5% improvement

Version B showed a 5% improvement on conversions to version A, the original.

I must stress this is a very simple test I put together but it just goes to show that even the smallest text change can make a difference. I can now go onto setup more tests and experiment with button placement, language used etc. while measuring conversions to enquiries and conversions to user signups.

A/B testing resources

Before you get started with A/B testing, check out the following:

Do you use A/B testing?

Please share any experience or tips while doing A/B tests.