Images and Responsiveness

Images and Responsiveness Tips for selecting images that will look great in your community

Choose an image that is "mobile responsive". What does this mean? See below:

  • Choose an image that is generally dark or generally light so that your text looks great. Don't choose an image that goes repeatedly from light to dark. Dark text looks great on light images and is quite readable. Light text looks great on generally dark images and is quite readable. If you choose an image that has light and dark regions throughout the image, neither dark text nor light text will be readable.

  • Avoid images with a face in the middle. This is, by definition, a "brittle" image. Additionally, text across a face is usually quite awkward.

Images and Mobile Responsiveness:
Designing a web page that can adjust to vastly different screen-size configurations and browsers is a notoriously challenging task. We’ve spent a lot of time studying and implementing the most modern best practices in web design to ensure that your images display well across multiple platforms. While most images in your content will render just fine, some mobile-responsive widgets contain user-inputted images. In these cases, it’s important to understand best practices for incorporating images into designs that can vary in dimensions.

 

 

You will notice, for example, that many of the pre-selected banner choices in the admin panel are abstract designs because the banner image needs to hold up under a number of screen size conditions.

The rule of thumb for selecting elements for responsive views is to test for the “flexibility” of the image. By “flexibility” we mean a measure of how well your image conveys its meaning effectively even if cropped slightly or resized into a different configuration. The opposite of fluidity is brittleness: a brittle image needs to be rendered at precise dimensions to convey its intended message. Abstract designs or patterns work well in responsive web design because they can convey the essence of your theme or brand without being held hostage to an exact pixel width and height. IdeaScale already encourages this sort of design pattern in the admin panel under banner selections: You will notice, for example, that many of the pre-selected banner choices in the admin panel are abstract designs because the banner image needs to hold up under a number of screen size conditions.

Here’s a head-to-head comparison of a brittle versus a fluid image, both used as slide background in the responsive carousel page element:

 

Left: “Brittle” image – man on the beach
with child. Right: “Flexible” image – stone pattern. We will use the two images above in sample implementations, below:

 

 

Both images work on the full-size, desktop layout

 

 

In a transitional moment to a smaller screen, however, notice that in the beach scene, the figure moves outside the frame, while the stones still maintain their original semantic integrity.

 

 

And on the mobile view, the discrepancy is even more apparent. The responsive view is forced to reduce the size of the image, and ends up cropping the figure altogether. The stone image, while cropping a significant portion of the image to accommodate the smaller screen, continues to maintain its semantic integrity.

We no longer allow SVG images