Responsive Design
Overall Responsive Design
All Cells in our plugin are designed to be responsive, meaning they adapt to different screen sizes and devices for an optimal viewing experience.
The appearance of a Cell can vary significantly between a large browser window and a small device due to its responsive design. The layout of each Cell is crafted to maintain usability and visual appeal across all screen sizes. As the screen size decreases, such as on mobile devices or smaller browser windows, the layout adjusts dynamically to prevent content from becoming cramped or difficult to read. This responsive behavior ensures that your content remains accessible and visually pleasing, regardless of the device or screen size used to view it. How much a layout adjusts between large and small screen sizes will vary based on each Cell’s specific layout.
Example
Display on a Large Browser Window
Below is a screenshot of the Half Image Cell being displayed in a large browser window. The layout of the Cell is split with an image and text block that display side-by-side
Display on a Smaller Browser Window
On smaller devices or when viewing in smaller browser windows, the layout changes to stack the image above the text. This adjustment prevents the content from becoming cramped or difficult to read, maintaining accessibility and visual appeal regardless of the screen size.
Aspect Ratio and Possible Image Clipping
Many Cells allow you to display an image, which is styled to fill 100% of the designated image area. The image is scaled to ensure there is no blank or empty space in the image area. However, the entire image might not always fit perfectly. Here鈥檚 why:
- Aspect Ratio: If the aspect ratio (the relationship between the width and height) of the image doesn鈥檛 match the aspect ratio of the image area, parts of the image may be cropped (hidden from view).
- The Goal is to Fill the Space: To avoid blank areas, the browser scales the image so that it fully covers the designated space. This means some parts of the image that don鈥檛 fit will be cut off.
- Responsive Design: As screen sizes change (e.g., a desktop vs. a phone), the shape of the image area changes too. This can cause different parts of the image to be cropped depending on the device being used.
Best Practices for Using Images
Be cautious when using images featuring people, buildings, or other prominent elements in images. These components could get cropped or obscured, affecting the overall composition and message of your banner.
- Choose images where key components are NOT placed near the edges of the image, as they are most likely to be clipped.
- Test your image on various screen sizes to ensure that key components of your images remain visible and unobstructed, regardless of screen dimensions.
Example
Using the same Half Image example as above, we’ll look at how the large panoramic photo is utilized within the Half Image Cell. It’s essential to note how the image may be cropped differently across various screen sizes due to responsive design considerations.
Below is a preview of the panoramic photo used in the Half Image Cell:
Display on a Large Browser Window
Below is a screenshot of the Half Image Cell being displayed in a large browser window. The image fills the available space and because the aspect ratio of the space is not the same as the image, parts of the image are cropped on the right and left sides.
Display on a Smaller Browser Window
On smaller devices or when viewing in smaller browser windows, there is even less horizontal space available. Consequently, more of the left and right sides of the image are cropped to fit within the reduced space.
Understanding these nuances of responsive design can help in selecting appropriate images and optimizing their display across various screen sizes.
Traffic To SOM Sites
The screenshot below shows the most common screen resolutions among visitors to School of Medicine (SOM) websites. Both large and small screen sizes are equally represented which underscores the importance of ensuring designs look good at various screen sizes.
