{"id":4258,"date":"2017-07-27T13:24:57","date_gmt":"2017-07-27T12:24:57","guid":{"rendered":"https:\/\/da-manager.com\/blog\/?p=4258"},"modified":"2022-11-28T16:26:17","modified_gmt":"2022-11-28T15:26:17","slug":"long-scrolling-websites","status":"publish","type":"post","link":"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/","title":{"rendered":"Long-Scrolling Websites"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#The_Good\" >The Good<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#Brand_Storytelling\" >Brand Storytelling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#Getting_Rid_of_Pagination\" >Getting Rid of Pagination<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#Much_of_the_Content_Lives_Below_the_Fold\" >Much of the Content Lives Below the Fold<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#Slow_Site_Speed\" >Slow Site Speed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/da-manager.com\/blog\/long-scrolling-websites\/#A_Design_Thats_Increasingly_Popular\" >A Design That\u2019s Increasingly Popular<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p>By now, you\u2019ve likely seen what long-scrolling pages have to offer. These are the unique pages that seem to go on forever when you scroll down a website. They can be effective when it comes to storytelling for your brand, products or services, but they also have some practical challenges.<\/p>\n<p>For instance, some designers and marketers believe that putting much of your content below the fold is a death sentence for conversions and getting your message across. After all, no one really scrolls below the fold, do they? Not quite, although that\u2019s been the conventional wisdom for some time.<\/p>\n<p>On the other hand, you could argue that long-scrolling pages do away with the need for pagination, which has been considered cumbersome and a big user-experience problem.<\/p>\n<p>So the jury may still be out on long-scrolling pages, but that just means it\u2019s well worth it to dig deeper and examine the good and bad of this design choice.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Good\"><\/span><strong>The Good<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Brand_Storytelling\"><\/span><strong>Brand Storytelling<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Brand storytelling is what sets your business apart from the competition. It establishes an emotional connection with your target market and gives them something substantial to relate to. With the Harvard Business Review saying that you should\u00a0<a href=\"https:\/\/hbr.org\/2014\/10\/why-your-brain-loves-good-storytelling\/\" target=\"_blank\" rel=\"nofollow noopener\">use good storytelling to motivate people<\/a>, it\u2019s clear that this strategy can be extended to business branding, too.<\/p>\n<p>A long-scrolling page\u2014which is not the same as infinite scrolling, just to be clear\u2014is the ideal design venue for brand storytelling. As with turning the pages of a book, each time a site visitor scrolls down the long page further, he\u2019s able to discover more about what makes your brand unique and what your unique selling proposition is.<\/p>\n<p>This is the perfect opportunity to slowly but surely unfurl more of your brand story to your visitors, as the Seattle Space Needle\u2019s site has so excellently done.<\/p>\n<p>This site is very unique because the long scroll is actually initiated from the bottom of the page up, whereas more long-scrolling sites would have the traditional top-to-bottom scroll. As you can see, visitors to this site learn about the city of Seattle, the Needle\u2019s restaurant, and its observation deck.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-872 size-full\" src=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/111.png\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" srcset=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/111.png 975w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/111-300x167.png 300w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/111-768x429.png 768w\" alt=\"111\" width=\"975\" height=\"544\" \/><br \/>\n<em>Image from\u00a0<a href=\"http:\/\/www.spaceneedle.com\/home\/\" target=\"_blank\" rel=\"nofollow noopener\">Space Needle<\/a><\/em><\/p>\n<p>As a result, budding tourists understand more about Seattle and the role of the Space Needle in the city\u2019s identity. Because it\u2019s presented in a gradual, chapter-by-chapter way, visitors are told the story and get more engaged with the idea of visiting the Space Needle.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Getting_Rid_of_Pagination\"><\/span><strong>Getting Rid of Pagination<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Pagination#Pagination_in_web_content\" target=\"_blank\" rel=\"nofollow noopener\">Pagination<\/a>\u00a0is a web-design element that has been around for many years, but long scrolling is making it obsolete rather quickly. Pagination is showing only a limited number of results on a search engine results page (SERP) or articles\/posts on a site, with links to additional pages displayed at the bottom of the current page.<\/p>\n<p>While this system of organizing web content was meant to increase order, the opposite has happened. Usability and user experience issues abound with pagination, as there are numerous questions surrounding:<\/p>\n<ul>\n<li>What to name the pagination links to different pages (for instance, should you use \u201cnext\u201d and \u201cprevious\u201d links?)<\/li>\n<li>How many links to various pages should be displayed on screen<\/li>\n<li>Whether or not there should be a link to the first and last pages<\/li>\n<\/ul>\n<p>When your content is just one, long page, the question of how to divide this content into pages and appropriately number and link to them becomes moot. That\u2019s why the user experience benefits when you have a long-scrolling page.<\/p>\n<p>A perfect example of this is the Apple Watch\u2019s page. Each feature of the watch opens up to another page that features a longer long-scrolling page where the feature is broken down into a lot more detail.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-873 size-full\" src=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/222.png\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" srcset=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/222.png 975w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/222-300x198.png 300w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/222-768x506.png 768w\" alt=\"222\" width=\"975\" height=\"642\" \/><br \/>\n<em>Image From\u00a0<a href=\"http:\/\/www.apple.com\/watch\/\" target=\"_blank\" rel=\"nofollow noopener\">Apple<\/a><\/em><\/p>\n<p>Imagine the hassles of organizing this content with regular, old pagination! From a UX standpoint, it would, first of all, be more cumbersome to have to individually click on each, new page to reveal more content instead of just smoothly scrolling down. Second, how do you decide how many of the details of each feature make it onto a page?<\/p>\n<p>Long scrolling eliminates these headaches.<\/p>\n<p>We\u2019ve talked about the pros of long scrolling, yet there are also some cons.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Much_of_the_Content_Lives_Below_the_Fold\"><\/span><strong>Much of the Content Lives Below the Fold<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whether to put content below the fold or not has been an argument that web designers and marketers have been having since the advent of the Internet. The fold, of course, is the bottom-most part of a site that you see on a page that you land on, before you scroll down.<\/p>\n<p>Below the fold opponents will say that no one (or barely anyone) actually scrolls down, so it\u2019s a waste to put important content below the fold. Below the fold proponents will say that the fold doesn\u2019t impede people from scrolling down since, if your top of the fold content is high-quality and persuasive enough, they\u2019ll gladly scroll down to devour more content.<\/p>\n<p>The research tends to support this view about below the fold adversity. A Google study determined that\u00a0<a href=\"https:\/\/www.nngroup.com\/articles\/page-fold-manifesto\/\" target=\"_blank\" rel=\"nofollow noopener\">ads below the fold are only viewed 44% of the time<\/a>, compared with ads above the fold being seen 73% of the time. Clearly, fewer people scroll down.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Slow_Site_Speed\"><\/span><strong>Slow Site Speed<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Unsurprisingly, long-scrolling pages are sometimes noticeably slow because of the storytelling factor that, in and of itself, is still a plus. However, when you figure that storytelling involves a lot of images, graphics and even video, then all of these elements combine to really slow down the speed of a site, which is frustrating on the UX.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-874 size-full\" src=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/333.png\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" srcset=\"https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/333.png 975w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/333-300x130.png 300w, https:\/\/www.bigdropinc.com\/wp-content\/uploads\/2016\/11\/333-768x333.png 768w\" alt=\"333\" width=\"975\" height=\"423\" \/><br \/>\n<em>Image From\u00a0<a href=\"http:\/\/nasaprospect.com\/\" target=\"_blank\" rel=\"nofollow noopener\">NASA Prospect<\/a><\/em><\/p>\n<p>One such long-scrolling page is NASA Prospect, a student site that was created in collaboration with NASA. This is a really, really long scroll down, as it tells a long story, but the UX of the site suffers. Scrolling down the page, you experience scrolling that\u2019s cumbersome and noticeably slow with the appearance of more images. This is an experience that continues down the entire length of the page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"A_Design_Thats_Increasingly_Popular\"><\/span><strong>A Design That\u2019s Increasingly Popular<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Long-scrolling design started a few years ago. At the time, people thought it was very interesting, and it was accordingly well-received. What\u2019s clear at this point is that long scrolling is more than just a trend or a fad.<\/p>\n<p>When huge brands and authority figures like Apple prominently feature this design in their sites, then you know it\u2019s going to stick around for a while to come.<\/p>\n<p>More and more brands are deciding that they can effectively use the storytelling angle of long-scrolling pages to seamlessly communicate their brand messaging to leads and customers. It may also be something that you decide is right for your brand.<\/p>\n<p>source:<a href=\"http:\/\/www.bigdropinc.com\" target=\"_blank\" rel=\"noopener\">Big Drop<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By now, you\u2019ve likely seen what long-scrolling pages have to offer. These are the unique&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[147],"tags":[],"class_list":["post-4258","post","type-post","status-publish","format-standard","has-post-thumbnail","category-general"],"modified_by":null,"_links":{"self":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/4258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/comments?post=4258"}],"version-history":[{"count":0,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/4258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media\/4259"}],"wp:attachment":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media?parent=4258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/categories?post=4258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/tags?post=4258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}