{"id":504,"date":"2015-04-21T10:00:29","date_gmt":"2015-04-21T09:00:29","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=504"},"modified":"2015-10-02T14:39:02","modified_gmt":"2015-10-02T13:39:02","slug":"how-to-structure-content-on-a-webpage","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/04\/21\/how-to-structure-content-on-a-webpage\/","title":{"rendered":"How to Structure Content on a Webpage"},"content":{"rendered":"<p>Before you can start writing effective web content you need to be clear about <strong>what you\u2019re trying to achieve<\/strong> with your site and <strong>who your main users are<\/strong>.<\/p>\n<p>For every page you plan, ask yourself:<\/p>\n<ul>\n<li>Why am I creating this page?<\/li>\n<li>Who am I creating this page for?<\/li>\n<li>What do I want the user to do after reading it?<\/li>\n<\/ul>\n<p>People generally come to a site to find something out so it\u2019s important that you <strong>answer their questions<\/strong> with your content.<\/p>\n<p>Once you know the messages you need to communicate and who you\u2019re communicating them to, you can start <strong>prioritising content<\/strong>.<\/p>\n<h2>The fold<\/h2>\n<p>\u2018The fold\u2019 is a term used in web development to refer to the point on a webpage where people need to scroll.<\/p>\n<p>Amy Schade (Nielsen Norman Group) in <a href=\"http:\/\/www.nngroup.com\/articles\/page-fold-manifesto\/\">The fold Manifesto: Why the Page Fold Still Matters<\/a> explains that people will only scroll if content &#8216;above the fold&#8217; appears <strong>relevant<\/strong> to them. So it\u2019s essential that web content at the <strong>top of your page<\/strong> is an <strong>accurate indicator<\/strong> of what information appears further down the page to <strong>encourage users to scroll<\/strong>.<\/p>\n<p>This is a really useful concept to bear in mind when structuring content on your webpage.<\/p>\n<h2>The inverted pyramid<\/h2>\n<p>It\u2019s also helpful to think about structuring a webpage in the same way that journalists structure a news article \u2013 by using the inverted pyramid.<\/p>\n<p>The inverted pyramid is the idea of turning a story on its head. You start with the key point and then provide more detail further down the page. This ensures that <strong>essential information<\/strong> is at the <strong>top of the page<\/strong>. This is vital for mobile devices as a smaller screen size means that less content will appear &#8216;above the fold\u2019.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/04\/pyramid.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-512 aligncenter\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/04\/pyramid-300x206.png\" alt=\"Inverted pyramid showing where primary, secondary and supporting messages appear (primary at the top, secondary in the middle and supporting at the end)\" width=\"300\" height=\"206\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/04\/pyramid-300x206.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/04\/pyramid-436x300.png 436w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/04\/pyramid.png 979w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/alistapart.com\/author\/kmcgrane\">Karen McGrane<\/a> in her book, Content Strategy for Mobile, recommends thinking about your primary, secondary and supportive messages to help prioritise content on a page.<\/p>\n<h3>Primary message<\/h3>\n<p>Your primary message is the <strong>main point of the page<\/strong>. This should be communicated through your page title and introduction so that users can quickly see what the page is about.<\/p>\n<p><strong>Page titles<\/strong> should be <strong>clear and descriptive<\/strong> so that users can understand them at a glance. Similarly, your <strong>introduction<\/strong> should be <strong>concise and engaging. <\/strong>It should also\u00a0contain\u00a0<strong>key words<\/strong> for search engine optimisation. The introduction should summarise the main message in 50 words or less to grab the reader\u2019s attention and encourage them to scroll down the page.<\/p>\n<h3>Secondary message<\/h3>\n<p>The secondary message is the body copy of your page. It expands on your main message and provides more detail. The body copy should <strong>answer your users\u2019 questions<\/strong> and be <strong>concise and scannable<\/strong>.<\/p>\n<h3>Supporting messages<\/h3>\n<p>The <strong>supporting messages<\/strong> are <strong>qualifiers<\/strong> and <strong>additional information<\/strong> to support your main messages. They can include quotes, images and videos. Supporting messages can also provide a <strong>next step<\/strong>, such as a call to action like booking a place at an event or taking a virtual tour.<\/p>\n<h2>Summary<\/h2>\n<p>People spend less time <a href=\"http:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\">reading online<\/a> and will only scroll if they think that information further down the page will be useful to them. It\u2019s vital to <strong>prioritise <\/strong><strong>content <\/strong>so that your primary message is easily visible. <strong>Structuring <\/strong><strong>content effectively<\/strong> is therefore fundamental to ensuring <strong>your main message is conveyed<\/strong> to your users.<\/p>\n<h2>References<\/h2>\n<p>Amy Schade,\u00a0<a href=\"http:\/\/www.nngroup.com\/articles\/page-fold-manifesto\/\">The fold Manifesto: Why the Page Fold Still Matters<\/a>,\u00a0Nielsen Norman Group, 1 February 2015<\/p>\n<p><a href=\"http:\/\/alistapart.com\/author\/kmcgrane\">Karen McGrane<\/a>, Content Strategy for Mobile, A Book Apart,\u00a02012<\/p>\n<p>Jakob Nielsen,\u00a0<a href=\"http:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\">F-Shaped Pattern For Reading Web Content<\/a>,\u00a0Nielsen Norman Group, 17 April 2006<\/p>\n<h2>Related posts<\/h2>\n<ul>\n<li><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/03\/16\/top-5-tips-writing-for-the-web\/\">Top 5 Tips: Writing for the Web<\/a><\/li>\n<li><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/04\/13\/improve-your-content-with-help-from-hemingway\/\">Improve Your Content with Help from Hemingway<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Before you can start writing effective web content you need to be clear about what you\u2019re trying to achieve with your site and who your main users are. For every page you plan, ask yourself: Why am I creating this &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/04\/21\/how-to-structure-content-on-a-webpage\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1268,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,15],"tags":[53,56,54,55],"class_list":["post-504","post","type-post","status-publish","format-standard","hentry","category-content","category-go-mobile","tag-content-prioritisation","tag-messaging","tag-planning-content","tag-structuring-content"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/users\/1268"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=504"}],"version-history":[{"count":17,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/504\/revisions"}],"predecessor-version":[{"id":1112,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/504\/revisions\/1112"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}