EverWeb Widgets Blog

Hero Images

The Hero

A hero image is one that fills the browser width and has a fixed height. It is normally used as a header or banner near the top of the page. There are a couple of things about hero images that everybody designing we sites should be aware of with regard to image size and user experience.
Image Size
It should be obvious that you can't just insert a full width, fixed height image into a responsive page. The size of the image required to give reasonable quality when the page is viewed on destop computers is far too large for those using mobile devices.
The image should be inserted in three different sizes - one for each device type.
To be able to switch image sizes using media queries, the images can either be inserted as background images or by using the HTML5 <picture> element. The main advantage of using the <picture> is that the main image can be inserted with alt text whereas a background image cannot.
User Experience
As the browser or device window width is reduced, the center of the image remains in view but the areas to the left and right are hidden. The narrower the screen width - the worse it gets.
A better option is to change the image's behavior from fixed height on wider browser/screen widths to responsive height on mobile devices.
If viewing this page on a computer, reduce the browser width to see how the images changes from fixed to responsive height and then to viewport height on phones in portrait mode. Viewport height is a height of 100 viewport units which means that the item fills the browser/device window height no matter what size it is.

Sizing Images

The largest image used in the above widget is 1600px wide and gives good enough quality when viewed in desktop browsers. With a 250KB file size, it is far too large to download on mobile devices such as an iPad and completely useless for a mobile phone user.
The medium sized image is 1200px wide with a file size of160KB and the smallest one is 800px wide with a file size of 94KB. Images that are destined to be viewed on an iPhone must have their file size reduce to below 100Kb if they are not to effect the download time and burn up the visitor's data allowance.
Using Preview
Before adding content to a page, the images and other media files should be assembled in a folder so that they can be prepared for displaying on a web page.
To reduce an image in size, double click the file to launch it in Preview.app, open the Tools dropdown and click on "Adjust size …", enter the required width and click "OK" or hit the Enter key.
Images for slideshows can be quickly resized by selecting them all and double clicking to open them in preview. The "Select All" (command + a) to batch resize them.
Cropping
Although images can be cropped in Preview, anybody who uses more than a few images in web design - or any other application - will find it worth while to invest in a dedicated app. Check out EasyCrop by following the link below. Once you use it, you will wonder how you managed without it!

EasyCrop

Subtle Animation

Inexperienced web designers tend to overdo animation in their excitment at being able to create moving items. The default animations used by EverWeb have been around for a long time and have been overused and abused on zillions of websites.
Experience designers use subtle motion and animation to enhance a design without being too distracting. The image above has a scale out animation which is only set to occur once although the animation will fire everytime the item is scrolled into the viewport. It helps to draw the visitor into the image and give it more attention. This is a lot more effective than having items flying in and out or wiggling or bouncing.
The widget used to create the hero image has options to repeat the animation several times or infinitely. The animation types are scale out, scale in, scale out and in and scale in and out. The animation time is set in seconds.

Widget Info

Hero Switch & Scale

Hero Images

The Hero

Sizing Images

Subtle Animation