The way the content looks on your<\/strong> computer, in your<\/strong> browser, is not the only way that it will look<\/strong>.<\/p>\n Some of our new content types have different behaviour depending on where they are used.<\/p>\n You should always check your content on other devices<\/strong> (or use this handy responsive design emulator<\/a>).<\/p>\n Titles as a style aren\u2019t new, but\u00a0are important when writing content for smaller screens<\/strong>. They might be the only thing your reader sees. They can also appear as navigation and part of search results.<\/p>\n It\u2019s important that what you write makes sense out of context<\/strong>.<\/p>\n News items called ‘Congratulations’ and sections called ‘Additional Information’ aren\u2019t going to encourage people to read more.<\/p>\n We\u2019ve introduced teaser content into some of our new content types. It\u2019s used here as the text overlay on the Masthead.<\/p>\n It\u2019s important that it\u2019s meaningful. It should\u00a0summarise\u00a0the page content<\/strong> as it displays in this order on mobile:<\/p>\n This\u00a0content could\u00a0be the difference between someone reading the page or\u00a0going somewhere else.<\/p>\n We\u2019ve used descriptions in news and events for years:<\/p>\n Adding a short description to the news content types doesn\u2019t appear on the news article page. It does appear in all sorts of other places where news is syndicated:<\/p>\n This micro content acts to entice your site visitor to read more <\/strong>– it needs to\u00a0work for you.<\/p>\n This example is vague:<\/p>\n This example gives some context<\/strong>, you know if it’s for you and if it is, you want to read more:<\/p>\n We\u2019re aiming to make sure all core pages to have an introduction. The intro style works well on mobile. It pulls out (and styles differently) the first piece of content.<\/p>\n We recommend a focused 50-word statement about what the page covers<\/strong>. It helps users decide whether to read more. (50 words sit well as a chunk of content viewed on most mobile screens.)<\/p>\n We\u2019ve a new expandable content style that allows us to hide content. Users have to choose to select to read the content – they can\u2019t see it at a glance.<\/p>\n This means that the heading you choose for the content is important:<\/p>\n We don\u2019t want to see vague terms<\/strong> like ‘More information’, ‘Additional details’, ‘Other’. \u00a0If the content\u00a0contains details about your facilities call it ‘Facilities’ or even better ‘Libraries and laboratories’.<\/p>\n Using terms that are more specific, help your readers find what they need.<\/p>\n We\u2019ve had some comments about how it feels more complicated and takes longer to build up web content.<\/p>\n Writing for mobile<\/strong>\u00a0forces you to think about the order of your message.<\/p>\n We could have slapped a responsive template on your desktop-focused content. If content was too long we could have\u00a0hidden it\u00a0in expandable boxes (or truncated lengthy titles).<\/p>\n The page would still look okay on desktop (it wouldn’t work very well on mobile).<\/p>\n Rewriting your content and thinking about how people read on mobile, makes sure your\u00a0users don\u2019t get a sub-standard experience.<\/p>\n Everyone who wants to read your message, can.<\/p>\n Let us know if you need help in\u00a0reworking your content<\/a>\u00a0(University Login required)\u00a0or post questions in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":" As we move into our responsive design (and T4), we\u2019re introducing\u00a0ways to make our content work better for mobile and tablet users. This means that our editors are changing the way they write web \u2018pages\u2019.\u00a0 In fact, let\u2019s scrub that. … Continue reading Writing for our new responsive design<\/h2>\n
Titles and navigation<\/h3>\n
Teaser content<\/h3>\n
![\"An](\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/08\/masthead.jpg\")
<\/a><\/p>\n![\"Masthead](\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/08\/masthead-mobile.jpg\")
<\/a><\/p>\nDescriptions<\/h3>\n
![\"description-news-list\"](\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/08\/description-news-list.png\")
<\/a><\/p>\n\n
\n
\n
Introductions<\/h3>\n
Expandable\/mobile collapse<\/h3>\n
![\"Example](\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/08\/expandable-1024x168.jpg\")
<\/a><\/p>\nWrite chunks of content<\/h2>\n
Get in touch<\/h2>\n