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 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 the box <b>pizza</b> <img src="http://outsidetheboxpizza.blob.core.windows.net/images/icon.png" alt="icon" /></div>
<div><i>pizza as individual as you 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.
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
Next: Part 3: Mobility & Responsive Web Design
No comments:
Post a Comment