Lesson 2: How to Choose an HTML5 Template?

Lesson 2: How to choose an HTML5 template?

  1. What Type of Website Do You Want to Build?
  2. What Type of Layout and Design Fits Your Needs?
    1. Content Width Design
    2. Header Layout
    3. Navigation Bar Design
    4. Logo Placement
    5. Overall Usability and User Experience
    6. Features and Customization
  3. Customer Support and Budget Considerations
  4. HTML5 templates roundups

Before choosing a website template, there are a couple of key points you need to consider.

What Type of Website Do You Want to Build?

A website template determines your sites structure, functions, and how it will display. Are you building a simple one-page website or do you need several pages which include galleries, maps, or videos?

You should also keep in mind your industry and your niche to choose the best site template. A template created with photographers in mind will not be suitable for an accounting business and vice versa.

What Type of Layout and Design Fits Your Needs?

The layout and design determine how the information will be structured when you create a website. There are five key design and usability points to consider when it comes to choosing the right website template:

  • content width design;
  • header layout;
  • navigation design;
  • logo placement;
  • overall usability and user experience.

Content Width Design

Most website templates today offer two types of content width: full-width and boxed width.

A full-width design is when the background image stretches the full width of your computer screen. Full-width layouts are very popular and work well for mobile responsive templates and graphic heavy websites. Generally speaking, they are considered more creative and modern.

Header Layout

The header is usually the first thing your visitors will see when they visit your website. There are many different types of header layouts and they can range from a simple logo image and main navigation to headers that contain slideshows, videos, an image with text overlays, and so on.

Choosing the right type of header is more of a goal-oriented decision rather than a design decision. Your website header should successfully communicate the core message of your business to your visitors.

Using a captivating image to create an amazing visual experience works well for businesses such as hotels, restaurants, or spas.

Navigation Bar Design

Your navigation is the primary tool that will guide your visitors around your website. Your navigation bar should be clean and simple, with a background color that is easy on the eyes. Your pages should be laid out in order of importance from left to right and should include only the essential pages. Supporting pages should be added as drop down menu items rather than included on the main menu.

The position of your navigation bar is also important. A horizontal top navigation menu is a classic design and one that most people are used to.

If your pages are very long, then you should consider using a menu bar that is permanently fixed at the top of the page no matter how far down your visitors scroll.

If your website will be graphic heavy, consider using a vertical navigation bar which is particularly effective if your menu items have long titles or if you have a lot of tabs.

Another option for graphic heavy websites is the bottom horizontal navigation menu which puts the focus primarily on the content and eliminates visual distractions. This type of menu also works well if your website’s primary goal includes a call-to-action such as an email sign up or to shop your online store.

Logo Placement

The placement of your logo says a lot about your business goals. A logo placed in the same line as your main navigation works well for businesses who are more focused on their products and services and put less importance on branding. It’s best suited for companies who serve the business-to-business (B2B) market.

A centered logo, either below or above the main navigation, works well for businesses focused on creating a brand identity and is most commonly popular with retail businesses.

Overall Usability and User Experience

Last, but not least, you should consider overall usability and user experience of the website template. Keeping the above-mentioned points in mind, your chosen website template should not only have an attractive design, it should also fit your requirements. More importantly, it should include responsive and mobile-friendly design, load quickly, and include SEO optimization.

Features and Customization

Most modern website templates allow for some level of customization to blend in with your existing brand. The customization options range from color and font selection and adding your company logo all the way to adding multimedia and creating a custom layout.

Bear in mind that website template customization should enhance the template not require a complete redesign.

Website templates also offer a wide variety of features which are either very niche specific such as including a reservation form or a photo gallery to very general features which can be used across a range of niches.

Consider what features you need from your website template and eliminate all the templates with features you don’t need and will never use.

Customer Support and Budget Considerations

No matter how "simple to use" or "easy to update," website templates claim to be, they must be supported by a template developer who offers support if you run into any problems. Choose a template whose designer clearly states they offer customer support via phone, email, or online chat so that you can feasibly get your site uploaded and ready for viewing as quickly as possible.

Quite a few of our templates come with 6-month support which includes:

  • Answering questions about how to use the template.
  • Answering technical questions about the item (and included third-party assets) such as specific questions about the features and functionality of the item, provide guidance on the way the item is designed, help you with issues related to using the item and getting the most value out of its functionality, etc.
  • Help with defects in the theme or included third-party assets such as bugs and minor item issues.
  • Item updates to ensure ongoing compatibility and to resolve security vulnerabilities.

HTML5 templates roundups

To help you ease the process of choosing an HTML template we have a set of niche round-ups where you’re likely to find a template for your project.

In any case, I highly recommend you opting for Intense theme, it’s a multipurpose HTML website template that is basically a one-size-fits-all theme. Also, it’s built with Novi drag-and-drop page builder that makes customization process extremely simple, almost similar to the way one can edit a WordPress-powered website with Elementor builder.

Just so you know, in case you want to build an Elementor WordPress website we have a free course that you can enroll in.

At the meantime go check out these round-ups:

This tutorial is a part of the "How to Build and Maintain an HTML5 Website?" free course.