How to Design a One-Page Website People Will Actually Visit

Published in

Wix.com

11 min readAug 8, 2018

Trends. They’re everywhere. Some may seem absurd — think of Mean Girls’ Regina George and her cut out top. However, other times they make total sense. Think: mom jeans.

In the world of web design, one-page websites are one trend that’s growing due to its functionality. In essence, it’s a site that presents all of your content onto one long, scrolling page. Rather than distinguishing a homepage from the other pages, content is split into different sections using strips. Here, the menu items link to each of these sections instead of separate pages.

When creating a website, more and more web designers are following this one-page trend. Why? Because it’s simple, clean and offers quite an impressive design. In this guide, we’ll explain why and how to create a one-page website for your business:

01. Decide if it’s a proper fit for your business.

There are two main schools of design: the one-page and the classic. Depending on your type of business and what features and priorities you have for your website, one might be a better fit than the other — it’s worth weighing out your options.

A one-page website has a strong design that’s both minimalistic and organized. It’s typically more image heavy accompanied by a small amount of text. The overall long scrolling design makes it easy to get creative while crafting a story where you have full control over what order viewers see your content in. The layout enhances a user’s experience by allowing them to consume your content in a very linear way instead of getting lost in multiple pages. The format is well adapted for mobile sites and tablets, too. A one-page website is also easy to maintain and requires fewer resources than a classic website. So after reading about this website trend, you’re probably already envisioning yours in this grand format. But first, you need to ask yourself, “is it a good fit for my business, specifically?” From the most creative to more traditional businesses, this format has the potential to look amazing. If you have short form content, like a landing page, a freelance website, photography portfolio, a wedding website or any event-related website, then it’s worth considering.

A classic website is what most people think of when they envision a site — there is a homepage accompanied by other pages, such as a contact page, a service page, and an FAQ page. Basically, the main reason to choose this design format over a one-pager is if you have tons of content that is absolutely necessary to include on your website — such as one that requires multiple pages to sell a variety of products or services. This is because you can organize each piece of content into its own page of your website and provide long and thorough descriptions. For example, if you have a blog, it’s wise to use this to allow a user to easily browse through your articles individually.

02. Device a plan for your content.

If you’ve decided that this format is the perfect fit for you, then you can get started with crafting your beautiful one-page website. First, you need to lay out all of your content strategically. Creating a one-page website is the perfect opportunity to control the order of how your site is viewed, so make sure that it’s logical and intuitive.

Begin with a hierarchy where you imagine your visitors’ journey through your site. They first need to be enticed by the main message that you want to convey from the get-go — in other words, what you want to place ‘above the fold’ (i.e., what a viewer sees before scrolling down your website). For every website, you’ll need an ‘About’ section and a dedicated area to display your contact information. What comes in between can include your offering, a CTA, a meet the team, services and products, testimonials, FAQ section, and a photo gallery — depending on what information you want and need to provide. Prioritize the order of your content as this will prove extremely important later on. Also, remove any extraneous information — with words, less is more here in terms of strong design. Overall, your plan should be to keep things as organized and simple as possible.

03. Choose a website template.

Once you’ve devised a plan for your content, you’ll need a template that sets you off on the right foot by including all the elements a one-pager website needs, like an anchored menu, strips and columns, a social bar, a rich footer and more. There are hundreds of fully-customizable one-page website templates created by our designers and available for any kind of business. The fantastic thing about these templates is that you can change everything from the header right down to the footer, to customize and make it completely yours. Let your creative imagination flourish with these endless possibilities!

04. Break up your content into sections.

Now you’ll need to take your organized content and display it on your website by using strips. To add a strip to your site:

Open the Wix Editor
Click “Add” from the main menu
Select “Strip.”

Here you will find pre-designed, fully customizable options to choose from. For each strip, you can add text, videos, images, a contact form, testimonials and more. Add as many strips as you require and then arrange them in the order you want to present your content. Traditionally, you’ll want to start with the ‘About’ section and work your way down ending with a rich footer that acts as your ‘Contact’ section.

05. Add a relish of parallax effects.

Another popular web design trend that’s eye-catching and engagement boosting is parallax scrolling. This is an effect that creates a 3D illusion on your website with the different strips you’ve added in the previous step. It does so by moving the layers in the background and foreground at different paces as the user scrolls down your site.

As one-page websites may seem slightly one dimensional, adding an effect like parallax scrolling gives your site that extra punch it needs. To create parallax effects, you can add subtle animations to your strips in the editor, like zoom in, reveal, and fade. This is one surefire way to get your site visitors to scroll all the way to bottom.

06. Build an anchor menu to link to each section.

You’ve heard of site menus before, but this one is slightly different than what you’re used to. With a one-page website menu, each item (which is anchored) links to a different section of the same page, rather than a page of its own. But first, you need to define these sections by implementing the so-called ‘anchors’ exactly where you want them. There are three mandatory and important steps to create an anchor menu and achieve an organized one-page design:

