If you are wondering how you can get consistent results from your HTML5 layouts, then you need to consider good design practices. Below are important tips for HTML 5 designer:
1. Plan the Site and Work the Design Element on Paper.
The first step you should take is planning out the site in advance then try to work out all the design elements on paper. This will help you save a lot of time in the whole design process. After you are through with doing this, you can transfer the layout to a flow chart. This will enable you make any updates easily as you proceed with the whole process.
2. Find Programs and Templates to make your Work Easier.
This is very crucial especially after you have determined the purpose of your site. Try to look for programs and templates which make your work easier. These programs will also help you speed up your design process.
3. Make use of Code Hinting as you Code the Design.
If the software gives you a chance to code the design, use code hinting. As you work with your tags, ensure that you close them or check for duplicate codes like <code>>. Simple things like these are likely to cause display errors.
4. Use Screen Shots that have Captions in your Design.
While doing the design work, use the screen shots with captions. These will make anybody who comes across your work have a better understanding of your design. It is good to note that programs have become very complex with time. This has resulted to interfaces with variety of features. This can also make the interface very hard to see causing eyestrain. When making screen shots, use highlighting tools to illustrate what to search for on the interface. The best software for this is TechSmith: SnagIT. Also detail all your steps using video and voice over instructions. This will enable your users play it over and over again until they get the content.
5. Specify the Width and Height when Working with Images.
As you work with images, ensure that you specify the width and height in the layout. The importance of this is that if both the width and the height match the initial size of the image, there will be no scaling issues. If the height and width are bigger than the image, the image will have to be scaled down. An image should not be more than 20%. However, never scale the image too much since it might appear ragged. While working on images use JPEG instead of PNG.
6. Make use of ALT Tags
Make use of ALT tags in your code. This will help increase your SEO status.
7. Load Controls when Working on Videos.
This will enable the user manipulate playback on the video.
When working with video, it’s important to load controls so the user can manipulate the playback of the video. This encourages interactivity in the site.
8. Focus on SEO whenever you are using Text Links.
Try as much as possible to use a keyword as your text link. You can also decide to use a keyword rich domain name e.g. HTML5Strategies.com. Avoid using dashes since most marketers feel that this causes problems when it comes to branding.
9. Reduce the Amount of <DIV> Tags.
Instead of using <DIV> tags, make use of new HTML5 tags to define the layout of your site. Examples include: FOOTER, ARTICLE, NAV, HEADER etc.
10. Validate your Code.
This is the last step. Validate your code then test your layouts on diverse browsers. If there are any problems, you will be able to identify them at this stage and rectify.
Written by Jeremy tech blogger who is helping people by HTML templates powered by MotoCMS.