{"id":1043,"date":"2015-10-15T12:00:51","date_gmt":"2015-10-15T11:00:51","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1043"},"modified":"2015-10-14T14:06:15","modified_gmt":"2015-10-14T13:06:15","slug":"a-brand-new-mobile-world-case-study-of-central-sites","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/15\/a-brand-new-mobile-world-case-study-of-central-sites\/","title":{"rendered":"A Brand New Mobile World: Case Study of Central Sites"},"content":{"rendered":"<p>Phase 1 of Go Mobile is now complete and we thought it timely to do a little show and tell of what we\u2019ve been up to with this Go Mobile malarkey.<\/p>\n<p>Two of our central sites to get the Go Mobile treatment were <strong>Research<\/strong> and <strong>About<\/strong>. These are clearly important sites for a research-intensive Russell group university, like Newcastle. These sites should showcase our achievements, but also need to explain some complex strategic content.<\/p>\n<p>So they need to be able communicate effectively, but now with the added requirement of <strong>working just as well for smaller mobile devices<\/strong>.<\/p>\n<p>We\u2019ve posted previously about what <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/09\/go-mobile-the-story-so-far\/\">Phase 1 of Go Mobile<\/a> entailed and also talked about <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/05\/19\/training-our-editors-to-think-digital-first\/\">new ways we have of doing things<\/a>, so here I\u2019ll showcase some new layouts.<\/p>\n<p>This post will focus on a core page on the Research website and the homepage for the About website. I\u2019m going to include screen shots of the sites before and after Go Mobile, and explain why we\u2019ve done these developments.<\/p>\n<h2>Research website<\/h2>\n<p>Take a look at the <strong>old Research Support<\/strong> section, one of the core pages of the research site:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1168\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old.png\" alt=\"Screenshot of old Research Support page on desktop \" width=\"1078\" height=\"418\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old.png 1078w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old-300x116.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old-1024x397.png 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-old-500x194.png 500w\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" \/><\/a>The page is quite informative and clearly formatted (short paragraphs and a bulleted list of hyperlinks) but not really engaging. It&#8217;s also not visually impressive, with only a small image to the right of the content.<\/p>\n<p>Now look at the <strong>new Research Support<\/strong> section:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1143\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new.jpg\" alt=\"Screenshot of new Research Support page on desktop.\" width=\"1293\" height=\"817\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new.jpg 1293w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new-300x190.jpg 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new-1024x647.jpg 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-new-475x300.jpg 475w\" sizes=\"auto, (max-width: 1293px) 100vw, 1293px\" \/><\/a>Note the:<\/p>\n<ul>\n<li>new &#8216;masthead&#8217; <strong>design<\/strong> for section landing pages<\/li>\n<li>big <strong>impactful image<\/strong> to set the scene<\/li>\n<li>new <strong>teaser text<\/strong>\u00a0overlay on the image to help introduce the section<\/li>\n<li><strong>quote<\/strong> to substantiate our claims<\/li>\n<li><strong>use of bold<\/strong> to emphasise key messages in content<\/li>\n<li><strong>content written for mobile;<\/strong> direct, informative with relevant hyperlinks<\/li>\n<\/ul>\n<p>Now, take a look at the <strong>new page on mobile<\/strong>:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-mobile2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1149\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-mobile2.jpg\" alt=\"Screenshot of Research Support page on mobile \" width=\"314\" height=\"374\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-mobile2.jpg 314w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/research-support-mobile2-252x300.jpg 252w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" \/><\/a>The<strong> page title<\/strong> clearly indicates the topic of this page and the <strong>teaser text is now<\/strong> used as an <strong>introduction<\/strong> to the page. This helps you quickly understand which page you are visiting.<\/p>\n<p>The<strong> content is split into &#8216;blocks&#8217; that can <strong>re-stack <\/strong>on mobile<\/strong><strong>. <\/strong>The<strong> priority of content<\/strong> has been optimised; <strong>the image re-sizes<\/strong> and drops <strong>under the text.<\/strong><\/p>\n<h2>About website<\/h2>\n<p>Here you can see the <strong>old About homepage:<\/strong><\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1158\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old.png\" alt=\"Screenshot of the old About homepage on desktop\" width=\"1057\" height=\"805\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old.png 1057w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old-300x228.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old-1024x780.png 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-old-394x300.png 394w\" sizes=\"auto, (max-width: 1057px) 100vw, 1057px\" \/><\/a>You can see that:<\/p>\n<ul>\n<li>boxes are built for <strong>top tasks<\/strong>, so people can find the most popular pages quickly<\/li>\n<li>there are <strong>links under each top task box<\/strong> to pages within that section<\/li>\n<li><strong>images are small<\/strong><\/li>\n<li>there are<strong>\u00a0no key messages<\/strong><\/li>\n<li>the page is not very inspiring&#8230;<\/li>\n<\/ul>\n<p>On mobile, this old page <strong>simply shrunk a bit<\/strong> to try to fit your mobile screen (but not very well) as it was not mobile responsive.<\/p>\n<p>Now compare the <strong>new About homepage on desktop:<\/strong><\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-new.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1159\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-new.png\" alt=\"Screenshot of the new About homepage on desktop\" width=\"947\" height=\"845\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-new.png 947w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-new-300x268.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-homepage-new-336x300.png 336w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><\/a>Note the:<\/p>\n<ul>\n<li><strong>top task boxes <\/strong>are still in use, to help people find what they are looking for<\/li>\n<li><strong>side menu<\/strong> is now visible\u00a0to help with navigating the site<\/li>\n<li><strong>larger images <\/strong>are used\u00a0to enhance the page<\/li>\n<li><strong>subheadings<\/strong> to help introduce content, and put it in context<\/li>\n<li>use of <strong>video<\/strong> to help support our key messages<\/li>\n<\/ul>\n<p>And see it on a <strong>mobile screen:<\/strong><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-mobile.png\"><br \/>\n<\/a><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-mobile.png\"><img loading=\"lazy\" decoding=\"async\" class=\"  wp-image-1170 alignnone\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-mobile.png\" alt=\"Screenshot of a section of the About website's homepage on mobile (showing website title and top task boxes)\" width=\"260\" height=\"554\" \/><\/a><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-video-mobile.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-1171 alignright\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-video-mobile.png\" alt=\"Screenshot of a section of the About website's homepage  on mobile (showing video and text)\" width=\"260\" height=\"566\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-video-mobile.png 260w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/10\/about-hp-video-mobile-138x300.png 138w\" sizes=\"auto, (max-width: 260px) 100vw, 260px\" \/><\/a><\/p>\n<p>The new page <strong>re-stacks all content<\/strong> for mobile, including video. All content, including images and video <strong>re-size to fit your mobile device.<\/strong><\/p>\n<p>We&#8217;ve <strong>improved section naming<\/strong> &#8216;About the University&#8217; rather than &#8216;About&#8217; helps give people more context of which site they are on and where they are in the site.<\/p>\n<p>The<strong> hamburger menu<\/strong> at the top gives access to the secondary navigation (the side menu on desktop)<strong>.<\/strong><\/p>\n<h2>We&#8217;ll keep you posted!<\/h2>\n<p>Now, prepare yourself &#8211; as we move onto Go Mobile Phase 2 <strong>more things will change.<\/strong><\/p>\n<p>Not only will other websites get the Go Mobile deluxe treatment, but we are still developing the technology, how we do things &#8211; <strong>constantly testing and improving<\/strong> what we&#8217;ve already done.<\/p>\n<p>You can always keep an eye on what we&#8217;re up next to with our <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/category\/what-we-do\/\">fortnightly updates. <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Phase 1 of Go Mobile is now complete and we thought it timely to do a little show and tell of what we\u2019ve been up to with this Go Mobile malarkey. Two of our central sites to get the Go &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/10\/15\/a-brand-new-mobile-world-case-study-of-central-sites\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1269,"featured_media":1124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,15],"tags":[65,29],"class_list":["post-1043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-and-development","category-go-mobile","tag-mobile","tag-responsive-design"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1043","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\/1269"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=1043"}],"version-history":[{"count":41,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1043\/revisions"}],"predecessor-version":[{"id":1190,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1043\/revisions\/1190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media\/1124"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=1043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=1043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=1043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}