At the end of 2013, Apple released the iPhone 5S, which was accompanied by a presentational single page-scroll website. This was a welcome change for many web developers and designers. In turn, 2014 saw a rise in these types of sites where information was divided into sections and default scrolling was replaced with a custom scroll where visitors could only scroll from section to section. In this way, websites become like short plays – you could direct every scene, each differing from the next, and you wouldn’t risk users skipping or missing any of your content.
We helped Monotype introduce book-style chaptiers on their homepage -- also known as single-page scroll.
At Devbridge, we’ve tried to implement both of these plugins, but each time we’ve encountered some kind of problem. We decided to write a new plugin that would satisfy our needs, as follows:
- Be lightweight
- Have a simple markup
- Have possibilities to enable/disable actions (public methods)
In this article we will review what are most important points to remember when writing and and implementing single page scroll plugin.
The very first thing to remember when designing this type of website is that it’s sort of like designing PowerPoint slides. There shouldn't be too much different information in one section. Sometimes, even a single image can provide more valuable information than a few sentences.
From a technical standpoint, it is important on page load to disable the scrollbar. This way, the user won’t jump to a random section before the plugin initiates, thus preventing the plugin from calculating the position incorrectly.
Single-page scroll works by removing the default scroll behavior, so you must provide the user with alternative ways to get from one section to another. There should always be visible navigation in each section, which upon clicking allows the user to jump to another section.
Do not limit the user to only one type of scrolling:
- Use keyboard inputs (remember to check if these are not form inputs)
- Add custom mouse wheel actions
- Add touch gestures
Remember to add a timer between scroll actions so that the user can’t jump over all the sections in one scroll.
Generally these types of website have full screen background images. To have an enjoyable user experience I recommend preloading images by one of these two ways:
- On page load by reading CSS file and filtering images and preloading them. In this case you should have separate CSS file for this page causing an increase in page load time but having a continuous experience after it.
- Before moving to a new section by finding images in the section and preloading them. This allows faster page load time and will save network bandwidth but on scroll between sections there may be small image flickering.
There are always situations when you need to call action outside of a plugin or disable some kind of action, i.e. if there is a modal window in one of the sections. In that case, you may want to disable keyboard actions to prevent overlap. For these purposes, a plugin should have public methods:
- To init/destroy plugin
- To move up and down or to a custom section
- To bind/unbind navigation actions (mouse wheel, keyboard, touch gestures)
From our experience, we can say that if you’re starting from a small tablet or mobile device, it is better to disable the plugin and have default scrolling. Mobile devices have different scrolling methods than desktop views.
You have to remember that in this type of website, it is very important to not only test on different screen resolutions but also with different height and width ratios.
Single-page scrolling is a great solution if you want to tell a story. Remember, you don't have to try and put your all of your content into just one page. Instead, just select a single piece of content and divide into consumable points that you want the user to take away. So try our open source jQuery-BetterScroll plugin for your next project!