Design Essentials


CivicEngage
®

Image Recommendations

Ensure Optimal Usability of Your Website's Images

For a site to operate correctly in a responsive design, throughout different platforms, and to maximize web usability, follow these 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 7, newer Android devices, and most iPads.
    • You should upload an image about twice as large as it will display on desktops. For example, if you want the image to display at the recommended 300-pixels wide, the image you upload should be 600-pixels wide. 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.
    • News Flash Recommendation: 693 px by 402 px at 72 dpi
      • Reasoning: Your websites have visitors with a huge 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.
  • Slideshows:
    • Images in slideshows should be the same size to prevent displaying white space.
    • Photos should be appropriate and consistently sized and/or edited before being uploaded to the site/widget.
  • Clipart & Stock Images:
    • Clipart and stock images should not be used 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 widget or in the Photo Gallery module.
  • 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 using a screen reader to access the site and for ADA compliance.
  • Image Manager
    • You can upload any number of images to the Image Manager for a specific page. The images will only be available within the specific NID uploaded on, or within a category for module pages. The directory link appears on the left, and our built-in image tools on the right pane.
    • To avoid confusion, we recommend that you periodically clean out old images if no longer used.
      • Warning: If an image is removed from the image manager that is currently in use, the image will display as an error (blank image with red x).
?



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow