1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<article itemscope itemtype="http://schema.org/Product">
 
	<a href="#" title="#" itemprop="url"><img src="#image" alt="#title" width="#" height="#" itemprop="image" /></a>
 
	<h1 itemprop="name">Companion Cube</h1>
 
	<div class="description" itemprop="description">
 
		<p>The Companion Cube is your best friend and it loves you very much.</p>
 
	</div><!--/end .description-->
 
	<div class="rating" itemscope itemtype="http://schema.org/AggregateRating">
 
		<p>Rating: <span itemprop="ratingValue">10</span> out of <span itemprop="bestRating">10</span> by <span itemprop="reviewCount">256</span> customers</p>
 
	</div><!--/end .rating-->
 
	<div class="offer" itemscope itemtype="http://schema.org/Offer">
 
		<span class="price" itemprop="price">$100.00</span>
 
		<span class="availability" itemprop="availability">In stock!</span>
 
	</div><!--/end .offer-->
 
	<a href="#" title="Add to Cart"><span>Add to Cart</span></a>
 
	<ol class="review_list">
		<li>
			<article itemscoop itemtype="http://schema.org/Review">
 
				<h1 itemprop="name">LOVED IT!!!</h1>
				<p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p>
 
				<div class="review_content" itemprop="description">
 
					<p>Loved it!</p>
 
				</div><!--/end .review_content-->
 
			</article>
		</li>
		<li>
			<article itemscoop itemtype="http://schema.org/Review">
 
				<h1 itemprop="name">LOVED IT!!!</h1>
				<p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p>
 
				<div class="review_content" itemprop="description">
 
					<p>Loved it!</p>
 
				</div><!--/end .review_content-->
 
			</article>
		</li>
		<li>
			<article itemscoop itemtype="http://schema.org/Review">
 
				<h1 itemprop="name">LOVED IT!!!</h1>
				<p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p>
 
				<div class="review_content" itemprop="description">
 
					<p>Loved it!</p>
 
				</div><!--/end .review_content-->
 
			</article>
		</li>
	</ol>
 
</article>

Obviously you don’t need to use all of the elements I added, but its easier to strip them out, than add them back in. Let me know what you think! Do you have any good examples of semantic HTML5 eCommerce stores?

On a very similar note, some of my co-workers and I will be participating in the Tough Mudder on May 13th. The team consists of Chris Loringer, Justin Handler, Zach Galifianakis, Keith Scandone, and Mike “Johnny Cupcakes” Gadsby. We’ve been training for the past couple of months leading up to our 12 mile race filled with obstacles constructed by British Special Forces. From running, swimming, climbing, and barrelling through an electrified wire field, we, as a team, have been preparing ourselves to kick some ass. With the race quickly approaching, we’ve been pushing each other more and more. Calling each other out for drinking beers, eating fatty foods, etc. All of this team work and communication overflows into our day-to-day, and has really strengthened our relationships. I’m looking forward to race day, and for what comes next.

So you throw some polyfils like Modernizr at these legacy browsers… and now they understand HTML5.

You used progressive enhancement from the beginning, so the CSS3 you’re using looks fine in browsers that don’t understand it.

And finally, you fired up some virtual machines and checked to make sure everything is working fine. Yay! Now you’re done right? Nope.

Turns out the Scott Jehl’s Respond.js polyfil you’re using to make sure IE7 and 8 understand media queries is causing some weird bugs. You added icon fonts to the site for high retina displays, but you’re getting some weird behavior ever since you added Respond.js to the site… So you try doing some Google searchs, checkout StackOverflow, or look at the Issues in the Github repo… but still nothing… Did you really expect results for “IE8, respond.js, icon font, hidden on hover??” Let’s get real for a sec… Do we really need to make sure that IE7 and 8 are responding to our media queries? Would it just be fine if those users would simply be served the desktop site? Of course! There’s no need to spend tons of development time trying to debug issues that are going to effect less than 1% of your audience. So how can we not use Respond.js or similar polyfil, and still maintain one stylesheet? Enter Sass!

Example

The first code example below is how you could setup your mobile first stylesheet for all browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* All your mobile first css */
 
@media only screen and (min-width: 768px) { 
 
	@import '_media768.scss';
 
}
@media only screen and (min-width: 1024px) { 
 
	@import '_media1024.scss';
 
}
@media only screen and (min-width: 1200px) { 
 
	@import '_media1200.scss';
 
}

The code example below is how you can setup your SCSS file for LTE IE8.

1
2
3

@import '_media768.scss';
@import '_media1024.scss';
@import '_media1200.scss';

Include the file above in a conditional comment for LTE IE8 users, and presto. Those users will now see the desktop version of the site. This, of source, adds to the weight of the page because they would esstenially be downloading the same styles twice… so it may not be the best option for every site.

So what do you think? At what point to you draw the line and stop supporting these legacy browsers? At what point can you consider a site is “optimized” for?

Example Output Image

HTML

1
2
3

<a class="button blue picto picto_heart" href="#"><span>Basic Button</span></a>
<a class="button green picto picto_thumbs_up" href="#"><span>Basic Button</span></a>
<a class="button yellow picto picto_thumbs_down" href="#"><span>Basic Button</span></a>

Pretty much the same markup as the previous examples, the only difference is the new class “picto” and “picto_xxx.”

CSS

1
2
3
4

a.picto span 			{ padding-left: 2em; display: inline-block; position: relative; }
a.picto span:before 		{ position: absolute; line-height: 1em; left: 0; top: -.25em; font-size: 1.5em; display: inline-block; font-family: 'ModernPictogramsNormal'; content: 'j'; text-transform: none; }
a.picto_thumbs_up span:before 	{ content: 'l'; }
a.picto_thumbs_down span:before { content: 'L'; }

The first line of CSS is a lot like the icon example, just have to pad enough room for the pictogram. Next you need to use the pseudo class :before to add characters in the special pictogram font. After you have the first rule established, the following rules just need to swap out the characters, just like the background position in the icon example. Depending on what picto font you use, you might need to adjust the top position. Use EM’s not PX’s so it can scale.

1
2
3
4
5
6
7
8
9
10
11
12

@font-face {
 
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

Don’t forget to include your font. I found this font with the help of CSS Tricks icon font roundup on Font Squirel. Good thing about this font… it was free! and Font Squirrel has an @font-face generator that helps you create all the formats you needs, and will even give you example CSS for them!

So that’s it! None you have scalable buttons for your responsive builds. Have you taken advantage of this technique yet in production? Did you run into any gotchas?