web design

How to design optimised hero modules

Hero images, slide-shows and videos usually cover the whole viewport. This is quite simple to achieve with pure css table or a little bit of js.

If we care of showing the content below the hero image without scrolling – perhaps contact details or a fragment of page’s navigation menu, just to make it more intuitive for the user, things get a bit tricky. Also if we just try to maintain a nice position of the image’s focus point across different devices.

I’ve analysed about 20 most common devices, from smallest to largest, and came-up with a optimal sizes and proportions of a hero module for each of 9 groups.

In the testing phase the hero image-set was manually created using this Adobe Illustrator template featuring destination break-points and aspect ratios.

Following there is an example of how the Illustrator template helps in analysing and correcting the composition of the hero images.

Subsequently a simple command-line tool has been created. It operates on the optimal settings as follows:

Even though the above proportions were determined about 2016 they still work well in 2019 and probably beyond. Most of the new devices’ aspect ratios are similar to those and adjustments weren’t necessary yet (2019).

The exception will be the iPhone X-ish devices. Those portables have significantly taller screens than seen before (apart from some Android tablets), therefore when held in horizontal position, the horizontal breakpoint will be in the iPad area. Common approach would be to use the portrait/landscape breakpoint but I’ve worked out that it is more reliable to just add an additional, vertical breakpoint instead and hide the hero image whenever not needed.

Following there is an example of a complex, collage-style hero image and how the template helps design it to look well on all popular screens:

An example of well-balanced composition of a responsive hero module:


The template

The following template is helpful in composing hero images – especially ones that have odd (e. g. not centered) focus-point or collage-style hero, with more than one focus point. It shows crop and safe-areas for 9 typical screen sizes.

Download hero layout template

Leave a Reply