Category Archives: html5

Schema.org Markup of a SERP / Product Listing

Share Button

Microdata is great but, how do you use Google rich snippets to add multiple products to a single page?  Schema.org recently released their product example markup.  This gave me a chance to create the ideal markup of a SERP using schema.org markup.  Check it out here. Microdata is evolving with the support of major companies. Things are converging around microdata and schema.org with the support of Bing, Yahoo, and Google. This gives us web developers an opportunity to utilize this standard, but also presents the challenge of trying to piece together how it should be used on each page, and how often. With this in mind I put together a sample SERP (search engine result page.)

This page does the following:

Schema.org Logo

W3C CSS Validator

W3C Validator

Here is the sample code for a schema.org item listing:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<!-- this could be an h2 if you want to affect the outline -->
	<strong itemprop="name">Name of Items</strong>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
</div>

Here is sample product markup:

<div itemscope itemtype="http://schema.org/Product">
	<h3 itemprop="name">Item 2 Title</h3>
	<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
	<span itemprop="description">
		Item 2 description of the item.  Includes some basic comparison details.
	</span>
	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<span itemprop="price">$44,550.00</span>
		<link itemprop="availability" href="http://schema.org/InStock"/>
	</div>
</div>

And here is the code for putting it all together:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<strong itemprop="name">2 Items</strong>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 1 Title</h3>
		<img itemprop='image' src="bmw1.jpg" alt='Item 1 Description' />
		<span class='description' itemprop="description">
			Item 1 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$45,500.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 2 Title</h3>
		<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
		<span class='description' itemprop="description">
			Item 2 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$44,550.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
</div>
Share Button

How to build a WordPress HTML5 theme

Share Button

iPhone, iPad, video HTML5 deployment, Webkit, Chrome, Safari, web standards, canvas elements, and disappearing flash support.  These are just a few of the many reasons to explore HTML5 and its capability.  Add WordPress, a very customizable system that allows skinning of the underpinning code in order to achieve the desired result and you get a great basic test case for HTML5.

What follows is quick synopsis of how to setup an HTML5 WordPress skin and some of the benefits this brings:

To start, I setup basic HTML5 markup.  Utilizing new tags.  Here is what the structure looks like:

Using this basic system as a framework, I added microformats to the header and footer for human and machine readable information.  You can view the source and search for “vcard” to see my microformat header.

Next, I started utilizing some of the great things that HTML5 and CSS3 have to offer.  HTML5 has new form field types that work well for the iPad, iPhone, and Webkit.  In other browsers they fall back to be standard text input fields so it’s not a problem to use them in general markup, even for IE6 (everyones favorite).  Here is a breakdown of some of the new HTML5 form fields:
<input type=”search” placeholder=”SEARCH” value=””/>
The new search input type has a really cool attribute called “placeholder”.  Placeholder is a value that disappears when the form field focuses, a function that we no longer have to emulate with JavaScript on browsers that support this.  The type search also tells the iPhone, iPad, and future dynamic keypads to use a different “enter” key.  Note how the iPad shows “Search” on the keyboard:

<input type=”email”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

<input type=”url”/>
This field type also tells mobile devices to change their keyboard accordingly.  Here is an example of the iPad keyboard with this field type:

Now its time to add the CSS.  Using CSS3 for rounded corners, drop shadows, and gradients, quickly eliminates the need for extra divs, classes, and most importantly, images. I used these styles to do the buttons, the input fields, header and footer styling, and even the background. Here are some of the basic CSS3 styles used:

/* create the body gradient */
body {
	background: -moz-linear-gradient(top, #fff, #ccc);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
}
/* do the rounded corners and drop shadow on the header */
header {
	-moz-border-radius-topleft:8px;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topright:8px;
	-webkit-border-top-right-radius:8px;
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}
/* create the button for form submission and search submission */
form .submit {
	background: -moz-linear-gradient(top, #073842, #000);
	background: -webkit-gradient(linear, center top, center bottom, from(#073842), to(#000));
}

With these styles it’s quick, easy, and image free to do what use to be a much more arduous process for many of us.

Now you’re all done except for IE

Now that the markup is in place and the styles are in place.  We have to make it work for lesser browsers that can’t handle new standards (aka IE).  There seems to be a misconception out there that this is difficult, but it is actually a few simple steps.  For my blog I conceded that there would be some degradation of the look for browsers that don’t support CSS3 so that makes life easier, and of course it may be a luxury not everyone can afford.

IE Step 1: Add support for styling of the HTML5 tags
To do this, all we have to do is include a JS file called html5shiv hosted on googlecode.com.  This in essence does a document.createElement and a few other things to get IE to recognize the HTML5 elements.  We can wrap this in conditional comments because it is only required for IE.

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE Step 2: IE specific CSS
For any IE specific CSS that you want to do (I added a few different border treatments and color tones to make the site still look ok) add the IE specific CSS file.

So the sum of your checking for IE should look something like this:

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" href="/blog/wp-content/themes/scottgale/style-ie.css" type="text/css" media="screen" />
<![endif]-->

Make sure after you add this to validate your markup with the w3c validator.  It handles HTML5 quite well from my experience.

And now your are done!

I hope this helps everyone to explore this new web standard.  The blogosphere is an easy place to try this out and help perpetuate these ideas.  Please let me know if I need to explore any of these concepts in more detail for people.

Share Button

My new blog mock in HTML5

Share Button

So this week I discovered http://conceptfeedback.com/ (http://bit.ly/bJk6CO). I know lots of people say, don’t trust the opinions of random people out there but at the same time, that is the internet constituency hitting my site. It is good to have some opinions from a diverse set of people. I loved the opinions that I have received thus far, some good ideas have come out of it. I encourage people to try this service, as long as you review other people’s work it is free to try.

So here is the mockup I posted there, which I have built in HTML5:

New Blog Mockup

You can check out and comment on the new concept in conceptfeedback.com or on this site.  Once I have this fully solidified I will send around my general markup philosophy for setting up a wordpress skin in HTML5.

Share Button

When is it time to drop Internet Explorer?

Share Button

After reading the recent posts on Microsoft’s Developer’s Network pertaining to Internet Explorer I am more discouraged than ever.  IE9 finally does support rounded corners but what’s disappointing is how long it has taken them to get there.  The IE9 acid 3 test is 32/100 and it’s not even out yet.  Firefox is 94/100, Safari and Webkit are 100/100.  I would really like to hear from Microsoft on how they explain how far behind they are on innovating.  The sad part is, unless there is a radical change in how things are perceived, Microsoft will get away with it.  Complaints about a website lacking in functionality or having problems go to the webmaster, not to IE6 or 7.  Our statistics still show that we are getting more hits with IE6 than Firefox, Safari, and Chrome combined.  Every web developer has complained about the lack of standard support.  By the time that Microsoft releases IE9 with its lackluster feature set, web development as a whole will of leapfrogged by them.  It seems the only bright spot in this mess is the Google Chrome Frame project.  Google, showing their frustration with this problem, wrote an application that sits inside IE and renders with all the open web standards that we know and love (faster than IE I might add).  So now what is the problem?  Do IT managers that still force IE6 with no admin privileges down the throats of their users get blamed?  No, us web developers will continue to take the heat if the user can’t install the plug-in and our sites don’t work for IE6 users.

Share Button