Sunday, April 1, 2012

Outside-the-Box Pizza, Part 2: HTML5, CSS and Browser Compatibility

In this series, we’re looking at Outside-the-Box Pizza, a web-mobile-social-cloud demo, from a variety of perspectives that include design, technologies, and techniques. The online demo is at http://outsidetheboxpizza.com. Here in Part 2, we’ll be looking at the use of HTML5 and CSS in the front-end. Specifically, we’ll explore how we used the following:

• HTML5 doctype
• HTML5 semantic elements
• HTML5 video
• Non-HTML5 browser support



HTML5 DocType

This is an HTML5 site, and so we are taking advantage of the HTML5 document type and elements. First off, that means specifying DOCTYPE html,  which is refreshingly short and simple compared to the monstrous doctype required by earlier editions of HTML.
<!DOCTYPE html>
We can take advantage of semantic tags in HTML5, which allow us to use more meaningful element names in place of over-using DIVs as we had to in the past. Let’s look at the tags we’re using, along with the corresponding CSS styling.

Header & Footer

We are able to use header and footer tags for our top-of-page and bottom-of-page elements. The header is a medium red and the footer is a dark red.

<header>
    <div id="banner" class="content-wrapper">
        <div id="logo" class="logo">
            <div>outside&nbsp;the&nbsp;box&nbsp;<b>pizza</b>&nbsp;<img src="http://outsidetheboxpizza.blob.core.windows.net/images/icon.png" alt="icon" /></div>
            <div><i>pizza&nbsp;as&nbsp;individual&nbsp;as&nbsp;you&nbsp;are.</i></div>
        </div>
    </div>
</header>
header {
    clear: both;
    background-color: #c00000;
    font-size: .8em;
    height: 4.0em;
}


<footer>
    <div class="content-wrapper" style="line-height: 3.0em">
        <div class="logo">
        <span style="float: left; color: White; font-size: 0.65em; margin-right: 8px;"><a style="color: White; font-size: 0.75em" href="/Activity">Sales</a></span>
        <span style="float: left; color: White; font-size: 0.65em; margin-right: 8px;"><a id="StoreLink" style="color: White; font-size: 0.75em" href="/Store/Orders/926">Store</a></span>
        <span style="float: left; color: White; font-size: 0.65em; margin-right: 8px;"><a id="DeliveryLink" style="color: White; font-size: 0.75em" href="/Store/Driver/926">Driver</a></span>
        <span style="float: right; color: White; font-size: 0.65em; margin-right: 10px"><a style="color: White; text-decoration: none; font-size: 0.75em" href="/Home/About">About</a></span>
    </div>
    </div>
</footer>
footer 
{
    clear: both;
    background-color: #700000;
}


There’s more to the footer than meets the eye, because it is “sticky” and anchored to the bottom of the page. We did that using the technique shown here, which we’ll explain in an upcoming post in this series.

Headings

We use an hgroup tag to enclose heading elements h1 and h2, styled to appear inline next to each other.

<hgroup class="title">
    <h1>Pizza Sightings</h1>
    <h2>Unique customers, unique pizzas.</h2>
</hgroup>
hgroup.title {
    margin-bottom: 0px;
    margin-top: 0px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.5em;
}


Article

We use the article element to house primary content on the pages.

<article>
<span class="text">Here are some of the most interesting pizzas<i>, occasions, or customers</i> we've seen!</span>
<br />
<div class="selectGroup">
    <ul>
      <li class="sighting"><label><img src="~/Images/newyears_pizza.jpg" alt="image"/>Ringing in 2012 with a New Years Pizza<br /><b>@davidpallmann</b></label></li>
      <li class="sighting"><label><img src="~/Images/chocolate_heart_pizza.jpg" alt="image"/>Romantic Pizza for a Sweet Anniversary<br /><b>@joepizza</b></label></li>
      <li class="sighting"><label><img src="~/Images/shape_square.png" alt="image"/>Square Borg Pizza for Trekkie Convention<br /><b>@pizzamonger</b></label></li>
      <li class="sighting"><label><img src="~/Images/face_pizza.jpg" alt="image"/>8 year-old's Birthday is Special with a Happy Face Pizza<br /><b>@davidpallmann</b></label></li>
    </ul>
  </div>
</article>
article {
    float: none;
    width: 100%;
    font-size: 0.8em;
}


HTML5 Video

The home page of outsidetheboxpizza.com contains two videos, one about fresh ingredients and one about pizza making artistry. We use HTML5 native video for these, which include in-browser video controls. Below you see how the video controls appear in the popular browsers—not identical, but similar.

HTML5 Video in Chrome (top left), Firefox (top right),
IE9 (bottom left), and Safari (bottom right)

<ul class="imagelist">
  <li>
    <video controls>
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/freshingredients.mp4" type="video/mp4" />
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/freshingredients.ogg" type="video/ogg" />
    </video>
  </li>
  <li>
    <video controls poster="~/Images/pizzacollage.png">
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/pizzacollage.mp4" type="video/mp4" />
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/pizzacollage.ogg" type="video/ogg" />
    (unable to play video on this browser)
    </video>
  </li>
</ul>
.imagelist { margin-top: 16px; margin-left: 0; margin-right: 0; padding: 0; text-align: center }
.imagelist li { display: inline; text-align: center }
.imagelist li img { max-height: 190px; max-width: 100% }

To cover the mainstream browsers well, our video is available in several formats: H.264 mp4 which is accepted by the majority, and OGG/Theora for Firefox. The Mozilla organization recently announced it will be supporting H.264 in the future, which means we’ll soon only have to encode our videos only one way. If the browser can’t play any of the video encodings we supply, the message “(unable to play video on this browser)” will be displayed.

Outside the Box Pizza on Internet Explorer 8


Backward Compatibility for Non-HTML5 Browsers

In the previous image, you see Outside-the-Box Pizza as it appears today under IE8: it looks as intended, except it can’t provide the HTML5 video. Originally, though, the site looked awful on IE8 (below).

Original appearance on IE8 before adding Modernizr

To make the site look decent on non-HTML5 browsers, you can use a shim to “teach” older browsers about HTML5 elements. We used the Modernizr library, which includes html5shiv, one of the most popular shims. All we had to do was add this single line to our HTML to include Modernizr, and the site is now looking fine in non-HTML5 browsers.

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

While using Modernizr won’t give us all of the HTML5 features, it does allow us to use the modern document structure and render acceptably on older browsers. In addition, we can also use this library for conditional CSS or JavaScript code based on the availability of features in a user's browser. For example, if we wanted to we could test for HTML5 video and if the feature was not present then fall back on a Silverlight or Flash video player.


Summary

Outside-the-Box Pizza uses HTML5 document structure and semantic elements, which simplify the markup and make it more meaningful to human beings. Using HTML5 and native video without plug-ins gives the site broad reach across browsers and modern devices. Using Modernizr helps greatly in making the site usable on older browsers.

Outside-the-Box Pizza leverages open standards on the web client, but it also makes use of the Microsoft web platform and cloud platform on the back end. We'll see how in future installments in this series.

Next: Part 3: Mobility & Responsive Web Design

No comments: