Note About Images and 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.

custom layout form
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 a slide background in the responsive carousel page element:

comparison of two images
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
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.
^ 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.
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 significant portion of the image to accommodate the smaller screen, continues to maintain its semantic integrity.


Back to Top

 

Limits of Design and Exceptionally Long Text Strings

While we’ve done our best to account for all possible inputs and filter where necessary, in rare cases, on certain browsers and configurations, exceptionally long words or urls in user-submitted content can disrupt the layout of certain landing page widgets. Therefore, we recommend against including urls or exceptionally long words in the titles of campaigns or ideas. Some widgets are designed to handle larger text inputs; for these special cases, consider a larger layout such as the “horizontal campaign widget” which provides more room for text (see below).


Back to Top

 

Fonts

In addition to being a security issue, custom fonts are also one of the largest contributors to page load time. Furthermore, many CSS rules for custom fonts are not standardized across all platforms yet, making it difficult to ensure a consistent viewing standard for all users, independent of their screen configuration. For these reasons, at this time, we do not support custom fonts.


Back to Top