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 <style></style> 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.

Desktop

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.

( Tip – this is easiest done live with trial and error – adding pixels until the label is in the correct place, either constantly refreshing a webpage view or in a live editor)

Next, I added the keyframe animation to make the content labels pulse – as well as the buttons positions, using the same method as for the content.

 

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:

Width of image (640) is what % of Height of image (754) = 118%

That meant the image dimensions were:

width: 100vw (100% viewport width)

height: 118vw (118% viewport width)

( Tip – use https://percentagecalculator.net/ to work out the above ^ )

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.

The HTML

When placing the html – I used the above technique, using tables so it was supported across Outlook and other email clients.

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.

Firstly the checkbox to see if the email client supports this CSS.

Followed by the div surrounding the fallback image.

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.

Followed by adding all the checkboxes for the labels.

Next the visible labels for the above corresponding checkboxes and the cake ‘content’ when the label is checked.

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 the Author

Jay Oram
Email coder – @Actionrocket
Twitter – @emailjay_
Email – jay@actionrocket.co

Part of the design and code solutions team at the email specialist agency ActionRocket. I tend to be experimenting with new code for emails or finding that elusive rendering fix.

See more articles from Jay at emaildesignreview.com

Curated News Logo

INSPIRATION: DELIVERED STRAIGHT TO YOUR INBOX

Sign up for our bi-weekly newsletter featuring handpicked email designs, content ideas and, general inspiration for #EmailGeeks, designers, and developers.

You have Successfully Subscribed!