{"id":1905,"date":"2016-09-05T12:00:17","date_gmt":"2016-09-05T11:00:17","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1905"},"modified":"2017-02-13T13:52:04","modified_gmt":"2017-02-13T13:52:04","slug":"best-practice-example-mastheads","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2016\/09\/05\/best-practice-example-mastheads\/","title":{"rendered":"Best practice example: mastheads"},"content":{"rendered":"

Each batch we put through the go live process has examples of excellent content. In this new series of blog posts<\/strong>, we\u2019ll use these to highlight best practice examples<\/strong>.<\/p>\n

Last time we looked at using grid boxes for section openers<\/u><\/a>. This time I want to show you three different\u00a0examples of best practice for\u00a0mastheads<\/strong>.<\/p>\n

Mastheads<\/h2>\n

Like grid boxes, mastheads<\/a>\u00a0are used for section openers<\/strong>. These are pages that give an introduction for a particular section (eg Research, Study with Us, About Us).<\/p>\n

They help create visual hierarchy<\/strong>, and so\u00a0should only be used for top level sections of your site<\/strong> (the pages that appear in the side menu when you\u2019re on the homepage).<\/p>\n

Example one: Accommodation<\/h2>\n

\"masthead<\/a><\/p>\n

This example is from the Accommodation website<\/a>. It uses a masthead<\/strong> page to give a brief introduction to the section, and point users towards some key pages.<\/p>\n

Mastheads work well in places where you want to give a teaser for the section<\/strong>, but not go into too much detail.<\/p>\n

At a glance<\/strong>, users can see how to get to key information.<\/p>\n

The image gives a visual clue about the content of the section<\/strong>. It\u00a0shows students who look like they really do live in the accommodation, rather than visiting for the first time.<\/p>\n

We\u2019ve prioritised the information<\/strong>, providing links to some of the core pages for current students \u2013 how to extend your stay, swap or transfer your room, and what to do at the end of your contract.<\/p>\n

We\u2019ve also added a sub-heading to introduce a sub-set of key information<\/strong>: how the Accommodation service can support students after first year. This quickly introduces a new topic that they might not have heard about, and shows them where to find more information.<\/p>\n

Example two: Careers<\/h2>\n

\"masthead<\/a><\/p>\n

This longer example is from the Careers website<\/a>. It uses a masthead page to give a more comprehensive overview of the section.<\/p>\n

The image links very clearly to the title<\/strong> of the page. The shape of the photo also leaves enough space for the title box.<\/p>\n

The sub-headings give a clear indication of how the section can help the user, and help to direct the user to appropriate information<\/strong> quickly and easily.<\/p>\n

Although there is more text in this example, the page has been structured in a way that supports it. There are clear links to all pages<\/strong> within the section and the sub-headings work well to help users scan for information<\/strong>.<\/p>\n

Hyperlinks are also used very well in this example. They\u2019re placed at the end of sentences, which supports visitors using mobile devices. They\u2019re not all clumped together, which would make them difficult to use on a mobile.<\/p>\n

Example three: Postgraduate<\/h2>\n

\"masthead<\/a><\/p>\n

This last example is from the Postgraduate website<\/a>. It uses a masthead page to support longer text and more information.<\/p>\n

Mastheads can also be a good option if pages in the section have very specific information, and you need a catch-all page to introduce key information<\/strong> that won\u2019t appear on the other pages.<\/p>\n

There is a lot of text on this page, but users are directed to core pages<\/strong> by two, clear hyperlinks. Scanning is supported through short paragraphs, and bold phrases.<\/p>\n

To improve scannability even more, we could introduce some sub-headings and bullet lists to break up the text, add white space and support scanning.<\/p>\n

You can also support the text by using other content pieces<\/strong>, such as images, videos or quotes. The quotes in this example help to break up the text, and they\u2019re relevant to the main content<\/strong>. They help to quickly support the message of the section.<\/p>\n

Learn more<\/h2>\n

You\u2019ll learn how to create and manage these pages in our T4 training sessions.<\/p>\n

If you\u2019re stuck, we can help you work out what format will work best for your navigational pages.<\/p>\n

Have a look at :<\/p>\n