Best Practices


 





Image and Slideshow Best Practices

Overview 

For a site to operate correctly in a responsive design and throughout different platforms and to maximize web usability, please follow these best practices when you place images on your page.

Best Practices

Image Size

Images inside the content area should be large enough to display clearly on a desktop, tablet, or mobile device as well as on devices that use a high-resolution screen, like on the iPhone, newer Android devices, and most iPads.

You should upload an image about twice as large as it will display on desktops (meaning if you want the image to display at the recommended 300-pixels wide, the image you upload should be 600-pixels wide) and let the CivicPlus GCMS automatically handle resizing and optimizing that image for you. 

  • Note: On websites that are not designed to be responsive, the GCMS will not resize images and we recommend a maximum width of 300 pixels.
  • There are also specific image requirements for News Flash, Calendar, Alert Center, and Facilities. 
  • Reasoning: Your websites have visitors with a large variety of screen sizes and resolutions. The CivicPlus GCMS is designed to automatically display the properly sized version of any content-area image on a responsive website. The key is to have a high-quality image from which to start optimizing. 

Clip Art & Stock Images

Clip art and stock images should not be used in your content. Choose images that add value to the content. Decorative images can make information harder to access for people using assistive technology. Read more about WCAG 1.1.1.

Number of Images Per Page

In most cases, one or two static photos per page is the maximum. Additional photos should be placed in a slideshow widget or in the Photo Gallery module

  • Note: The more images you have, the longer the load time the page can experience. 

Alternative Text

Descriptive alternative text should be used in images. For instance, an alternative text should be "black and white police cruiser with lights on" instead of "cop car." Read more on our Create Alt Text for Images page.

  • Reasoning: Alternative text is important when using a screen reader to access the site and for WCAG 1.1.1.

Slideshows

Images in slideshows should be the same size to prevent displaying white space to fill the unused space in the slideshow by a smaller image. It is recommended the photos be appropriate and consistently sized and/or edited before being uploaded to the site or widget. Additionally, try to limit the number of photos in each slideshow to a dozen or so images.

  • Compliance: In the options, slideshows are required to display next/previous arrows, as well as pagination. Read more about WCAG 2.2.2.
    pagination_compliance.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback