1. Technology

Dan Forys Journal

By

HTML5 Design Gallery
Dan Forys Journal

Dan Forys Journal

Image submitted for the HTML5 Design Gallery courtesy Dan Forys

http://dan.forys.co.uk/journal/2012-11-27

This is a great example of how you can use HTML5 with other websites and applications to create an interesting web application all your own. Dan feeds his Twitter feed into this web application to create an interesting view into the discussions.

If you look at the HTML, you'll see that the entire application is built using JavaScript. The months and days are listed in UL elements and then displayed across the top of the document in a scrollable box showing the tweets for each day. And if you change the date, you can watch the date scroll by in the headline.

Another thing this application does is something you might not even notice. If you click on the dates, and scroll through them the URL changes along with the content. This may seem like a minor thing, but it makes a huge difference in usability for this type of application. I haven't examined the scripts in depth, but this type of thing is often generated with the History API.

I am also inspired by the design. The background image is a fixed background image that the content floats over in a black translucent box. What I especially like about this design is that it relies on a feature of CSS design that many people hate—that the boxes only only keep the height of the text within them. The background image is placed at the bottom of the document, so on pages that don't have a lot of content, the background image shows up clearly as you can see in the screen shot above.

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.