{"id":1895,"date":"2016-08-19T10:20:32","date_gmt":"2016-08-19T09:20:32","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1895"},"modified":"2016-08-18T10:20:46","modified_gmt":"2016-08-18T09:20:46","slug":"best-practice-example-grid-boxes","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2016\/08\/19\/best-practice-example-grid-boxes\/","title":{"rendered":"Best practice example: grid boxes"},"content":{"rendered":"

We\u2019re often asked for examples of really good websites. The thing is, each site is different, depending on the type of site, their users, and their needs. Websites constantly evolve<\/strong> due to changing user needs, business goals or time-sensitive messaging.<\/p>\n

So there\u2019s not really one static best practice example that ticks all the boxes for everyone.<\/p>\n

What we can do is point you in the direction of really good content usage<\/strong> to take inspiration from.<\/p>\n

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.<\/p>\n

Here\u2019s a couple of\u00a0examples of best practice for grid boxes<\/strong> from recent Go Mobile batches.<\/p>\n

Grid boxes<\/h2>\n

Grid boxes<\/a> are used for homepages and\u00a0section openers. 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>, so users can easily see where they are in your site. Because of this, they should 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

\"boxes<\/a>

Newcastle University Medicine Malaysia Study With Us section<\/p><\/div>\n

This example is from Newcastle University Medicine Malaysia<\/a>. It uses our \u2018top task box – dark<\/strong>\u2019 content piece.<\/p>\n

This is basically four links, but presented in a visual, structured way. Visitors can immediately see what\u2019s on offer. This is a good option when you want to give a quick overview of different services<\/strong>, for example.<\/p>\n

For this Study with Us section, it was important that we had clear pathways signposted<\/strong> for four key groups of users: undergraduates, postgraduates, international students, and parents.<\/p>\n

We wanted each group to feel catered for, supported, and have easy access to pages <\/strong>that would help them.<\/p>\n

You can have some text above grid boxes. Keep it short, and don\u2019t add any if it\u2019s not needed. The boxes should take centre stage<\/strong>, and do a quick job of moving users on to core pages.<\/p>\n

\"boxes<\/a>

Mechanical Engineering Study With Us section<\/p><\/div>\n

This example is from the School of Mechanical and Systems Engineering<\/a>. It uses our \u2018top task box – light<\/strong>\u2019 content piece.<\/p>\n

This box type gives you the option to include some hyperlinks (max. 4) below the image and main link. It\u2019s a good option for pages where you know there are several core pages that you want to highlight<\/strong>.<\/p>\n

In this example, we wanted to signpost prospective students towards the undergraduate pages, but knew that they\u2019re likely to want to know about courses and funding in particular.<\/p>\n

Light top task boxes are great for larger sections where you want to direct users explicitly to core pages<\/strong>.<\/p>\n

Think about what the key messages for the section<\/strong> are, and what your user is looking for. Work out what are core areas (give them boxes), key pages within these areas (give them links), and what is additional information (don\u2019t link them from your section opener).<\/p>\n

Your additional information pages (in this case, the Careers page) will always be available within the section via the menu.<\/p>\n

Learn more<\/h2>\n

You\u2019ll learn how to create and manage these pages in our T4 training sessions. And you’ll find out how to identify your core pages in our training on planning web content.<\/p>\n

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

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