Example: Srcerer (Art Direction) - 'Advert'-type banner

A short banner image is often used at the top of web pages to advertise a product or an event. Using a single image for this purpose can be challenging though as it is unlikely to work well on all device widths - especially if there is important information within the image that needs to get relayed to the potential customer.

I occasionally use an advert banner image of this type to highlight new stacks on the Shaking the Habitual website. To ensure it displays well on any device I create 4 versions of the banner image and then use Srcerer stack to add these to the site. Srcerer stack produces the required code to ensure that the most appropriate image is shown on every device.

Here is an example of the 4 images that I create (in this case it is 4 ‘artboards’ in Affinity Designer):

To view this banner in action, and to see the Srcerer settings used to achieve it, please check out this Srcerer (Art Direction) example.

If you have any questions / comments about how you might set this up for your site then let me know.

6 Likes