Website style guide - I

Off

A      B      C      D      E      F      G      H      I      J      L      M      N      O      P      Q      R      S      T      U      V      W      Z


On this page:


Images

There are both stylistic and accessibility considerations when creating and selecting images for web pages:

  • First of all, does the page need an image? For informative content, particularly on a central university site such as the Incidents site, images are only used on the main homepage
  • Avoid including information (eg stats, dates and other key information) in an image. This is because screen reading devices will not pick up on this content, resulting in accessibility issues. Images are resized depending on the device used to view the site, so information may be cut off or too small for visitors using small screens
  • Use images that add value to the written content, for example to illustrate a process you’re writing about
  • Remember to include descriptive alt text when uploading an image. If the image is purely decorative, do not add an alternative text (if the CMS you are using allows this)
  • Do not overburden your pages with images. Some pages may require more images, (eg on a page about equipment and facilities), while other pages may only require a main/header image - or no images at all
  • Ensure you have the necessary rights to use any image that you put on your website. For example:
    • You took the photo yourself or it is one that you own
    • The image belongs to the University
    • The image has been purchased through an approved vendor and process, and you are respecting the terms of the license
    • The image has been obtained under a Creative Commons license,  is approved for commercial use and you are correctly attributing the image according to the terms of the license . Image hosting websites such as Flickr include these search filters.

In the CMS:

  • the image you use in a Signposting box or card should be the same as the main image of the page the link goes to
  • for department and faculty sites, use images of students where possible, ideally using equipment or conducting research in the field, as this makes the content more relatable for your target audience
  • for Home banner images, avoid busy images so the title and description text is easier to read
  • you are required to put alternative text on an image when you save it. So if it is just decorative, keep this as short and simple as possible

Graphics - Website style guide


Image resizing

Applies only to CMS

Pages in the CMS are optimised for the device which a visitor is using. The site adapts to display differently on a mobile, tablet and desktop computer. To enable this images can only be added to the main body of a page at 100% width. 


Index

Applies only to CMS

News index - Website style guide

Staff profile index - Website style guide


Intro

Summary - Website style guide

Feedback

If you have any questions or comments about this guide, contact us.

Get in touch

If you have CMS questions or are stuck then get in touch and we'll do our best to help.