Today, creating a simple one page website is one of the most efficient ways to get one’s name (or, to be exact, one’s commercial business’ name) on the map of the world wide web and its territory. These types of websites are relatively cheap, and don’t require the connection of payment gateways, APIs or other advanced features. It is, usually, enough to think through the design and hire good copywriters who can get you top content for SEO enforcement.
The latter isn’t difficult to accomplish (as you probably know, popular search engines are becoming more focused on ordinary users instead of search robots; that means, if you find a literate person who is able to effortlessly and concisely express their thoughts in writing, then you’ll probably get the most efficient copywriting service for your business), but everything about the design must be much more integrally developed. Why?
The thing is, images and videos attract people’s attention more prominently than ordinary typed text. This means that you’ll waste the talents of even the most talented writer if you neglect the design aspect.
Want to create an awesome single page web design? Easy! In this article, we review the important question of ‘How to make a single-page website?’ as well as present a small one-page website tutorial to help you outrun all your competitors with your project.
In order to answer the question ‘How to build a one page website design?’, we’d like to present you with an efficient manual. It consists of nine tips, in total, by following which you can create a single page website design that will amaze your web visitors.
Obviously, the first thing we see when we launch any website is the homepage background. If around 5-7 years ago, web-developers had been choosing the most neutral images or single-tone wallpaper, today, be it a weight loss site or an ICO resource, something more active is preferred. Surely, the background mustn’t intercept the rest of the content.
That’s why the best decision here would be either a pastel-toned image or a grey-shaded image (for example, a themed black and white photo). Try not to use animation as a background if it isn’t necessary, since it doesn’t always load properly in all browsers, which can significantly slow down the whole site’s performance (we don’t need that, do we?).
Forget about the bold, garish fonts featured universally on sites created in the 90s or early 2000s. Minimalism has been a major trend for a number of years now. Look at the design of any iOS application. It is, arguably, considered to be essential to the web and mobile development niche. As for the color scheme – it must harmonize with the background. Also, keep in mind that many displays might distort shades, so the brighter shades might look neon for some users (a type of shade which isn’t perceived well by our eyes).
Now then, a few words about navigation. The goal is to provide intuitiveness of navigation, which is not difficult to do. You just need to subdivide all the content into several logical blocks, place the navigation menu at the top of the page (for instance, in the header), and make sure that one is able to get somewhere (by automatic scrolling) by clicking some of the menu items. In practice, this feature can be realized with the help of the JQuery JS library. A particular case of such automation is well described on GitHub.
Pay special attention to scrolling. Apart from the most standard type of scrolling – top to bottom -, there are also ways to scroll automatically to the middle or even the end of the page. We wouldn’t argue over the practicality of these methods, but we can say that scrolling can be unusually organized in more traditional ways: for example, by making a parallax effect.
In this method, you basically make the background image move more slowly, as opposed to the forefront elements – i.e. it changes its position more smoothly as the scrollbar moves up and down (the forefront elements are, usually, buttons and text blocks). This is achieved with JQuery; however, such an approach can negatively affect the site performance and, in many cases, it is much more rational to build this feature in CSS, as shown here. Also, you can try employing horizontal scrolling instead of vertical. Detailed descriptions and codes required for the implementation of this effect can be found here.
If you are creating your single page website using a readymade CMS like WordPress, there mustn’t be issues with adapting it to the mobile version. Another option is to decide to build a single-page website from scratch, based on a custom engine. In this case, you’ll have to create an adaptive design that will automatically scale in accordance with the displays of using mobile devices.
Conversion rates may be affected badly if a single page website features too many text blocks. The thing is that the single page format, in itself, implies as brief a chain of actions from the user perspective as possible: visit -> realize that you need it -> buy it (or execute some other action, implied by the site owners’ call to action).
If during the second stage, you bombard a user with tons of text to read and waste their precious time, they might as well leave the website early on. Place only the information that leads directly to the CTA button, and present it briefly, subsequently, and comprehensively. Create a separate blog if you have a lot to tell your users. You can place a link to it in a visible place – e.g. in the contact block (which we’ll discuss shortly).
One of the crucial things is the development of a working CTA. Let’s define what CTA is, for starters. It is a graphical element that motivates or encourages site users to perform certain actions, for instance: buy, download, subscribe to a newsletter, etc. In simple words, a CTA must directly tell a user what to do and what is expected of them from the webpage owner. The employment of such elements increases sales rates and provides good product promotion.
In order for your CTA to be working and efficient, it must:
Let’s pay separate attention to the CTA content. The requirements are as follows:
It is very important that a user is able to effortlessly find any information related to your contact data on the site. For that purpose, we strongly recommend putting all the phone numbers, addresses, social media links, and blogs in a separate block, usually placed at the top of the site (or pointed at by a button situated on the homepage, as shown above).
Unfortunately, some web-developers neglect this piece of advice. As a result, site users must scroll all the way down to the bottom of the page, which can be pretty cumbersome (especially, when a page features many media components that can load badly in browsers with low-speed Internet connections).
Due to the fact that most of us best perceive information visually, it’d be much more reasonable to enrich your website with media data instead of interspersing it with dry text throughout. Add animations or videos. The latter are especially popular as they, usually, clearly demonstrate the most impressive features of your product.
Now, in order for you to understand clearly how proper implementation of all these tips looks in practice, we present to you our top six single page site designs, which are the most relevant for 2018.
Let’s begin with a resource dedicated to a brand that manufactures premium hair care products. The first thing that strikes the eye is a slider at the top of the screen, which graphically demonstrates the advantages of the presented products. A product assortment is placed below.
Below that, you can see the covers of the magazines where this trademark has been mentioned, as well as presentable photos of the salons where the products are sold. The end note is one of the most winning ways to gain trust – photos of Canale leaders. Also, this site employs autoscrolling. You are automatically redirected to the respective place on the page when clicking any of the menu items situated in the site’s heading. All in all, the developers did a great job with this one!