{"id":1202,"date":"2015-10-19T12:00:32","date_gmt":"2015-10-19T11:00:32","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1202"},"modified":"2015-10-19T09:53:09","modified_gmt":"2015-10-19T08:53:09","slug":"streamlining-structure-and-systems-case-study-of-academic-unit-sites","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/19\/streamlining-structure-and-systems-case-study-of-academic-unit-sites\/","title":{"rendered":"Streamlining Structure and Systems: Case Study of Academic Unit Sites"},"content":{"rendered":"<p>This is the second of our Go Mobile show and tell posts. Jane has already introduced some features of the new design using examples from central sites. Now, I&#8217;m going to look at some design changes on academic unit sites.<\/p>\n<h2>Tabbed pages<\/h2>\n<p>Our school sites are large. They&#8217;re complex and in some cases six or seven levels deep. Through Go Mobile we&#8217;re improving the structure of our sites and this includes making them shallower. One way of doing this is to introduce tabbed pages. Tabbed pages also allow us to split up long pages into shorter sections.<\/p>\n<p>Take this example from the School of Agriculture, Food and Rural Development (AFRD).<\/p>\n<div id=\"attachment_1206\" style=\"width: 991px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-full.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1206\" class=\"wp-image-1206 size-full\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-old.jpg\" alt=\"Screenshot of cropped research group page on old Agriculture, Food and Rural Development website\" width=\"981\" height=\"648\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-old.jpg 981w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-old-300x198.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-old-454x300.jpg 454w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><\/a><p id=\"caption-attachment-1206\" class=\"wp-caption-text\">Click on the image to display the full, uncropped version of the Food Quality and Health page on the old AFRD website.<\/p><\/div>\n<p>Their research groups previously had a single page that included:<\/p>\n<ul>\n<li>an overview of their research interests<\/li>\n<li>a list of research themes<\/li>\n<li>a staff list<\/li>\n<li>a projects list<\/li>\n<li>information about their teaching and learning activities<\/li>\n<\/ul>\n<p>The new tabbed page allows this information to be split out into three or four much shorter pages with the tabs showing across the page on desktop.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1205\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new-1024x798.jpg\" alt=\"Screenshot of tabbed research group page on new Agriculture, Food and Rural Development website\" width=\"584\" height=\"455\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new-1024x798.jpg 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new-300x234.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new-385x300.jpg 385w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-new.jpg 1259w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a>On mobile the tabs appear in a drop-down menu:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-mobile-collapsed.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"  wp-image-1214 alignnone\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-mobile-collapsed.jpg\" alt=\"Screenshot of research group page on mobile with drop-down menu collapsed\" width=\"248\" height=\"464\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/a><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-mobile-expanded.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"  wp-image-1215 alignnone\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/afrd-research-mobile-expanded.jpg\" alt=\"Screenshot of research group page on mobile with drop-down menu expanded\" width=\"248\" height=\"464\" \/><\/a><\/p>\n<h2>Staff lists<\/h2>\n<p>In both the old and new design staff lists are generated from MyImpact data. The main difference, as you&#8217;ll see below in the example from the Schools of Architecture, Planning and Landscape (APL) is that profile images are now displayed in staff lists on desktop.<\/p>\n<div id=\"attachment_1209\" style=\"width: 966px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-old.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1209\" class=\"wp-image-1209 size-full\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-old.jpg\" alt=\"Screenshot of staff list on old Architecture, Planning and Landscape website\" width=\"956\" height=\"815\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-old.jpg 956w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-old-300x256.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-old-352x300.jpg 352w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><p id=\"caption-attachment-1209\" class=\"wp-caption-text\">Old APL staff list<\/p><\/div>\n<div id=\"attachment_1208\" style=\"width: 594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1208\" class=\"wp-image-1208 size-large\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new-1024x831.jpg\" alt=\"Screenshot of staff list on new Architecture, Planning and Landscape website\" width=\"584\" height=\"474\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new-1024x831.jpg 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new-300x243.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new-370x300.jpg 370w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/apl-staff-new.jpg 1262w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-1208\" class=\"wp-caption-text\">New APL staff list<\/p><\/div>\n<p>On mobile the images disappear so that more information can be displayed on the smaller screen.<\/p>\n<h2>News<\/h2>\n<p>News lists appear in a very similar format in the old and new designs. The biggest change is behind the scenes. Previously our editors had to use a separate system to generate news for their site. News is now incorporated into the content management system (CMS) that we use to publish all content on a website.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1211\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new-1024x347.jpg\" alt=\"Screenshot of latest news page on the new Institute of Sustainability website\" width=\"584\" height=\"198\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new-1024x347.jpg 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new-300x102.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new-500x170.jpg 500w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-new.jpg 1259w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a>The new CMS allows you to syndicate news into a feature news grid on your site&#8217;s homepage. This requires high quality imagery for every news item. As an alternative, some academic units have opted to display a simple news ticker on their homepage.<\/p>\n<h2><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-grid.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1210\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-grid.jpg\" alt=\"Screenshot of homepage news grid on the new Institute of Sustainability website\" width=\"1001\" height=\"576\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-grid.jpg 1001w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-grid-300x173.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/sustainability-news-grid-500x288.jpg 500w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a>Tell us what you think<\/h2>\n<p>As always, we&#8217;re interested to hear your feedback. All the new sites have a link to our <a href=\"http:\/\/www.ncl.ac.uk\/about\/feedback\/\">feedback form<\/a> in their footer. You can also leave us a comment on this post.<\/p>\n<h2>Related posts<\/h2>\n<ul>\n<li><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/15\/a-brand-new-mobile-world-case-study-of-central-sites\/\">A Brand New Mobile World: Case Study of Central Sites<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This is the second of our Go Mobile show and tell posts. Jane has already introduced some features of the new design using examples from central sites. Now, I&#8217;m going to look at some design changes on academic unit sites. &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/19\/streamlining-structure-and-systems-case-study-of-academic-unit-sites\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":755,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,15],"tags":[29],"class_list":["post-1202","post","type-post","status-publish","format-standard","hentry","category-design-and-development","category-go-mobile","tag-responsive-design"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1202","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\/755"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=1202"}],"version-history":[{"count":7,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1202\/revisions"}],"predecessor-version":[{"id":1223,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1202\/revisions\/1223"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=1202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=1202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}