Developing responsive content
With responsive websites the content needs to work on a number of different screen sizes, you are no longer able to make content fit into a pre-described design.
When developing responsive content think mobile first as this is the smallest screen users will be using to view the site. Content first = mobile first!
Remember content isn’t only written copy but also includes images, videos, downloadable files and social media feeds.
- Discuss your plans with the Digital Team - contact us at digitalteam@exeter.ac.uk
- Work closely with your Web Officer to plan your content using user stories.
- The Digital Team will work on the design of the site.
Powerful websites have a balance of quality content, intuitive navigation and engaging design.
In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone.
Reusing existing desktop content and moving it to a responsive design is not appropriate due to the complexities of creating content that is accessible, and fulfils user needs, across multiple devices.
Break copy and multimedia content into smaller chunks to help users process, understand, and remember it better.
Chunking copy
- Chunking enables easy skimming — users’ preferred method of reading online. Some of the most commonly used methods of chunking copy are:
- Short paragraphs, with white space to separate them.
- Short lines of copy.
- Clear visual hierarchies with related items grouped together.
Support scanning by making it easy to quickly identify the main points of the chunks. You can do this by including:
- Headings and subheadings that clearly contrast with the rest of the copy.
- Bulleted or numbered lists.
- A short summary paragraph for longer sections of copy, such as articles or news stories.
Chunking multimedia content
The key to effectively chunking multimedia content (copy as well as images, graphics, videos, buttons, and other elements) is to keep related things close together and aligned. Using background colours, horizontal rules, and white space can help users visually distinguish between what’s related and what isn’t.