{"id":3185,"date":"2017-03-15T20:48:28","date_gmt":"2017-03-15T20:48:28","guid":{"rendered":"https:\/\/ggcdigital.com\/?p=3185"},"modified":"2022-07-15T19:46:36","modified_gmt":"2022-07-15T19:46:36","slug":"above-the-fold-in-web-design","status":"publish","type":"post","link":"https:\/\/ggcdigital.com\/above-the-fold-in-web-design\/","title":{"rendered":"Above the fold &#8211; what does that really mean and does it matter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3185\" class=\"elementor elementor-3185\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6eedf77d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6eedf77d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5c95004e\" data-id=\"5c95004e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-966a6a3 elementor-widget elementor-widget-heading\" data-id=\"966a6a3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.20.0 - 10-04-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h1 class=\"elementor-heading-title elementor-size-default\">Above the fold - what does that really mean and does it matter<\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6847e9f elementor-widget elementor-widget-text-editor\" data-id=\"6847e9f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.20.0 - 10-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>You&#8217;ve heard time and time again &#8211; we need to make sure it&#8217;s above the fold. Have you ever wondered what that means? Where it came from? Is it valid when you&#8217;re talking about web design?<\/p><p>Above the fold originated with the newspaper industry. Remember those paper things people used to pick up on the street or have delivered to their home? When a newspaper is laying on the rack it&#8217;s well, folded in half. To peak the interest of potential paper buyers, editors wanted to make sure the hot, important stories were visible should someone walk by. It was to help encourage the sales of the paper. If someone saw a juicy story, they&#8217;d FOR SURE buy it.<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-3568 alignright\" src=\"https:\/\/i0.wp.com\/hbo.084.myftpupload.com\/wp-content\/uploads\/2017\/03\/google-smartphone-usage-chart-300x212.jpg?resize=300%2C212\" alt=\"Google smart phone usage chart from 2013\" width=\"300\" height=\"212\" data-recalc-dims=\"1\" srcset=\"https:\/\/i0.wp.com\/ggcdigital.com\/wp-content\/uploads\/2017\/03\/google-smartphone-usage-chart.jpg?resize=300%2C212&amp;ssl=1 300w, https:\/\/i0.wp.com\/ggcdigital.com\/wp-content\/uploads\/2017\/03\/google-smartphone-usage-chart.jpg?w=400&amp;ssl=1 400w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Above the fold has migrated it&#8217;s way from newspapers to web design. I hear many times from clients &#8220;make sure it&#8217;s above the fold&#8221; or &#8220;is it above the fold&#8221;? So is it a valid comment? Before you can really focus on above the fold, you need to consider some things as it refers to your digital web presence. Once you take all things in consideration, then you can explore the term and its use a bit more. Some facts:<\/p><p><strong>Mobile Users:<\/strong> According to <a href=\"http:\/\/www.w3schools.com\/browsers\/browsers_mobile.asp\" target=\"_blank\" rel=\"noopener\">W3 Schools<\/a> the usage for mobile devices to browse the web continues to increase. Numerous articles from 2014 including this article from <a href=\"http:\/\/www.smartinsights.com\/mobile-marketing\/mobile-marketing-analytics\/mobile-marketing-statistics\/\" rel=\"no follow noopener\" target=\"_blank\">Smart Insights<\/a>\u00a0indicate that mobile users are surpassing desktop users. And according to this <a href=\"http:\/\/services.google.com\/fh\/files\/misc\/omp-2013-us-en.pdf\" target=\"_blank\" rel=\"noopener\">2013 study<\/a>, 67% of the population use cell phones or smartphones to browse the web.<\/p><p>Google\u00a0in <a href=\"https:\/\/support.google.com\/adsense\/answer\/6196932?hl=en\" target=\"_blank\" rel=\"noopener\">April of 2015<\/a> expanded mobile friendly sites as part of their rankings &#8220;signal&#8221;. This means that all those folks who didn&#8217;t have or don&#8217;t have mobile sites, could be effected when it comes to ranking in Google search. This of course only effected mobile searches and not desktop but if mobile users are on the rise, you can bet this plays a pretty important part.<\/p><p><strong><img decoding=\"async\" class=\"size-medium wp-image-3567 alignright\" src=\"https:\/\/i0.wp.com\/hbo.084.myftpupload.com\/wp-content\/uploads\/2017\/03\/desktop-vs-mobile-screen-300x197.jpg?resize=300%2C197\" alt=\"the difference between a website viewed on a desktop vs one on a mobile device\" width=\"300\" height=\"197\" data-recalc-dims=\"1\" srcset=\"https:\/\/i0.wp.com\/ggcdigital.com\/wp-content\/uploads\/2017\/03\/desktop-vs-mobile-screen.jpg?resize=300%2C197&amp;ssl=1 300w, https:\/\/i0.wp.com\/ggcdigital.com\/wp-content\/uploads\/2017\/03\/desktop-vs-mobile-screen.jpg?w=400&amp;ssl=1 400w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Screen Resolution:<\/strong> This is how people view websites on their desktop. Screen sizes are getting bigger and bigger which means a multitude of resolutions. W3 School analyzes the various browser resolutions that people are viewing the internet with. As you can see from <a href=\"http:\/\/www.w3schools.com\/browsers\/browsers_display.asp\" target=\"_blank\" rel=\"noopener\">these numbers<\/a>, it varies. This means that how your site looks to someone on an 800 pixel wide viewer and one that is 1920 pixel wide viewer can be completely different. The image to the right is a perfect example of how relatively different your screen looks from device to device. What&#8217;s visible on the desktop isn&#8217;t exactly visible on a cell phone.<\/p><p><strong>So why am I telling you all this?<\/strong> Because above the fold is relative but it&#8217;s limited. You can&#8217;t put <strong>EVERYTHING<\/strong> above the fold and users <strong>SCROLL<\/strong>.<\/p><p>If your site is mobile responsive you already know the display is completely different. Some content gets hidden some content shifts. And taking in consideration the view port, it is much much smaller than a desktop screen resolution so you are very limited on what you see initially as you load the site on your device. Scrolling has become a natural function to users on smartphones. So above the fold takes on a whole different meaning when you throw mobile devices in the mix.<\/p><p><strong>Okay so now what? <\/strong>Strategize.\u00a0Plan out\u00a0your design and content. Sit down with your team and discuss what&#8217;s important to you. What do you want users to accomplish when they get to the site? The first impression is important.\u00a0And because statistics show more people are using mobile devices, you have to consider first how your site is going to look on a phone.<\/p><p><strong>A bad user experience no matter how much you put above this invisible fold is no bueno.<\/strong> It won&#8217;t matter. \u00a0A good designer will work with you if you help them understand your needs and the direction you want to go.<\/p><h2>Other things to consider<\/h2><p><strong>Call to Action:<\/strong> This is the key to a successful mobile presence. What is your call to action? What is going to get users what they need right away? What is going to make users act. For example, if you&#8217;re a non-profit, consider having your donation button at the top of your website and on all pages. Or if you are a restaurant owner, making sure the menu or reservations button is at the top. Want users to call instead? Make sure your click to call phone number is at the top.<\/p><p><strong>Relative Content:<\/strong> Instead of concentrating on the fold, focus on the content. Good, rich relevant content will cause any user to browse further. Entice them from the homepage with teasers and snippets. Use strong calls to action to promote clicks to maybe that fabulous blog post or that special event you are hosting. The fact is Google and search engines alike are looking to see if the content on your site is relevant not whether it is above the fold.<\/p><p>I hope this helps you understand a bit about the fold and how it applies to web design.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Above the fold &#8211; what does that really mean and does it matter You&#8217;ve heard time and time again &#8211; we need to make sure it&#8217;s above the fold. Have you ever wondered what that means? Where it came from? Is it valid when you&#8217;re talking about web design? Above the fold originated with the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3566,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[23,24],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ggcdigital.com\/wp-content\/uploads\/2017\/03\/above-the-fold.jpg?fit=1000%2C667&ssl=1","_links":{"self":[{"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/posts\/3185"}],"collection":[{"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/comments?post=3185"}],"version-history":[{"count":4,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/posts\/3185\/revisions"}],"predecessor-version":[{"id":5056,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/posts\/3185\/revisions\/5056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/media\/3566"}],"wp:attachment":[{"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/media?parent=3185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/categories?post=3185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ggcdigital.com\/wp-json\/wp\/v2\/tags?post=3185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}