When it comes to creating your business website, there are several ways to do it. You can opt for a site builder, you can have a developer design a site for you, or you can use a CMS like WordPress. While there’s nothing wrong with those options, they can be too much if all you need is a simple website to showcase what your business is all about and provide potential customers and clients with a way to contact you.
If you don’t need fancy features and you don’t foresee yourself regularly blogging or selling online, then an HTML responsive website template is just what you need. Here, we'll walk you through the setup steps so you can launch in no time flat.
How to Make a Responsive Website in HTML
The beauty of HTML responsive business website templates is that they are easy to use and don’t require any special technical knowledge to upload them to your hosting server. They are also easier to modify than other website builders and CMSs.
In this tutorial, we’ll show you how to modify and upload an HTML responsive website template to your server so you can create a responsive business website with ease.
Before You Get Started
Before we even begin with responsive website template modification, there are a few things you’ll need. They include a domain name and a hosting plan, an FTP program and code editor, an HTML responsive business website template, and lastly, content and images that will go on your site. Let’s take a better look at each of those below.
1. Domain Name and Hosting
The first thing you need to do is purchase a domain name and a hosting plan so your website can be found online. In most cases, you'll be able to get a free domain name when you sign up for a hosting plan with most providers. When it comes to your domain name, a good idea would be to use your actual business name as the domain name.
If possible, try to get a .COM extension as it’s the most popular one, but keep in mind that finding a great domain name with a .COM isn't as easy today as it once was. In that case, you might want to look at other extensions such as .CO or a local domain such as .US.
When it comes to hosting providers, you can find hosting packages that start at $5/month. You’ll want to read through their FAQs to see how they handle customer service and get a sense of their terms and conditions. Also, consider reading the reviews of a particular host on other third-party websites to see what their customers say about them.
2. FTP Client and Code Editor
The next items on our list are an FTP client such as FileZilla and a code editor like Sublime Text. The purpose of an FTP client is to connect your computer to the hosting server and easily upload your website’s files all at once, instead of uploading them one by one through the host’s control panel. A code editor, on the other hand, will help you edit the template’s files and make it easier to find different parts of the code that need editing.
Both Sublime Text and FileZilla are free to download and can be used on Mac, Windows, and Linux-based computers.
3. Your Chosen HTML Responsive Website Template and the Website Content
Finally, you’ll need an HTML template and the content you wish to add to your website. You can find a plethora of responsive HTML templates made specifically for business websites on marketplaces like Envato Elements. Once you find one you like, simply download it, unzip the folder, and save it somewhere that you can easily access.
As far as content goes, consider the copy that will go on the pages of your site and explain what your company does, who it serves, and how it helps customers with products and services. You can also add information about key people in your company. Don’t forget visual elements such as images and logos.
How to Customize the Template's Content
Now, it’s time to edit the content within the template and replace the dummy information with your own. For the purposes of this tutorial, I’ll be using the Moose template. This responsive website template features flat and responsive design and includes several different page templates suitable for business owners, creative agencies, digital studios, and more.
1. Understand How the Responsive Website Template Is Structured
Before you start editing the template, it’s important to understand the structure so you know which files you’ll need to modify. As you can see from the screenshot below, the unzipped folder has three subfolders.
The one called template is the subfolder that contains all the files that make up our responsive website template as well as a few extra subfolders. If you’re using a different template, you may not see all of these files and subfolders, but generally, you can expect to find:
- Images folder that contains all the demo images used in the template.
- CSS or Styles folder which contains the CSS files you'll need to edit to customize fonts, colors, and other visual styles.
- Various HTML files for different pages on your site like index.html, about.html, contact.html, and others.
2. Replace the Dummy Content
Double-click the index.html file or right-click it and select Open in Chrome (or whatever browser you’re using). When you look at the template in your browser, you can see there's a slider where you need to replace the images and the captions, a services section where you need to add your own information, and more.
The easiest way to find where to edit this information is to right-click on the text and click on the Inspect link.
The Inspector window will pop up, and you'll be able to see the HTML code used in the HTML responsive website template on the left-hand side of the window and the CSS code responsible for the visual style of the template on the right-hand side of the Inspector window.
Look at the HTML code and you’ll see that the line of code containing the selected text is highlighted. In the screenshot example, the header that I'm inspecting and that's highlighted in the Inspector window is between the <h3> tags, which are the HTML tags. Tags in HTML consist of an opening and closing tag and make up a tag pair that holds corresponding HTML elements. For example, <h1> tags are called heading tags and are used to hold a level 1 heading. Similarly, <p> tags hold the paragraph HTML element.
To modify the template, you need to know which tags hold the text you want to edit and find them again in the code editor. Then, you can replace the text with your own.
Now that we know which tags we need to edit, it’s time to open the index.html file in a code editor like Sublime Text. Right-click the file and click Open with Sublime Text (or any other code editor).
With your HTML file open in the code editor, scroll down until you find the same text you were inspecting in your browser. Then, click in between the <h3> tags, delete the dummy text, and enter your own.
Next, click in between the <span> tags, delete the text, and enter a brief tagline or descriptive text. You can also delete parts of the responsive website template you won’t need. If you look at the screenshot below, you’ll notice I’ve replaced the text of the header and deleted the bottom row of the services.
To edit the rest of the homepage and other pages in the template, all you need to do is repeat this process over and over.
Now, let’s explain how to easily replace the dummy images. First, you’ll need to place all of your images in the images folder in your HTML responsive website template’s folder. Then, go back to your browser and inspect a part of the page with an image.
The Inspector will tell you the name of the image as well as which tags contain that image. Now, you can go back to the code editor and look for that piece of code. Then, replace the image name with the name of your image and save the changes.
How to Style the Responsive Website Template
Now that you've entered your own content, let’s discuss how to style the template. In my case, the Moose template includes with a few pre-made color schemes that are located in the style > CSS > color subfolder. This means I can easily change the colors simply by changing out the stylesheet in the head of the document for my preferred color stylesheet.
Find the following line of code in the HTML template:
<link href="style/css/color/red.css" rel="stylesheet">
Changing the name to blue.css will change the red color of the template to a blue shade:
You can also edit the main stylesheet called style.css and include your preferred fonts and colors.
Simply follow the HTML editing principle: first, inspect the element you want to style, and then find it in the style.css file and experiment with different values.
How to Upload Your Files to the Server
The last step in making a responsive website is to upload your files to your hosting server. Your hosting provider should have emailed you immediately after you signed up with the necessary information for FTP file transfer.
You’ll need to launch FileZilla (or another FTP program) and then enter the required information in the top bar. This means you need to enter the server’s name, your username, and your password, and then click on QuickConnect:
Then, you’ll want to locate the HTML responsive website template folder on the left side of the FTP program and expand it by clicking on it. In the window below, select all of the contents and drag them over to the right side of the FTP screen. Drop the files into the root folder of your hosting server, which is usually the public_html folder.
Wait for the upload process to finish, and then open up your browser and enter your domain name. Your site should now be live.
4 Key Elements Your Responsive Business Website Should Include
Now that your site is live, it’s essential that you include crucial information every business website should have.
- About and Services Page. An about page tells the visitors the story behind your brand and helps them understand how your services can help them. From there, you can naturally link to your services page which should provide a brief description of everything that’s included in the service as well as the price of each package.
- Contact Page. It goes without saying that you need a contact page so visitors can get in touch with you to schedule a call or to find out more about you. Your contact page should include a simple contact form, but you can also list your social media profiles or a phone number.
- Social Proof. Pieces of social proof like testimonials, reviews or features in other publications go a long way toward establishing your credibility and expertise. Consider including a few of them on the homepage and creating a dedicated page that will house all the current and future praise you'll receive.
- Call to Action. Finally, don’t forget that you need to make it crystal clear for your visitors what it is that you want them to do. Simply showing your services won’t do much to encourage them to actually book a call. Include several calls-to-action on your homepage and throughout the rest of your site that make it easy for visitors to take action.
Create Your Responsive Business Website Today
Creating a responsive business website is easy once you understand the parts that make up the structure of the template and how to find the information you need to modify. Use our tutorial to set up your business website, and don’t forget to check out our collection of responsive business HTML templates to find the perfect one for your site.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post