Add an anchor. This makes it easy for users to navigate to different parts of your single page website by allowing them to go straight to a particular section. Many templates already have anchors built in, but you can rename, move or delete them at any time.
Link your site’s menu to the anchor. This allows users to go to a particular section of your page from the menu. When anchoring, you should select the corresponding section to attach your anchor to. In other words, the title that you choose to give each anchor will appear on your menu list — thereby playing an important role in clean navigation.
Create order in your menu. The order in your menu needs to correspond to the order of your sections for ease of scrolling and friendly navigation. For example, if you have a horizontal menu, the first item on the menu (‘About’ ) should align with the first section (also, “About’), and so on. Since one-page websites usually involve long scrolling, you should keep your menu visible at all times on your site by freezing it. You can either create a floating anchor menu or, if your menu is in the header, you can switch on the ‘Freeze Header’ button to glue it to the top.

07. Make it easier for users to scroll through your website.

In the long format of a one-page website, users may become so consumed with your site that they may find themselves scrolling and scrolling, eating up all of your captivating content along the way. To provide your website visitors with a hassle-free experience, simply add a back to top button to allow them to reach the beginning of your website with just one click, instead of endless scrolling. This button remains in a fixed position on your website so that it’s visible when a visitor scrolls to the bottom.

08. Implement a strong CTA.

Since all of your content is presented in one place, there needs to be something that draws in the user’s attention to your main priority — sign up for your newsletter, request a quote or book your services. This is where a CTA (Call-to-action) comes in. It’s a short phrase that prompts your online audience to take immediate action. It should be placed above the fold on your website for the best visibility, making it a great opportunity to send viewers to a later, high priority section.

To do so, you will anchor your CTA button similarly to how you linked the different sections in step six. After adding a button from the editor, connect your CTA to an anchor to allow visitors to navigate to a particular section. For example, if the CTA says “Contact Me,” then you can anchor it to your “Contact” section.

09. Include a rich footer.

A footer is the area at the very bottom of your website. Most people navigate to here when they are looking to find important information, like how to contact a business. This is why it’s crucial that yours contains up-to-date contact details, links to your social sites, operation hours, a privacy policy, and terms and conditions. If you have a physical store location, you can add a map to the footer as well.

10. Incorporate your social media accounts.

It’s important to seamlessly connect every aspect of your online presence together. One way to do that is to connect your Facebook, LinkedIn and Instagram profiles with your website. Why? Because you want to draw as much online traffic as possible to your site. There are a few ways to incorporate your social media on your site to get more clicks and make it truly stand out:

Add a social bar to your website. This is a place that contains icons for all social accounts where your business is present. When you create a social bar with Wix, you can choose from several design options for the social media icons. All you need to do is choose one of them and add links to your different pages. To make sure that users always see this element as they scroll through your site, right click on the element in the Editor and press ‘Pin to Screen.’
Add your Instagram feed. Why not give your Instagram feed even more exposure by incorporating it into your website. It’s also a good way to provide users with current photos of your business and whereabouts. When you add an Instagram feed, you can design it to your liking by choosing from one of the many custom layouts to display this information.

11. Keep SEO in mind.

Search engine optimization (SEO) is an important element of every website. That’s the case for every site that wants to be seen in the World Wide Web. It’s the practice of optimizing your site so that your page ranks higher on specific keyword search results — hence, drawing more traffic and potential customers to your website.

Begin by making sure that your website is indexed on Google (a.k.a. saved in the database). Luckily, your Wix site is already visible on Google within seconds after creating it.After indexing, make your website stand out by targeting the correct keywords. If you have a Wix Website, your job just got much easier from here! Wix SEO Wiz guides you through the process of what you need to do by creating a customized checklist, from offering keyword recommendations to a full, personalized SEO plan.

12. Make your website mobile-friendly

Browsing the Internet through a smartphone rather than a desktop is starting to become the norm of today. This is also why websites are now being ranked in terms of SEO by their mobile version, first (see Google’s Mobile-first index). What does this mean for your website? Simply put, it needs to look just as good and be just as functional on mobile as its desktop version. Considering the fact that readability and navigation are important in this process, you’re already headed in the right direction by choosing to create a one page website. Also, there’s more luck headed your way if you have a Wix Website, as there’s an automatically produced mobile version of your site that looks great on any device.

Just go into the Editor, switch to the mobile Editor, then preview your mobile site. One added tip to make your mobile site even more easy to browse through is to install a quick action bar. Since the social bar doesn’t appear on mobile sites, this acts as a great alternative to trigger readers to search for any information they may need, such as your contact info.

One page website examples for your inspiration:

If you’re wondering what an intuitive one page website looks like in its final stage, look no further than these three Wix users sites. They are overflowing with inspiration for you to use when creating your very own website.

Brave Women’s Conference