The Blog

The Business Owner's Guide to Creating their Internet Presence

Dec 26

Select a HTML Website Template

Posted: December 26, 2016

Selecting your HTML Template

Creating a website from scratch takes creative skill and knowledge of HTML, CSS, and JavaScript. Paying a web design firm to do this for you can cost thousands of dollars. But you can do it yourself without learning CSS or JavaScript. You just need some very basic understanding of HTML. Simply purchase a professionally built template that already has the design and all the code done for you. You then replace the images and text with your own to customize the website for your needs.

This post will guide you through the steps in selecting an HTML template that you can use for your small business website.

Quick-Start Series

This post is part of series of articles
designed to be followed in order


  1. Start Here to Build your Website
  2. Register a Domain Name
  3. Static Website Hosting
  4. Select a HTML Website Template
  5. Edit a HTML Website Template
  6. Upload Website to Amazon S3
  7. Point Your Domain Name to Amazon S3
  8. Choosing a Business Email Service

Choosing a HTML template for your Static Website

My preference for purchasing HTML templates is Themeforest. They have thousands of high quality HTML templates to choose from, many for under $20. I recommended you look at the comments for any template you are thinking of using. See what others are saying and how responsive the author of the template has been. Lets look at some of the key things to look for when choosing a website template.

Make sure you are buying a HTML template. WordPress, CMS and eCommerce templates will not work on Amazon S3.

Responsive Design

Responsive web design provides an optimal viewing experience no matter what device the visitor is using. The website’s navigation and content will adjust to the screen size of each device correctly. The visitor will not have to scroll horizontally, or try and read a page designed for a desktop computer using a iPhone. It has been reported that 56% of users are using mobile devices to view websites. Your site must be easy to use on small screens, large screens and tablets in between. A responsive design template will do this without the need for separate web pages designed for the different devices.

If you are reading this on a desktop computer, grab the right edge of your browser window with your cursor. Drag it to the left and watch as the web page adjusts to the window size. This is a responsive website.

Latest Standards

Themeforest

The template should be written to a certain standard so it renders correctly in all browsers and can take advantage of the latest features. Look for HTML 5 and CSS 3.

Browser Support

The template should support the latest browsers, but if you need to support older browsers you may have to look harder. Standard browser support as of this writing is Chrome, Firefox, Safari, and IE. The only concern here is with Microsoft Internet Explorer (IE). If you need to support anything older than IE10 you will have difficulty with HTML 5 and CSS 3.

Internet Explorer used to be the dominant browser, but today it is Chrome. See the latest stats. As of this writing IE10 is used by only 5% of the users in the world. Older versions of IE didn’t even make the top ten.

Framework

In the simplest terms, a framework is the underlying code that builds the structure or adds features to a website. One of the most popular frameworks is Bootstrap. Another popular framework is Foundation. It is used for this website. You do not need to be an expert in these, nor learn how they work. Just know that you can customize your website very easily if you choose. Choosing a template that uses popular frameworks will help you find support if you want to learn more or update the site in the future.

Documentation

Documentation helps the developer (you in this case) understand how the website code (HTML) is written. Documentation is typically embedded right in the HTML. It offers clues as what a certain bit of HTML is doing or why it’s there. The more documentation the better. Also, many Themeforest templates come with support. So look for that too.

Design

The look and feel of the website should match your business. Many websites templates come with an established theme such Dentistry or Landscaping. You can look past that in many cases and modify the template to any business. Something that will be hard to overcome is the layout of the pages and how much content you will need to add to fill each page. Have a good idea of how many pages your website will need and the general structure that you will want. For example, will you want a page for each service you offer, or will you highlight each of your services on one page?

A current trend in web design is to have the entire website on one page. This may work well for you as it will limit the amount of editing you will need to do.

Be aware, the templates look great in the live demos with the professional photos they use. However, the images typically are not included in the cost of the template. Some templates provide you a link to where you can purchase the images. Graphic River is the companion site to Themeforest. But there are other resources for graphics.

Contact Pages

Some HTML templates include a contact page that requires PHP (a technology that runs on the server). You can use these templates if you choose, but please know that the contact page will not work. I will provide an alternative solution for your in an future post.

Next step is to edit your template.

I would love to hear from you. Please leave your comments below. You can also share this post on Facebook and Twitter.