How to Build One Page Website : Tutorial for Beginners
One page websites are becoming a good alternative these days to conventional multi page websites. Website builder can be immensely useful in the building process of one page website with a matter of just few clicks and few easy steps to build single page website.
One page website, also known as single page website is quickly taking over the market. There are many existing factors behind it such as ease of use, being lightweight etc. The purpose of this tutorial for beginners is to share with you more such features of one page websites and I will also tell you to how to create one page websites using a website builder.
One Page Website: The Idea of Their Potential
Maria, a Portuguese girl in her early twenties, is very fond of reading fantasy novels, mostly written in English. Meanwhile she is pursuing a degree in Computer Science. She always knew that most of her friends are also interested in fiction and fantasy stories, but due to language barrier, they don’t read much of the novels. They generally listen to them from Maria in Portuguese, their native language itself. However, she wants to make her friends join her book reading league too. She is thinking to combine her technical knowledge and her idea, so that she can find a solution and make her friends to read those interesting novels on their own.
According to her curriculum, the next topic in her degree is web development. Here she is learning its many aspects, such as tools, components, types of websites and much more. Among the types of websites, single page websites attract her the most. An idea strikes her mind that these type of websites might bring a solution to her. So what are those features or points which have led Maria to think about this as a relatable solution? To explore this, let’s proceed with the article.
One Page Website: Features and Points
Maria has an idea of building a simple yet artistic website. This website would contain a glossary of all the typical English words translated to Portuguese. It would basically bridge the language gap. How the other advantages of a single page websites would be of her use, I would discuss further. First let us have a look on some of its key features,
- These sites can easily be developed with limited resources.
- Good loading speed due to less size and no issue of page refreshing(dynamic data fetching is used if needed).
- Easy compatibility across a wide range of devices- Responsive Web Design.
- Single page website display all the content in a single flow, reducing the hassle of being lead to a new page, thus making web surfing intuitive for the user.
- Primary navigation mode is simple scrolling which is generally liked by most of the web users.
- Time and cost effective.
Turning Features of Single Page Website to Practicality
You may be thinking that how will Maria build an actual single page website using these features? Well, She has already sorted it out. So let us know what all components she is planning to use in her website, and their relation with the features of one page website.
- A glossary which contains all complex English words translated to Portuguese. Scrolling is the most suitable way to navigate through such type of data. It is one of the key features of one page website.
- Most of Maria’s friends are used to access internet through mobile devices, however, some of them use desktops as well. Since she is developing a one page website, it will easily serve a wide range of devices. It also happens to be one of the features which she plans to use.
- What if there is a large, High-Quality image related to central theme of the novel, used as a background throughout the main page to enhance beauty? In one page websites, all of the content is present only on one and the main page, and that too in a single flow. Hence, using only one image as the background will add more creativity to the website.
- The key feature that Maria wants to use along with the above ones is the time and cost effectiveness of building a single page website. She wants to build the website in minimum possible time. Therefore, going for one page website would prove better rather than a conventional, multi-page website.
- Building one page website requires less amount of coding. Even Maria also wants to code less as she is still a beginner in coding. More coding might be messy for her.
Advantages of Single Page Website Over Conventional Websites
Apart from the features discussed above, there are some advantages as well which one page websites possess over multi page websites. They have been discussed as under,
- These type of websites suit the best when there is small amount of data because less data can be managed easily in a single page.
- Most of the internet users are on mobile phones these days. In continuation to the above point, less data can be arranged into a highly responsive content structure easily. Scrolling being the common method of navigation for small screens such as mobile phones, one page websites prove to be more advantageous in these cases.
- As soon as you send request to server, then in the case of one page website, all the resources are loaded at once with a single processing. In the case of multi page websites, distinct requests are processed for different pages. Clearly, processing of only one request leads to hundreds of other related requests(multiple pages are being loaded) in the case of multi page websites.
- Saving time by omitting the multiple page reloading process, eventually providing a pretty good experience to the user and a much improved performance.
- All the above advantages constitute to make up a better conversation rate. In the terms of one page website, conversation rate means more engagement with the user and better portrayal of information.
One Page Website: Build Your Own
Coming back to our main character Maria, as I already narrated that she has decided to make a single page website to implement her idea. She took this decision obviously due to some of the advantages as discussed earlier. She is a beginner in coding, so the less coding involved in the case of one page websites is advantageous to her. With a little more exploration about minimal coding while building a website, she gets to know about an awesome technique, which is using a website builder such as TemplateToaster. The part of coding can completely be removed if she uses a website builder instead of manually coding the website. Let us now quickly head towards how to build one page website through TemplateToaster.
One Page Website: Here are simple Steps to build single page website
TemplateToaster, a leading website builder in industry is a powerful and robust tool which has recently updated itself with this new feature, the ability to build a single page website.
Step 1. Converting your already built website to a single page website:
In TemplateToaster v8.0, you can find an option,”Convert to Single Page Website” at the right most of the toolbar under the General tab. Once you are sure about all of your changes and your site seems ready, you can simply click on that button. A prompt will get displayed asking if you are sure to convert it, and if you are, then click yes. All the contents of your website will then be displayed in one page only, which will be the main HTML page. You will now be able to view all your content in a linear top to bottom way.
Step 2. Adding new rows/columns:
To add a row or column to your main content, select “Content” tab among the options displayed in the menu bar, on the lower sub bar, you will find 3 sub-sections namely “Main”, “Row”, and “Cell”. Among these, “Row” and “Cell” will have a plus and a minus button each. Clicking on plus/minus will add/remove the number of rows/columns respectively. The row can also be added as a menu item by checking the “add to menu” checkbox. The title and the anchor can be given in the fields provided below the checkbox, named as title and anchor respectively.
Step 3. Editing rows/columns:
By editing, we mean to make changes to the already added row/column. Clicking on edit row in the row tabs will lead to a prompt. It will provide you with some option that will be used in the similar manner as explained in the previous point. Title of the menu item can be added/removed or edited through the same prompt. You might find a need to make edits regarding the number of columns. You can use plus/minus sign in the “Cell” sub-section in that case. This is illustrated in the screenshots very well.
In nutshell : How to build one page website
Maria’s friends have a good command on basic English. But they were always away from the experience of reading any novel on their own. Now with the help of Maria’s single page website as a guide, her friends can try any of the novel. The glossary will provide them the translation of the complex English words. Everything from the glossary, to the summary, images etc will be on one page in a sequential manner. With this, her website will be more engaging.
So you saw how the idea of single page website became of great advantage to Maria and her friends. Using a website builder such as TemplateToaster instead of coding the website manually herself added a cherry to the cake. Website building was never so much fun without TemplateToaster.