For a site to operate correctly in a responsive design, throughout different platforms, and to maximize web usability, follow these best practices.
- 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: 225 px by 225 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, Clipart, and Stock Images
- 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.
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 (Alt) 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.
- 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).