{"id":4685,"date":"2016-02-25T13:00:28","date_gmt":"2016-02-25T13:00:28","guid":{"rendered":"\/\/?p=4685"},"modified":"2025-02-26T10:24:17","modified_gmt":"2025-02-26T10:24:17","slug":"long-scrolling-web-design-trend","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/long-scrolling-web-design-trend.html","title":{"rendered":"Exploring the Long Scrolling Web Design Trend"},"content":{"rendered":"<p><img decoding=\"async\" class=\"aligncenter wp-image-4696 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085456\/The-Long-Scroll.png\" alt=\"The Long Scroll\" width=\"639\" height=\"296\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085456\/The-Long-Scroll.png 639w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085456\/The-Long-Scroll-300x139.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/p>\n<p>Are you a <a href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1946\" target=\"_blank\" rel=\"noopener\">long-scroll<\/a> lover, or a strictly \u2018above the fold\u2019 kind of person? The debate rages on about whether to go long or not \u2013 with fierce arguments on both sides. The big question is \u2013 is there a right answer? Or is it just a matter of personal preference?<\/p>\n<p>I personally think that long-scrolling provides a great alternative to the fold vs. no fold battle \u2013 but of course, it\u2019s not without its complications. Here\u2019s an outline of what makes single page sites awesome&#8230; and why they can be problematic.<\/p>\n<h2>Long-Scrolling \u2013 Why It\u2019s Hot<\/h2>\n<p>Firstly \u2013 some clarification. If you believe people don\u2019t read below the fold, guess again. In fact, Chartbeat collected data from 2 billion visits, and found that <a href=\"https:\/\/uxmyths.com\/post\/654047943\/myth-people-dont-scroll\" target=\"_blank\" rel=\"noopener\">66% of user time<\/a> was spent below the fold, not above!<\/p>\n<p>The fact is, long-scrolling offers us designers some pretty exciting opportunities. It gives us the chance to tell a story, include some powerful visuals, and create a more intense, immersive experience. Here\u2019s just a few reasons why it rocks.<\/p>\n<p><a href=\"https:\/\/walls.airpure.com\/\"><img decoding=\"async\" class=\"aligncenter wp-image-4699 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091245\/airpure.png\" alt=\"airpure\" width=\"639\" height=\"314\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091245\/airpure.png 639w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091245\/airpure-300x147.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/a><\/p>\n<ul>\n<li><strong>Visual creativity.<\/strong> This is one of my favorite aspects about long-scrolling \u2013 it really does set your creativity free in terms of visuals. Rather than focusing on divided block content, you can create something continual that inspires the user to scroll down \u2013 giving them something fresh and exciting.<\/li>\n<li><strong>Tells a story.<\/strong> Long-scrolling lends itself perfectly to developing a narrative. It allows you to tell a story, which in turn, encourages valuable user interaction. Find out more <a href=\"https:\/\/www.dtelepathy.com\/blog\/design\/8-reasons-why-pageless-design-is-the-future-of-the-web\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/li>\n<li><strong>Simple and more intuitive.<\/strong> Think about how you use a tablet or smartphone. It\u2019s all about the scrolling, and not so much about clicking. Long-scrolling is custom-made for smart device users. It\u2019s a step away from complex navigation, and a step towards a simpler, more user-friendly experience.<\/li>\n<li><strong>Perfect for responsive web design.<\/strong> While we\u2019re on the topic \u2013 long-scrolling is well suited to mobile devices in plenty of other ways too. As you know, page design can get pretty complex across devices, when you\u2019re trying to create something that suits both small and large screens. Long-scrolling simplifies things a whole lot more \u2013 creating a more seamless transition from desktop to smartphone.<\/li>\n<li><strong>Gets to the point.<\/strong> Nowadays, clients are increasingly searching for web designers who know how to distill their vision into one page \u2013 how to make their brand punchy, powerful, and thoroughly dynamic. If you\u2019re a long-scroll pro, you\u2019re in a good position to deliver this \u2013 it\u2019s the ideal way to condense a business message into one exciting page.<\/li>\n<li><strong>Easier to get results.<\/strong> Scrolling is quite an instinctive action, whereas clicking through to another page requires thought \u2013 and motivation. Generally speaking, a single long-scroll page encourages people to take action much more swiftly than separate web pages.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4702 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04092234\/silesoleil.png\" alt=\"silesoleil\" width=\"639\" height=\"309\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04092234\/silesoleil.png 639w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04092234\/silesoleil-300x145.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/p>\n<h2>Long-Scrolling \u2013 Why It\u2019s Not<\/h2>\n<p>However, it\u2019s not all plain-sailing with long-scrolling. Like any other form of web design, it comes with its own set of unique drawbacks. Here\u2019s a run-through of the main issues:<\/p>\n<ul>\n<li><strong>Time-consuming.<\/strong> As any long-scroll designer will testify, pageless websites take time to conceive, and to create. They require a lot of collaboration between client and designer, which can prove problematic if you\u2019ve got a client with strong opinions (that don\u2019t match your own!).<\/li>\n<li><strong>Not SEO friendly.<\/strong> This is potentially a big problem with long-scrolling sites. Unsurprisingly, when you reduce the numbers of pages, you\u2019re giving Google less pages to index, and this has an impact on the SERPs. However, there are a few ways you can get round this \u2013 check out what Quicksprout and <a href=\"https:\/\/moz.com\/blog\/parallax-scrolling-websites-and-seo-a-collection-of-solutions-and-examples\" target=\"_blank\" rel=\"noopener\">Moz<\/a> have to say about it.<\/li>\n<li><strong>Slow load times.<\/strong> Many web designers are derisive about long-scrolling due to its performance issues. As with any design, significant amounts of video or image content can slow site speed down to a crawl, especially if it\u2019s a parallax-scrolling site, which relies on Javascript and jQuery. Again, there is a solution \u2013 read <a href=\"https:\/\/medium.com\/@dhg\/parallax-done-right-82ced812e61c#.az5kxs6km\" target=\"_blank\" rel=\"noopener\">this tutorial<\/a> to find out more.<\/li>\n<li><strong>Awkward navigation.<\/strong> Hmm&#8230; no \u2018back\u2019 button you say? This is a flaw in the design, for sure. Instead of simply revisiting the previous page, users have to scroll back each time, which can get pretty frustrating. The best way to counter this is to create a persistent top navigation, and have each item anchored to a page section.<\/li>\n<\/ul>\n<h2>Mastering the Art of Long-Scrolling<\/h2>\n<p>Whether you\u2019re a fan of long-scroll websites or not, it\u2019s undeniably useful to know how to create one. Here\u2019s a few pointers to help you.<\/p>\n<p><a href=\"https:\/\/le-mugs.com\/\"><img decoding=\"async\" class=\"aligncenter wp-image-4700 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091338\/le-mugs.png\" alt=\"le-mugs\" width=\"639\" height=\"326\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091338\/le-mugs.png 639w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04091338\/le-mugs-300x153.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/a><\/p>\n<ul>\n<li><strong>Understand the potential (and limitations) of long-scrolling.<\/strong> Sure, long-scroll sites can look awesome, but they won\u2019t be suitable for all designs. When you start work on a web project, review it as a whole, and ascertain which form of design is best suited to the client. Long-scrolling sites look amazing, but they\u2019re not an automatic formula for online success.<\/li>\n<li><strong>Distinguish between CTAs.<\/strong> When you\u2019re creating a single-page site, make sure you clearly differentiate between scrolling arrows and other calls-to-action.<\/li>\n<li><strong>Scroll smart.<\/strong> Think about how you can encourage users to keep scrolling. Design elements and visual clues are a good way to achieve this. We\u2019re talking arrows, animated buttons, or other creative user interface tools. To make things really clear for the user, you could include small buttons with instructions (such as \u2018scroll for more\u2019) to maneuver them more successfully around the site.<\/li>\n<li><strong>Make navigation easier.<\/strong> To help users browse the site more easily, use a sticky navigation bar. This means they won\u2019t have to keep scrolling back up to access previously viewed content.<\/li>\n<li><strong>No overkill.<\/strong> A fairly lengthy long-scroll page is fine. A tedious mass of 500 pages-worth of non-stop content is definitely not. Just keep it simple. Get the message across, then stop. And remember, even infinite scrolling sites aren\u2019t really endless!<\/li>\n<\/ul>\n<h2>TL;DR<\/h2>\n<p>I&#8217;m pretty sure that we\u2019ll be seeing a whole load more long-scrolling websites in 2016 \u2013 which is unsurprising, as they offer new levels of creativity for both the client and the designer. However, just like any other design trend, it\u2019s not without its drawbacks, and it might not be the best option for your specific site. Before making a decision, consider the brand, the content required, and how the audience expects to use the site.<\/p>\n<p>What are your experiences with long-scrolling sites? Do you love \u2018em, or loathe \u2018em? Share your thoughts!<\/p>\n<div class=\"author\">\n<div class=\"photo\"><img decoding=\"async\" class=\"alignleft wp-image-4703 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04092552\/0f707d0dde2f4c0c6bceccb74d57974b.jpeg\" alt=\"\" width=\"140\" height=\"140\" \/><\/div>\n<p><em><strong>About the Author:<\/strong> <\/em>Vincent Sevilla is a web designer for <a href=\"https:\/\/websitesetup.org\/\" target=\"_blank\" rel=\"noopener\">Websitesetup<\/a>. With a background in online marketing, he loves to create things related to graphic design.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Are you a long-scroll lover, or a strictly \u2018above the fold\u2019 kind of person? The debate rages on about whether to go long or not \u2013 with fierce arguments on both sides. The big question is \u2013 is there a right answer? Or is it just a matter of personal&#8230;<\/p>\n","protected":false},"author":2,"featured_media":4697,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[751,746],"tags":[786],"class_list":["post-4685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-design-services","category-insights","tag-ui-design"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"GetDevDone Team","author_link":"https:\/\/getdevdone.com\/blog\/author\/admin-p2h"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling-300x197.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/digital-design-services\" class=\"advgb-post-tax-term\">Digital design services<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/insights\" class=\"advgb-post-tax-term\">Insights<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Digital design services<\/span>","<span class=\"advgb-post-tax-term\">Insights<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/insights\" class=\"advgb-post-tax-term\">UI design<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">UI design<\/span>"]}},"comment_count":"2","relative_dates":{"created":"Posted 10 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on February 25, 2016","modified":"Updated on February 26, 2025"},"absolute_dates_time":{"created":"Posted on February 25, 2016 1:00 pm","modified":"Updated on February 26, 2025 10:24 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2016\/02\/04085515\/Long-Scrolling.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/c67d54df2c6849e5b7af3126c36fe55b10f9d6a14b227d14b35af6c027abb195?s=96&d=mm&r=g","author_position":null,"reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"thanksgiving-designs-and-freebies","name":"Top 20 Thanksgiving Designs and Freebies"},"next_post":{"slug":"web-dev-newsletters","name":"Our Faves: Top Newsletters for People Who Code"},"related_posts":["horror-stories-for-web-developers","5-good-and-bad-logo-redesigns","from-diy-to-pro-why-use-the-services-of-a-wordpress-website-development-company"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/4685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=4685"}],"version-history":[{"count":12,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/4685\/revisions"}],"predecessor-version":[{"id":24714,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/4685\/revisions\/24714"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/4697"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=4685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=4685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=4685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}