{"id":1861,"date":"2019-02-11T13:26:29","date_gmt":"2019-02-11T13:26:29","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=1861"},"modified":"2023-08-03T14:15:42","modified_gmt":"2023-08-03T13:15:42","slug":"designing-an-effective-website-header","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/","title":{"rendered":"Designing an effective website header"},"content":{"rendered":"\r\n<p>There are many important parts of any website. From the typography to the above the fold content, to the images and visual content, each piece of your web design needs to work cohesively with other aspects to provide a well rounded, effective website.  The website header is no exception. So what is the website header? What should it include? And how can it be useful? Well, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we are Manchester&#8217;s leading <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/effective-emotive-web-design\/\">web design<\/a> professionals. From\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-wigan\/\">Wigan<\/a>\u00a0to\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-southport\/\">Southport<\/a>, we work with companies across Manchester and the surrounding region to deliver high quality web design solutions that really get results. As a result, we have produced this guide to designing an effective website header.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">What is the header?<\/h2>\r\n\r\n\r\n\r\n<p>The header of the website is the top bar that runs along the very top of the screen. This generally is above any images or video content you are using as your above the fold content, and it&#8217;s even above any navigation bars or tools. Essentially, a header is the opposite of the footer, that follows right at the end of the page. Not every website will use a header, but for local businesses and small to medium sized businesses, they can be very effective.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">What should a header include?<\/h3>\r\n\r\n\r\n\r\n<p>So, if you do decide to use a header, what should you use this top bar for? Well, there are a number of important items that different companies choose to include in this section, and these include:<\/p>\r\n\r\n\r\n\r\n<ul><li><strong><em>Quick contact options- <\/em><\/strong>these are generally icons that can be clicked on to start a phone call, or a message to the company. When using a mobile device this is incredibly useful, as it means any potential customers can simply click on this button at the very top of the page, to get in touch with you in an instant. <\/li><li><em><strong>Opening times-<\/strong><\/em> for stores and offices with a real world presence, outlining the opening times for that specific day in the header, can be a very effective use of space. Especially when you are planning to improve the user experience by considering <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/what-are-micro-moments-in-web-design\/\">micro-moments.<\/a><\/li><li><em><strong>Company logo- <\/strong><\/em>this is one of the most important parts of your company branding that will appear on your website. And by positioning it right at the top of your page, your viewers wont miss out.<\/li><\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Designing an effective website header<\/h3>\r\n\r\n\r\n\r\n<p>So your website header is a great place to show information that your users might be looking for, and this helps to improve the user experience. But it&#8217;s important that your header is well designed. You could consider:<\/p>\r\n\r\n\r\n\r\n<ul><li><strong><em>Shape and sizing-<\/em><\/strong> for any icons used in the header, you should make sure they are all a equal size and a similar design. This will help keep your web design professional, and help your header blend into the rest of the page.<\/li><li><strong><em>Use a different background colour-<\/em><\/strong> some companies decide to use a different background colour for the header bar. This sets it apart from the main content, and can help to draw attention to the top of the page. The background colour of the header should match the background colour of the footer for a professional and cohesive finish.<\/li><\/ul>\r\n\r\n\r\n\r\n<p>For more information or advice, or for high quality, professional web design solutions, get in touch with the experts today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>There are many important parts of any website. From the typography to the above the fold content, to the images and visual content, each piece of your web design needs to work cohesively with other aspects to provide a well rounded, effective website. The website header is no exception. So what is the website header? [&#8230;]\n","protected":false},"author":2,"featured_media":1060,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Designing an effective website header - Pumpkin Web Design Manchester<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing an effective website header - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"There are many important parts of any website. From the typography to the above the fold content, to the images and visual content, each piece of your web design needs to work cohesively with other aspects to provide a well rounded, effective website. The website header is no exception. So what is the website header? [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-11T13:26:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-03T13:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/10\/office-605503_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1275\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/\",\"name\":\"Designing an effective website header - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2019-02-11T13:26:29+00:00\",\"dateModified\":\"2023-08-03T13:15:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing an effective website header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Designing an effective website header - Pumpkin Web Design Manchester","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/","og_locale":"en_GB","og_type":"article","og_title":"Designing an effective website header - Pumpkin Web Design Manchester","og_description":"There are many important parts of any website. From the typography to the above the fold content, to the images and visual content, each piece of your web design needs to work cohesively with other aspects to provide a well rounded, effective website. The website header is no exception. So what is the website header? [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2019-02-11T13:26:29+00:00","article_modified_time":"2023-08-03T13:15:42+00:00","og_image":[{"width":1920,"height":1275,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/10\/office-605503_1920.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/","name":"Designing an effective website header - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2019-02-11T13:26:29+00:00","dateModified":"2023-08-03T13:15:42+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/designing-an-effective-website-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Designing an effective website header"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1861"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=1861"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1861\/revisions"}],"predecessor-version":[{"id":12713,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1861\/revisions\/12713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/1060"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=1861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=1861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=1861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}