Hero

The hero has become almost obligatory at the top of the home page. Since it is the first item visitors see it must load fast and grab attention.
The hero normally has a full width, fixed height image with an overlay containing a heading, info text and one or more CTA (cal to action) style links.

Hero Essenatials

A hero must have …

• Correctly sized & optimised images in 3 sizes for the various devices
• Images inserted using the HTML5 <picture> element to allow alt text
• The CTA(s) must entice the visitor to click through to other pages of the site
• Image file size as small as possible to maintain desired quality

Hero Sliders

A full width or content width slideshow must have the image inserted in three sizes for the various devices - computer, tablet and phone portrait.