{"id":139763,"date":"2021-09-10T13:23:00","date_gmt":"2021-09-10T18:23:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=27237"},"modified":"2024-02-28T15:00:37","modified_gmt":"2024-02-28T21:00:37","slug":"users-scroll-through-your-entire-site","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/","title":{"rendered":"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design"},"content":{"rendered":"\n

Once, long-scrolling sites were deeply unpopular. Websites were all about the concept of \u201cabove the fold,\u201d a term named for the important content that appears above the physical fold of a newspaper. <\/span><\/p>\n\n\n\n

Today, the opposite is true. There\u2019s little sense of a \u201cfold\u201d anymore\u2014with such a huge variety of screens, ranging from the smallest mobile to the largest desktop, one fold isn\u2019t necessarily the same as another. And it certainly differs as I switch between devices. <\/span><\/p>\n\n\n\n

But thanks to the popularity of mobile devices and social media sites, scrolling has become second nature to most of us. Just because users absentmindedly scroll up and down pages, however, doesn\u2019t mean designers should take this for granted. With users overwhelmed by content and battling an ever-decreasing attention span, designers need to learn new rules to ensure that long scrolling engages users and entices them toward a conversion. <\/span><\/p>\n\n\n\n

1. Start Strong<\/b><\/h2>\n\n\n\n

While the concept of placing your most important content \u201cabove the fold\u201d is largely defunct, you still only get one chance to make a good first impression. When landing on a site, users will make a split-second assessment of whether it\u2019s worth hanging around. So you need a strong introduction to hook them in.<\/span><\/p>\n\n\n\n

Place your most compelling content at the top of the page and offer them a good reason to keep on reading.<\/span><\/p>\n\n\n\n

2. Create Engaging Content<\/b><\/h2>\n\n\n\n

Luckily, a long-scrolling site is the perfect canvas for storytelling. When creating your content, think about the beginning, middle, and end of your story, be it a sales page, about page, or product\/services page. <\/span><\/p>\n\n\n\n

Sprinkle the content with relevant, high-resolution images, videos, and infographics, and write enticing copy using action verbs to capture people\u2019s imaginations and keep them moving toward the end. Consider how authors use chapters to draw readers through a story and employ the same techniques at the end of each block of content.  <\/span><\/p>\n\n\n\n

3. Get Clear on your Goals<\/b><\/h2>\n\n\n\n

A long-scrolling site shouldn\u2019t feel like it\u2019s never-ending and rambling. Before you start to think about the design, you need to consider what your main goal is for that page, and ensure every single piece of content you include is geared toward nudging your users in that direction. <\/span><\/p>\n\n\n\n

This means you should think about including CTA buttons in several locations down the page. Remember, not everyone will scroll to the bottom. <\/span><\/p>\n\n\n\n

4. Avoid the False Bottom<\/b><\/h2>\n\n\n\n
\"blank<\/a>
Blank Canvas<\/a> created by Wholegrain Digital<\/a> uses parallax scrolling to avoid a false bottom effect<\/figcaption><\/figure>\n\n\n\n

The \u201cfalse bottom\u201d is when people think there\u2019s nothing else on the page and stop scrolling. While you want your prime content at the top to hook them in, ensure you include a visual cue that makes it\u2019s obvious there\u2019s more good stuff if they scroll on. <\/span><\/p>\n\n\n\n

There are several options that accomplish this easily, such as an arrow or a simple text instruction to \u201cscroll down.\u201d If you want to get more creative, you could opt for a design cue, such as a line that leads down the page drawing people\u2019s attention with it, or arranging content in an editorial-style layout avoiding hard lines so the scroll becomes natural. <\/span><\/p>\n\n\n\n

5. Provide a Clear Roadmap<\/b><\/h2>\n\n\n\n

Navigation is one of the biggest make-or-break elements of a website. Especially on a long-scrolling site, where user disorientation can happen Users need to know exactly where they are on a page and have a clear path to wherever they want to go next. <\/span><\/p>\n\n\n\n

Sticky navigation is a great option, as it shows the current location and remains visible at all times. This can take up prime screen space on mobile devices, however, so you may opt to hide the navigation bar when not in use. <\/span><\/p>\n\n\n\n

If your page is particularly long, you may choose to include a jump-to option or consider a different URL for different stages of the page. Whatever you do, ensure that the back button works properly, so if people follow a link away they will return to the same part of the page they left.<\/span><\/p>\n\n\n\n

6. Delight People with Creative Interactions<\/b><\/h2>\n\n\n\n
\"the<\/a>
The Shift<\/a> makes the scrolling experience fun and unique for their viewers<\/figcaption><\/figure>\n\n\n\n

Long scrolling lends itself to immersive storytelling, so including creative scrolling techniques such as parallax scrolling or scroll-triggered animations is a fun way to engage users and encourage them to scroll more. <\/span><\/p>\n\n\n\n

Parallax scrolling creates a completely immersive browsing experience. With the background moving at a slower pace than the foreground, it creates a sense of depth. Scroll-triggered animations, on the other hand, are great for breaking your content into chunks, with animations capturing people\u2019s imaginations as it leads them through the content. <\/span><\/p>\n\n\n\n

7. Don\u2019t Hijack the Scrolling<\/b><\/h2>\n\n\n\n
\"method<\/a>
Method – Rose Gold<\/a> created by Wholegrain Digital<\/a> uses fun scrolling effects without hijaking the experience<\/figcaption><\/figure>\n\n\n\n

Finally, avoid scroll hijacking. Users should retain full control over the site navigation at all times. With scroll hijacking, the page is set to move at a specific pace, regardless of user actions, something most often used to force people to browse content slower. This isn\u2019t good and will disrupt the user experience, often resulting in them leaving the site. Let them dictate the pace they want to consume your content, and focus instead on creating great content that encourages them to consume it all. <\/span><\/p>\n\n\n\n

\n\n\n\n

The methods for enhancing the user experience are continually developing. Find the sweet spot between great content and an intuitive interface, and people won\u2019t mind the length of the scroll. Like anything, regularly check your analytics to see how successful your long-scrolling site is and be prepared to tweak it as necessary. <\/span><\/p>\n\n\n\n

To make sure your visitors have a fast-loading scroll experience, make sure you’re working with a high-quality WordPress hosting<\/a> provider!<\/p>\n","protected":false},"excerpt":{"rendered":"

Once, long-scrolling sites were deeply unpopular. Websites were all about the concept of \u201cabove the fold,\u201d a term named for the important content that appears above the physical fold of a newspaper. Today, the opposite is true. There\u2019s little sense of a \u201cfold\u201d anymore\u2014with such a huge variety of screens, ranging from the smallest mobile…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":140722,"template":"","resource-topic":[1396],"resource-role":[1397,899],"resource-type":[916],"class_list":["post-139763","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n7 Ways to Entice Your Users to Scroll Through Your Entire Site Design<\/title>\n<meta name=\"description\" content=\"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design\" \/>\n<meta property=\"og:description\" content=\"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-28T21:00:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/09\/scroll-entire-site_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/09\/scroll-entire-site_1200x627.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/\",\"name\":\"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-09-10T18:23:00+00:00\",\"dateModified\":\"2024-02-28T21:00:37+00:00\",\"description\":\"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design","description":"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design","og_description":"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-02-28T21:00:37+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/09\/scroll-entire-site_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/09\/scroll-entire-site_1200x627.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/","name":"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-09-10T18:23:00+00:00","dateModified":"2024-02-28T21:00:37+00:00","description":"This article outlines strategies you can use to entice your users to scroll through your site and engage with your content.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/users-scroll-through-your-entire-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"7 Ways to Entice Your Users to Scroll Through Your Entire Site Design"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/09\/scroll-entire-site_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Site Owner","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/140722"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139763"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139763"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139763"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}