Having a website is beneficial for both personal and business use. However, creating a complex, multi-page is not always necessary.
One of the latest trends is to create a one-page website. Its simplicity makes it much easier to create, navigate, and maintain.
Sure, it’s a trend but it looks like it is one that is here to stay. The one-page website or single page website became popular with the onset of mobile browsing.
A website, one page long but with infinite scroll was much more user friendly for mobile than constantly tapping on tiny links and buttons to navigate.
Now, as web development looks to continue to merge the mobile and desktop experience. The one-page website is only going to increase in popularity.
If you want to make sure that your website stays up-to-date with the most current trends it is time to consider scrapping that old-school landing page and learning the art of parallax effects.
If all this sounds a little confusing, then hop on board as we guide you on how to create a one-page website from start to finish.
How to create a one-page website
So, you want to create a one-page website.
Great, but before we get into the ‘how’ of it all. We should really stop for a second and think about the ‘why.’
Creating a single page site is relatively easy but if you only want to do it because it looks good then you should give a second thought to whether or not a one-page website actually suits your needs.
In this article we’re going to dig a little deeper into the one-page website trend by analyzing each of these ten topics:
- Decide if a single page site is right
- Planning your content
- Pick your template
- Dividing it up
- Learn some basic effects
- Designing for user experience
- Getting your point across (don’t get lost)
- Plan for SEO
- Cross-platform functionality
1. Decide if a single page site is right
There are really only two options when designing a website: one-page or regular. While the one page is a little bit more en vogue it is the features that should make your mind up.
Your choice should be based on your business. What does your business need? What are the priorities for your business? Are one-page websites useful for your business?
Before you create a one-page website it is good to know the pros and cons. A one-page website often favors a bold design. Sites typically make use of little text and instead have a heavy reliance on imagery. The one-page site follows the current trend for bold, oversize elements partnered with generous amounts of white space as a method of really highlighting calls-to-action.
Putting all your content on a one-page site means that you are in control of the order that a user views your website. As such, it gives you space to really prioritize the most important parts of your narrative. It is a great option for mobile websites and requires little maintenance once up-and-running.
One page websites are particularly useful for businesses that only require short form copy. They are particularly popular as freelancer websites, photography portfolio websites, and wedding websites.
A regular website is the kind of site that you have been visiting your whole life – it has a home page with links off to other pages, such as a contact us page, where you will find contact information and a contact form to enter your email address.
This is the standard website format and it has been around forever. However, it is becoming less popular as people are streamlining the amount of information that they put onto their websites in order to give people exactly what they need – no more, no less.
It would make sense to choose this format if your business requires eCommerce. An online shop will require a page of its own. Or, for example, if your business needs a blog. These pages would have to be indexed and as such your business should follow a regular website template.
2. Planning your content
Obviously, you should always plan regardless of what type of website your business needs. But, if your website is going to be a one-pager then it is imperative.
Why? Well, your user is going to experience it in a linear fashion. That means that as they scroll they will move from one to the next to the next and it is your job to make this journey as cohesive and intuitive as possible.
Start by defining your messaging in terms of importance. When a user hits your website you have got a screen’s worth of space to get your key messaging across. If you don’t get that right then no-one is going to keep scrolling to see the rest.
After that, you need to think about the essentials. Every site should feature an ‘about’ and a ‘contact’ section. But, what about lead generation? Where is the contact form? Where can the user input their email address? These are all essentials for your business.
Then it is time to consider your business specifics. Photo galleries and customer testimonials are common features of a single-page website. More than anything your website needs to make a strategic focus on your CTA (call-to-action). A single-page website is a great way to cut out the distractions and focus the user on your CTA.
Understand your priorities. Keep it streamlined. Less is more. A single-page website needs to be two things: simple and organized.
3. Pick your website template
It’s time to choose a template. This step is particularly important for business websites as choosing the wrong template can negatively affect user experience and SERP rankings and all the google analytics in the world won’t save you.
Here’s what you need to consider when choosing the right template for a one-page website:
Different types of sites require different approaches in presenting their content. A business website cannot reach its full potential with a blog template.
Zyro tailors various niche-oriented website templates to meet all types of websites’ needs. A fashion pop-up store, a startup company, or a catalog — you’re sure to find a template that fits your business like a glove.
Responsiveness and browser compatibility
At Zyro, we understand the importance of mobile users, so all of our designs are responsive and look great on every browser and device.
Our collection of website templates is accessible via Zyro’s Templates menu. Feel free to explore what each template has in store by hovering your mouse over the template and clicking Preview.
After you find the right design for your site, click Start Building.
4. Dividing it up
Once you find the right template, it’s time to customize it. Not to worry — Zyro’s website builder is easy to use even for beginners with no technical experience.
The drag-and-drop editor allows you to easily reorganize all elements. Combined with a grid system, you’ll get a smooth editing experience and a clutter-free result.
When editing a template, you need to think about the user’s journey — good design needs to enhance navigation and reading experience.
While you can experiment with the content placement, don’t go overboard. Putting the navigation bar at the bottom of the page might seem artistic, but it can get annoying pretty quickly if a user has to scroll far down to reach it.
And if you don’t know how to plan out your content placement, Zyro’s AI Heatmap is ready to help. Simply upload a screenshot of the site you want to map out and the AI will generate a heatmap showing which content potentially gets the most and least amount of attention. You can use this information to highlight the content you deem important and remove distracting elements.
5. Learn some basic effects
One effect that is particularly popular on one-page websites is something called parallax scrolling. Not only is parallax scrolling a good way to liven up a website, but it is also reasonably simple to implement.
The reason that so many one-page websites use parallax scrolling is because having everything on a single page can seem a little flat to the eye.
In a nutshell, parallax scrolling gives the appearance of depth by applying a different scroll speed to the foreground and background elements on a website. It is a kind of 3D illusion that will make your landing page pop.
It is an easy-to-use effect that can really up the professionalism of your website and it is a feature that your website builder will usually include.
Adding these small animations to your one-page site is a proven technique to improve user engagement and helps to ensure that a user will make it all the way to the bottom of your sites.
Just because your business is using a one-page website doesn’t mean that the user always has to scroll to get to the part that they want to read. Your one-page website should also make use of linking.
In practice, this means that you’ll want to create an anchor menu on the first screen of your single-page website which people can use to navigate freely between your sites’ screens.
On a one-page website, you’ll need to add links to other sections of the same one page, as opposed to the standard practice of linking-out to different pages.
One-page websites do this by defining sections of the page by placing ‘anchors’ at various places as the user scrolls. It is good practice to also create visual diversity between your anchors. Adding a different background image is a good way to let users know that they are in a new section.
Your website builder will usually have built-in anchors for sites that are designed to work on one page. Since one-page websites usually involve lots of scrolling it is a good idea to fix your menu to the top of the page so that it is always visible for simple navigation. You can do this by adding the menu to the header of the website and selecting the option to ‘freeze header.’
7. Designing for user experience
You’ve probably heard a lot about user experience or UX by this point. And that is because it is being recognized more and more as a vital aspect of the web design process.
While it is always important no matter what, it is something that your business should really give some serious thought to if you want to create a one-page website because these kinds of sites are not the norm. Without careful planning, it can be confusing to the user.
Your one-page website should be an enjoyable experience and not a chore. Your website builder will allow you to create useful functions such as a ‘back to top’ or ‘subscribe’ button that will immediately bring the user to the right section of the one-page site without the need for a whole lot of unnecessary scrolling.
8. Getting your point across (don’t get lost)
Since one-page websites only have a single page to work with, you need to take the time to consider the flow of your content.
The last thing you want is to jam every piece of information into one-page and send the visitors to hunt for the information they need. Your one-page website needs to effectively draw user attention to the most important aspect of your website.
In practice, this means getting strategic about your CTAs (calls-to-action). A CTA is a button, link, image, or short phrase that motivates a user to take an action. You want to place it in a prominent place – probably the first screen of your one-page website rather than letting it get lost somewhere in the scroll.
Your call-to-action will likely link to a later section of your website. On a one-page site, the CTA will often work in conjunction with the anchor menu that we discussed previously.
Create a CTA button and link it to an anchor further down your website to ensure that a user is interacting with the one-page format as effectively as they would a standard website design.
Since your one-page website is unlikely to deal with eCommerce, typical CTAs would be ‘subscribe now’ rather than ‘add to cart.’ It would be unusual to find a website builder that could accommodate properly integrated eCommerce on one page – whereas adding a sign-up form is easily done.
Be sure to also make good use of headers and footers. Since it’s the first thing that your audience sees when visiting the site, the header has a vital role in encouraging visitors to explore the site.
Footer is no less important — it serves as visitors’ last push to complete specific actions such as signing up for a newsletter or making a purchase.
Just like any other business, your site won’t take off unless you promote it. Headers and footers are a great place to add your social icons and make sure that they stick to the page.
9. Plan for SEO
Search engine optimization (SEO) is an essential aspect of every website. Especially business websites. In essence, SEO is the act of tweaking your website so that it ranks higher in the search results and therefore brings more traffic.
One page website or not – it needs to be high on your list of priorities.
To rank high in SERP, every part of your site needs to cater to preferences set by the search engines — your website template included.
Complicated design and crammed content will only distract the audience from exploring the website and make their visit feel useless. Worst-case scenario, it can harm your bounce rate and SERP rankings.
The beauty of one-page websites lies in their simplicity. Be selective of the information and elements you want to include on the site.
With Zyro website builder, all of our templates for your new one-page website or regular website are designed to be SEO friendly. It only takes one moment to make a website with Zyro and soon as your website is live it is already indexed with Google and ready to climb the rankings.
10. Cross-platform functionality
One of the most important aspects of modern web design (and the one that inspired one-page websites) is cross-platform functionality.
With Zyro website builder, all of our website templates are designed to look beautiful on mobile, desktop, and tablet.
One page websites are particularly good for mobile as the user doesn’t have to navigate by virtue of a series of links that can be incredibly annoying to find on a 4-inch screen.
More than half of all web traffic comes from mobile devices these days. As such a one-page website can be a great way to make the best of both worlds and really corner the market.
One-page website inspiration
Outside of our website builder, we have collated a selection of the most inspiring examples that could improve your one-page website:
On this one-page website, the travel company KRO has made inventive use of the cursor, prompting the user to scroll if it is not apparent to do so. Notice the minimalist design that is very common on one-page websites.
On this one-page website for cell-phone service provider Three, the web designers have made use of 3D renders and have locked the anchor menu to the top of the page.
Moma – the world-famous art gallery in New York – also use a one-page website. Take note of the locked anchor menu in the website header.