Reducing the ‘weight’ of the website is important both for ensuring pages load quickly across all devices and that the website has minimal environmental impact.
All imagery must be optimised before uploading to the site.
Photography on the website follows the Museum brand. There is no absolute guideline for photography online but the following should be borne in mind:
- If people are in the photo, is it clear they are carrying out an action?
- Ensure groups of people represent the diversity of our local community. For example, families should include LGBTQIA+ and single carers; racial and visual religious diversity is also important.
If no suitable photographs can be found, please check with the Design department for advice when commissioning photos.
- All photography should have alt-text. Any new component that includes optional photographic content should have functionality for editors to add alt-text as a default requirement.
- Avoid putting text in imagery. As much as possible, use components like HTIs to ensure the text is readable for everyone.
Icons are helpful ways of pointing out key information as people scan through the content on a page. In most cases, bullet points will suffice.
In the case where new icons are required, they should be considered as part of a wider online language i.e. it’s better to re-use the familiar than develop bespoke icons that will only be used once or conflict with widely recognised meanings e.g. avoid using icons with eyes as these can be confused with icons denoting access needs or vision related disabilities.
Creating new icons
Below are some basic guidelines when creating and using new icons.
Best practice for icons
Some helpful tips:
DO NOT create icons that are easily confused with established icons used elsewhere. Here, we have an icon that is easily confused with pointing out information for blind/visually impaired people
AVOID creating bespoke icons that can only be used once.
AVOID using icons without any accompanying text.
Illustrations are useful for several reasons. They help us communicate scientific processes and complicated ideas. They also help make our content be more accessible for a global audience of all ages.
Always aim for simplicify. Static and animated graphics should be created in a simple silhouette style where possible. However where anatomical details are needed, the style can be more of a technical line drawing. The lines should still be kept simple and clear, particularly for when viewing on smaller screens.
These are important as help readers better understand the topics or data covered in some written content by reconfiguring the information in a different way.
Animated graphics and stings
Animations made for the web must be 60fps.
In order to avoid impacting page scroll performance and to be optimised for mobile viewing, stutter etc. should be eliminated. Animations should also be able to handle a browser resize.