10 Tips to Create Effective HTML5 Layouts

By Nathan Segal


In this article we're going to look at ways to get consistent results from your HTML5 layouts, using a combination of good design practices and the new HTML5 tags and structure.

1. As I've said in other articles, the first step is to plan out the site in advance and to work out all design elements on paper. This is a huge time saver in the long-run. When you're done, you can transfer your layout to a flow chart. This will make it easy to update down the road, if necessary.

2. Once you've determined the purpose of your site, there are still some foundational steps to take and one of these is to see if you can find programs and/or templates that can make your life easier and speed up the design process. Don't reinvent the wheel.

Here are a couple example templates in use with Adobe Dreamweaver CS6. In this template I've chosen the Fluid Grid Layout option. In this case, the HTML5 DOCTYPE is enabled by default.

In this example, I've chosen to build an HTML template with three columns. Once again, notice the HTML5 is enabled by default.

And here's the code for the second template option. Notice that in these templates there's a great deal of commenting to help make the templates easier to use.

If you work with layouts for the iPhone, iPod Touch and iPad compatible website or webapp, I recommend that you check out TopStyle 5

3. When coding the design, make use of code hinting, if the software program allows for that. And when working with your tags, always make sure to close them and/or check for duplicate bits of code, such as <code>>. Something as simple as this will cause display errors.

4. In another article I stressed the importance of documenting everyting. It's important to go further than that, if you want others to have a clear understanding of your designs. Words are not enough. It's really important to make use of screen shots with captions.

Over the years, software has increased in complexity. This has led to interfaces which are bursting at the seams with features. This has a couple of effects. It places a lot of control at your fingertips. It can also make the interface harder to see. This can cause eyestrain; it also makes it easy to miss details. When creating screen shots, make use of highlighting tools and use them to illustrate what to look for on the interface. The program I use for this is TechSmith: SnagIT.

A further step, if necessary, is to detail your steps with video and voice over instructions. The great thing about video is that users can play it over and over again until they "get it."

5. When working with images, make sure you specify the width and height in your layout and that the image conforms to those dimensions. This is important for several reasons. If the height and width match the original size of the image, there won't be any scaling issues. If the width and height are larger than the image, the image will be scaled. So long as an image isn't scaled more than 20% it's likely to be alright, but if you scale the image too much, it will begin to pixelate (fall apart). This will cause it to appear ragged, lose color depth, sharpness and you'll start to see the pixels.

In contrast, if the height and width are smaller than the size of the created image, it will be compressed, which is better, but you run into another issue. If the files sizes (and dimensions) are larger than what's actually needed, this will slow down the image uploading times.

One final comment about images. Use JPEG, not PNG. The latter can bloat your file sizes by 5-10 times.

Here's an example of the code to display an image:

<img src="img/landscape.jpg" width="400" height="300">

6. Use ALT tags in your code. This is to help you with your SEO. Here's the code again with the ALT tag added. Note also that the file name has been changed to a descriptive one.

<img src="img/victoria-bc-sunset.jpg" width="400" height="300" alt="victoria bc sunset"/>

7. When working with video, it's important to load controls so the user can manipulate the playback of the video. This fosters interactivity within the site.

8. When using text links, think SEO. Using a link such as "click here" doesn't do anything for your SEO. A better idea is to use a keyword as the text link, such as: <a href="yoursite.com" target="_blank">HTML5 Strategies</a> I generally use target="blank" to open another page. Your preferences may be different. Another option is to use a keyword rich domain name, such as HTML5Strategies.com. Some people like to use dashes, such as: HTML5-Strategies.com, but some markketers feel this causes problems with the branding.

9. Reduce the number of <DIV> tags. Instead, use the new HTML5 tags to define the layout of your site. Some examples are: HEADER, FOOTER, NAV, ARTICLE, etc.

10. And the last step is to validate your code and test your layouts on different browsers. If there are problems, this is where they'll show up.

That's it.

About the Author:

Nathan Segal has been working as a Freelance Writer for 14 years. In that time, he has written 527 articles and published six books.

His articles been published in many popular magazines, including: CE Tips (Consumer Electronics), Computer Graphics World, Database Journal, Mac Design, Photoshop User, Rangefinder, Smart Computing, The Computer Paper, Streaming Media World and Windows Expert.

He worked as an Associate Editor at WebReference.com for five years. He also wrote several feature
columns on 3D and video tutorials.

Want To Have Fun In Mexico? Get my travel guide, packed with 99 tips for traveling in Mexico. You'll learn how to get Mexican insurance for your vehicle, drive safely, get health insurance, rent an apartment, get great travel photos and more.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date