AI Chatbot
Red bot
Header Images
Best Practices for Home and Landing Page Header Images
Explanation for Hero Image Cropping and Best Practices:
The hero image section, located just below the header of the university web page, is designed to create a strong visual impact and introduce the page content. To maintain a consistent and accessible experience across all devices, this section uses a fixed height and a responsive width. As a result, images are often cropped on the left and right sides, especially on narrower screens like smartphones.
Why Cropping Happens:
The hero image must fill the entire width of the screen, regardless of device size. On wide screens, more of the image is visible; on narrow screens, the sides are cropped to maintain the correct aspect ratio and ensure the text overlay remains readable and well-positioned. This approach ensures that the introduction area of the page is visually balanced and that the overlapping text content always fits within the designated space.
Best Practices for Image Selection:
Images with important subjects (such as people or objects) placed at the far left or right edges are likely to be cropped on some devices, potentially cutting off key visual elements. The most effective hero images are those with the main subject centered or with abstract backgrounds that do not rely on edge details. This ensures the subject remains visible and the image looks good on all screen sizes. Previewing images at multiple window sizes before publishing helps ensure the subject is not lost or obscured by text or cropping.
Addressing Content Creator Concerns:
We understand the desire to use images where the subject may be positioned at the edge. However, modifying the hero section to accommodate every image layout would compromise the design’s consistency, accessibility, and user experience across the site. The current approach is a necessary compromise to ensure the site works for all users, regardless of device.
Recommendations:
- Choose images with the main subject in the center third of the photo, avoiding important elements near the sides.
- Consider using more abstract or wide-angle images for the hero section, and showcase detailed or edge-focused images further down the page where cropping is not an issue.
- If an image with a subject is essential, ensure the subject is not too close to the edges or top, and test how it displays on different devices before finalizing. By following these guidelines, we can maintain a visually appealing, accessible, and consistent experience for all visitors, while still showcasing engaging and relevant imagery.
Thank you for your understanding and commitment to high-quality web content.
Home Page - Full Size (Type A)
Larger Sized Home Page (Type A) Examples
Example of a full‑width homepage header image (1440 x 700) used in the UIC Red Multisite, Type A, displayed on: iPhone 14 Pro Max, Tablet (iPad Pro), Laptop (MacBook 14 inch), Desktop screens (2560 x 1440)
Home Page - Small Size
Smaller Sized Home Page – Upload Instructions
Landing Page - Full Size
Larger Sized Landing Page – Upload Instructions
Landing Page - Small Size
Smaller Sized Landing Page – Upload Instructions