The Pizza Express Hotspot Tutorial

The Pizza Express Hotspot Tutorial

I’ve been working with Pizza Express as a developer for their emails since I started at the email agency ActionRocket. The exciting thing about these guys is they love to push email to include some cool interactivity and really want to experiment with the channel to get results.

The brief came in to add some interactivity to the new dessert menu – they always have lovely photography of all the food and one image had all the new desserts. As usual, I had been flicking through Curated Emails and seen some emails that got me excited about playing with links in images. One of the instigators of using CSS and interactivity, B&Q, had recently sent an email with ‘hotspots’ on their ‘Yule love this!’ email.

The idea was then planted to have an interactive clickable, hotspot image, something a user could click on to find out what these delicious desserts were…

Obviously, you can check out the code behind the B&Q email on curated.email – to check out the code behind the PizzaExpress desserts email, find it complete here.

Design wise we chose to follow a similar style, to make the hotspots obviously interactive. One thing we have noticed is users are not expecting emails to be interactive – the more we integrate these interactive parts, the more used to it they become, but for now, it is still something special – so you need to draw attention somehow!

To create the whole interactive section, the idea we used was Justin Khoo and Chris Coyier’s CSS check-box interaction that is supported across iOS, Apple Mail, native Android mail and when emails are viewed online. It is worth taking into account your email recipients email clients – PizzaExpress have a large percentage on these email clients – so is well worth investing the time, but we did still provide a ‘fallback’ – in this case an image with all of the dessert labels included, with the same CTA below to “Find out more” online.

The interactive module is made up of a background image with the hotspots floating on top. The hotspots were animated to draw attention and when you clicked on one, an image with the dessert name appeared, you could click on all the desserts to show the label, or click again to hide the label.

Background Image:

Button:

Label:

The Code

For the interactive module, we include the styles within style tags

just above the HTML, this way everything up to the interactive section will load. Followed by the interactive module, which can sometimes be quite large, meaning it has the least impact on an email size when entering a recipients inbox. We set up the checkbox detection first to make sure that all clients supporting the interactivity showed the hotspots and all others showed the correct fallback.

Following this – as we wanted the image and the hotspots to be responsive we needed to split the CSS into two sections, desktop, and mobile. We declare the background image and load the hotspot image for each button.

The above use position: relative and display: block!important; overflow: hidden; to ensure the image is displayed relative to the table, the whole image is shown and elements are displayed correctly around it. Setting the image dimensions in pixels, 640px being the width of the table surrounding it, so it goes full width, but only up to 640px on desktop.

The above first part gives all the styles for the image as a label for the checked box. z-index: 7; so it is on top of the background image, but below the dessert label, the -webkit-animation refers to the below keyframe animation, -webkit-box-shadow to set the shadow around the button and cursor: pointer; so when on desktop the user sees that part is clickable.

The following part is to add the image to the label, using url() to bring in an image,

Next the positions of the dessert labels using pixels to set the padding left and top. Setting the z-index:1; means it is visible on top of the background image and pulsing button.

Lastly, for Desktop I added in what should happen if one of the labels was clicked (checked). Essentially listing what happens – if you read it like a sentence I find it works best –

“If #cake1 is checked anything in a div named #cake1-content should do whatever is in the curly brackets { display: block!important; – this changes the setting above from display:none; and should show the following image found at this url; make sure it’s z-index is higher than the others to be shown on top”

Mobile

Next, I declared the same for all the mobile elements. The major difference being the positioning of the content labels and the hotspot buttons and the size of the background image. As mobiles have a range of screen sizes and I wanted to see if we could have it responsive and scale to the screen size I ventured into using vw (viewport width) to set the background image size and padding on the left and top of the buttons. vw uses the viewport width to determine how to scale the measurement so it is the same on different screen widths, it is expressed as a percentage eg. 10vw is 10% viewport width (1vw = 1% of viewport width).

This lead to some head-scratching about maths and also finding out that although vw is supported widely in email clients vh (viewport height) is not – so to find the vh you could find the equivalent vw as shown below:

Followed by the keyframe animation for the pulsing button and the different outcomes if the label was clicked, the same as for desktop.

As you can tell from the above this essentially made a separate interactive module depending on the screen size of the email recipient – I use the snippet of code below when I want to show a different piece of content to desktop users and mobile users.

Laying out the interactive html – it is best practice to make sure the fallback comes as close to first as possible, this is to ensure that if the email gets clipped, say in Gmail, the fallback should still show, whereas if it followed after all of the interactive code, the main message could be lost.

Next we open the specific div to hide the interactive content from samsung devices with <div class=”samsung”> and the mso conditional comment to hid from all microsoft outlook <!–[if !mso]><!– –> Following that we open the div containing all the interactive elements – with the style – mso-hide:all;display:none;max-height:0;overflow:hidden; to make sure it is not shown on any clients unless it is compatible with the checkbox CSS.

Directly following the desktop interactive module is a mirrored code for the mobile email recipients.

Hopefully, that inspires you to go out and find the perfect project for an interactive hotspot module in your next email campaign. Any questions – feel free to message me on Twitter, or drop me an email.

About

curated.email is a handpicked selection of email designs and content ideas. We’ve amassed one of the largest and most popular collections of email designs on Pinterest over the last five years and this is really just an extension of that. We hope that you find curated.email as inspiring as we find the emails that we post here.