10 Tips for creating a good template to HTML5

In this article we will talk about how to create a neat patterns on HTML5, combining good design practices and new tags HTML5.

Will examine the general recommendations relevant when creating any templates.

1. The first step – it is always a site planning in advance, with the development of all elements of its design on paper. In the long run it will save you a lot of time. When everything is ready on paper, we can already draw something on a flip chart to make possible adjustments.

2. When you are done with the purpose of the site and its overall concept, you should look around and see if there is already some templates or software that can make your life easier and speed up the design process. Do not reinvent the wheel.


Here are a couple examples of templates when working with Adobe Dreamweaver CS6. In this pattern, I chose the option “Fluid Grid” (floating net). In this case, the document type is automatically set in HTML5.


In this example, I decided to create HTML-template with 3 columns. Again note – the default document type exhibited HTML5.


Note that the templates are also present detailed comments, which facilitates their use. If you create a template for the iPhone, iPod Touch and iPad, We recommend that you look to the editor TopStyle 5.

3. When you are working on the design, do not neglect the code hints, if their use is envisaged in the program in which you are working.

When working with tags always watch carefully to cover the paired tags and avoid duplication of angle brackets. These things can often lead to incorrect display template.

4. The importance of commenting should not cause any problems, but we will go even further.

If you want to after you anyone could deal with your complex design, the words can often be enough, so use screenshots with captions to explain the features of your code.

In recent years, the complexity of software has increased markedly, and the program simply “bursting at the seams” on the heap of different functions.

As a result, we are faced with a situation where the interface is so complex and multi-level, that it is very difficult to find the desired item. Eyes get tired and miss some detail becomes simple.

When you create screenshots and use different ways to highlight important points, this problem is largely loses its relevance for those working after you. Alternatively, you can use for this purpose the program Snag IT.

Another step that you can use if necessary – is the creation of video and voice instructions. A huge advantage in this case is that a person can re-listen to the audio or watch the video as long as catch your thought and explanation.

5. When you are working with images, make sure that you specify values ​​for the attributes width and height, and the size of the image is indeed correspond to these values.

This is important for several reasons. If the specified height and width of the image corresponds to reality, you will not run into problems when scaling images. If these values ​​are no longer valid, it will lead to scaling.

While resizing will not exceed about 20%, the difference will be slightly noticeable, but the big difference you will get noticeable distortion: increasing pixel , loss of sharpness and color depth.

In the reverse situation – when these values ​​are lower than real – the picture will be compressed, reduced, which is not so critical. However, there are some problems.

If the image size is larger than necessary for display, then there is a waste of resources, since images take up more space and take longer to load.

As an example, you can insert images in a similar way:

<Img src = “img / landscape.jpg” width = “400” height = “300” />

6. Use alt tag for images. It will play a positive role in terms of SEO (search engine optimization) because Search engines also take into account the text of which is in this attribute.

Below you can see the same code, this time with the added tag alt:

<Img src = “img / landscape.jpg” width = “400” height = “300” alt = “Beautiful landscape” />

Write the alt something quite meaningful, because this text is also displayed on the screen when the display is turned off images.

7. When working with video, it is important to give the user control the playback process, so be sure to use the player with the control panel for a man to put the video on pause, rewind it, change the volume, etc. All this increases the usability and interactivity of your site.

8. When you create a reference think about search engine optimization.

Using a link with the text “click here” completely uninformative and useless in terms of SEO. A much better approach is to use important keywords as anchor text, for example:

<a href=”http://www.templatesurge.com/materials/121″ target=”_blank”> Counter visits to the site with their hands on PHP and MySQL </a>

Often used as an additional target attribute with the value “_blank” to link opens in a new tab or a new browser window.

Such a campaign is faithful and when choosing a domain name for your site. If possible, use the domain names that contain the main keywords that can most aptly describe the focus of your site.

9. If possible, try to reduce the number of tags div.

Instead, use the new HTML5 features for generating page layout, including such tags as: header, footer, nav, article, and others. In most cases, it will make your code more readable and intuitive.

10. And a final tip – use the valid code and check the appearance of your design in different browsers. It often makes sense to do this is not the end of the work, and at each significant step.

In this case you do not find yourself in a situation where it is not clear why something is not displayed as you expect, and will be easier to identify and correct any errors display.

At this the review is completed. Remember the important, fundamental things and create good templates.

Good luck!