1. Computing

MailChimp

By

CSS3 Design Gallery
MailChimp Home Page

MailChimp Home Page

Image submitted to the HTML5 Design Gallery

http://mailchimp.com/

MailChimp is a tool to help you send email newsletters to subscribers. But that’s not why I included it in the HTML5 design gallery. What’s nice about it is that it’s a great example of an HTML5 site. It’s clean and easy to use. The images are crisp and the colors are well chosen. The design shows you exactly what you need and encourages you to get started.

I love how they’ve designed the banner at the top of the page to be the very clear call to action. Customers know exactly what they’ll get (easy email newsletters) and how to get it (by clicking on the red button) and how much it will cost (sign up free). There is even a link to learn more that doesn’t use the tired phrase “learn more” but rather asks you if you “Need convincing?”

That first portion of the page is all many people will need, but if you’re a MailChimp subscriber you can skip that and head to the next part — “What’s New.” This is a nice clear section with good looking images and interesting information.

If you view the HTML source, you’ll see that they use HTML5 sectioning elements (like NAV and SECTION). They also do some interesting things to affect the typography more directly. If you look at the H1 headline, they have surrounded each letter with a SPAN element and a different class. Another clue that they take their typography seriously is that they use ’ for their single quotation marks. This is a site design that was carefully crafted down to the smallest detail.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

©2014 About.com. All rights reserved.