1. Technology

Albu Mihai


HTML5 Design Gallery—2013
Screenshot of www.albumihai.ro done on iMac

Screenshot of www.albumihai.ro done on iMac

Image submitted for the HTML5 Design Gallery courtesy Albu Mihai


Here is a great HTML5 photo gallery submitted by a reader. It is fully HTML5 and if you look at the source, you'll see that while there are many photos flashing by, they are all defined on the first page inside the FIGURE element. In fact, the page is fairly simple in design—just the photo, the headline in the upper left, and some links in the footer. This is ideal for a site that is showcasing something pictorial like a photo gallery. In the end, if your photos can stand by themselves, then letting them do so is much more effective than cluttering up the space around them with text or other elements.

If you browse on a large monitor but without your web window maximized, try this: Maximize the browser window. Watch what happens to the images. You see more of the images, but they aren't stretched or distorted. The designer used large images that could potentially fill the full screen of my widescreen monitor. While there might be a concern about the speed of download of the page as a whole, since every image can be loading in the background as the gallery displays each photo in turn. And there is a “loading…” message if it takes extremely long.

There are a few things I would fix about this site. Having the scripts load before the image figures in the BODY of the document means that none of the images can begin loading until the scripts are completely loaded. There are four scripts in the head and one in the BODY of the document, and this could be affecting load times. He could move them selectively to the bottom of the BODY element and if the page still loads correctly, this could help shave some download time off the resulting page. Also, The navigation in the FOOTER element is not enclosed in a NAV element. There is also a lot of meta data which makes the page that much more defined, but isn't used very much. If it is needed for the scripts, then by all means leave it in, but if not, I'd remove it to streamline the page.

But in the end, even with these minor issues, I think this is an excellent site and a great example of an HTML5 photo gallery.

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.