Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Image and Slideshow Best Practices

  • Updated:

For a site to operate correctly in responsive design and through 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 using 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 (Government Content Management System) automatically handle resizing and optimizing that image for you.
    • 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 having a high-quality image from which to start optimizing.
      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.
  • Slideshows: Images in slideshows should be the same size to prevent white space from filling the unused space in the slideshow with a smaller image. It is recommended the photos be appropriately 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.
    Note: The more images you have the longer load time the page can experience.
  • Clip Art and Stock Images: Clip art and stock images should not be used in your content. Choose images that add value to the content.
  • 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.
  • 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." Alternative text is important when you use a screen reader to access the site and for ADA compliance.

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.