top of page
  • Writer's pictureHayley Burtt

How To Effectively Design A Scroll Website - 8 Top Tips

Here is a guide to our 8 Top Tips on how to create an engaging, user friendly and easy to navigate Scroll Website.

female founders summit scroll website
Female Founders Summit

So many people nowadays opt for a scroll website when creating an online presence for their brand. Often I hear the word “simple’ when referring to scroll websites, and although yes they can be in the sense that there are not layers and layers of content pages, they can still offer lots of clever functionalities and offer a really dynamic and nice experience for the user to navigate.

But creating a scroll website needs to be thought through as lets face it, no one is going to scroll through endless amounts of text. Instead, you need to display your content and your key messages for your business in a creative way. Having had experience in building several scroll websites for my clients I thought I would share with you my 7 TOP TIPS to designing a scroll website:

1. Subdivide Content Into Logical Blocks:

Firstly write down everything you want your website to cover. For example a basic format may be; Banner with core message/company motto, Who You Are (About), What Your Do (Services), Why You Do What You Do (Your Experience/Why) and How People Can Get In Touch (Contact). Thinking about all of your information in logical blocks is a great start for building a scroll website.

2. Less Text – Keep It Punchy

Gone are the days where websites are just pages of long form text. Don’t get me wrong there is still a place for including this type of information but it can be displayed cleverly. For example, if you write lots of long articles and posts, nowadays typically we would include this in a ‘blog’. A blog is usually laid out by initially offering the reader a heading, short description about the article, an image and then a ‘Read More’ click through that opens up to show the whole content. With your scroll website try and keep each section to a few key paragraphs of information. If you have to include more and can’t break up the text, consider using pop up light boxes or drop down menus.

3. Use Images & Icons To Break Up Space

Whilst writing your copy for each of the sections you have identified think about what text could be displayed in a different way rather than in standard paragraphs. For example, maybe you could use bullet points or icons to break it up. Not only is this visually engaging, often it gets your message across to the user more clearly and effectively.

4. Try To Use Different layouts

When building the sections of your scroll website be creative with the layouts. As well as breaking up the text with images, graphics and icons, go even further and think about how they can be displayed. For example you may have a 4-column layout in one section with an icon and short paragraph of text in each column and in another you may have a 2-column layout with an image and then straight text. The options are endless and although you don’t want to overwhelm the design and make it over complicated, a few alterations can really help bring the overall design to life.

5. Think About The Journey Of The Website

When a customer clicks on your website, what journey are you trying to take them on? Think about how you will layer your blocks of information. For example it would seem logical to start with a banner explaining what you do, maybe offer the information about who you are followed by the services you offer. A bad example would be to start with the ‘Contact’ layer, followed by the ‘About’ and ‘Services’. Why would anyone want to contact you straight away when they don’t even know what you offer?

6. Include A Menu Bar In The Main Header with navigation anchors

With a scroll website you can still have a navigation menu in the top header of the website. The header is normally where you include your company logo, social media icons and maybe a call to action such as a subscription form or contact info. With a scroll website although you don’t have pages to navigate, you can use ‘Anchors’ to link the page text in the navigation bar to different areas of your website. In simple terms, you would add an anchor to the top of each section/block of information so that when the user clicks on the ‘About’ tab for instance, they will automatically get taken to this section of the website.

7. Have Clear Call To Actions

Make sure that throughout your scroll website you have clear call to actions. It may be that you only want people to complete a contact form, even so feed a “contact us” button a few times throughout the website or where it feels appropriate.

8. Include A ‘Back To Top’ Button

Scroll websites can be quite long so a great little tool is to add a ‘Back to Top” button that helps your users get back to the top of your website quickly and easily.

6 views0 comments


bottom of page