7 Things to Avoid When Creating HTML5 Layouts

By Nathan Segal

In this article we're going to look at seven common HTML5 mistakes that people make when creating layouts.

1. Failing to plan: As in some of my other articles, I stress the need for planning as your number one step and that's the case here, too. So do yourself a favor, step away from the computer and plan out your design with pen and paper, first.

One important aspect of the planning is to make use of a site structure and stick to it, making sure you check off every step as you build a layout. Few things are more frustrating to a user than clicking on a link and finding out that a page doesn't exist.

2. Don't use images in place of text: One reason is to do with sizing issues from one browser to the next, which could damage the integrity of the image, but a more fundamental reason is that search engines cannot read an image and if you need to make use of SEO to increase your page rankings, this strategy will work against you.

3. Poor use of fonts: There are many fonts that you can use for a design, especially with @font-face in CSS, but it's easy to use the wrong font, which can make it difficult to read your text. Other issues are using fixed fonts, making the font too small and poor use of contrast. In general, straight black text on white is the best way to go.

Then there's the issue of whether to use serif or san-serif. Serif fonts are the ones that have little additions on the tops and bottoms of the letters, which makes them easier to read. A couple of examples of serif fonts are Times New Roman and Georgia. These are a better choice than san-serif fonts.

4. Clumsy Navigation: Site navigation should be easy to understand and use. A real frustration is to get to a site which only has icons and the only way you can find out what they mean is to hover your mouse over them and hope the designer made use of the ALT tag. Otherwise it's a guessing game and it's a great way to lose your audience. To make sure that users know what the icons mean, use text descriptions, as well.

5. Obsolete syntax. Don't use the following elements:

• applet: Replace with embed or object

• acronymf: Replace with abbr

• bgsound: Replace with audio

• dir: Replace with ul

• isindex: Replace with a form and text field combination

• listing: Replace with pre and code

• nextid: Replace with GUID's

• noembed: Replace with object

• plaintext: Replace with "text/plain" MIME

• rb: Using the ruby base inside the ruby element is enought. Omit rb.

• strike: Replace with del for an edit or use s instead.

• xmp; Replace with code and change escape "<" and "&" characters to "&lt;" and "&amp;"

Other obsolete elements are:

• basefont
• big
• blink
• center
• font
• marquee
• multicol
• nobr
• spacer
• strike
• tt

New HTML5 Elements: The following elements have been introduced for better structure:

• section: Can be used for a generic document it works with the h1, h2, h3, h4, h5, and h6 elements.

• article: Used or a piece of content, such as a blog post or magazine article.

• aside This refers to a piece content that's related to the rest of the page, but only a little.

• hgroup: This is used as a section heaer.

• header: This is used for navigational aids.

• footer: Used for the end of a section and would contain information such as: Author, copyright, biography, etc.

• nav: This is used for document navigation.

• figure: This is used for single unit or self-contained flow content.

Then there are the audio and video elements for multimedia content.

6. Don't use frames: If you have a need for frames, avoid using: frame, frameset or noframes. Instead, use iframe. You use this to embed an HTML document inside another one. One such usage of this is for opt-in forms with email autoresponders. In this case it could be used with either the JavaScript or HTML. Here's some more information about the iframe element.

7. Not checking your finished layouts to see how well they work: While HTML5 isn't standardized it's being used on all of the major browsers (Safari, Chrome, Opera, Internet Explorer) but it's not equal across platforms, so it's important to test out the features on different devices and platforms. User feedback can also be useful, as well. This is what Adobe is doing while developing its new line of products.

Additional Notes

It goes without saying that one of the worse design mistakes is forgetting to validate your code. This one step will resolve many issues and it's often used as an afterthought, rather than an integral part of the design process.


Understanding HTML5 Semantics: Part 3

• Here's an in-depth list of non-conforming features.

HTML5 Cheat Sheets

  • 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