Transcription
Audience: [Applause]
Mark Robbins: Hello. Hello. Yeah, so email. It’s great, isn’t it? I know it’s something that a lot of Web developers love. A quick show of hands. Who has built an HTML email at some point? Who’s done it? Yeah, that’s most of you. Okay.
Now, who really enjoys that and thinks building email is better than building a website; it’s much more fun? Yeah.
Audience: [Laughter]
Mark: Yeah. Brilliant. [Laughter] I am Mark Robbins. I am an email developer. I don’t touch websites, really. I haven’t professionally worked on a website for, like, over three years now.
I work for a company called Rebel, and we basically make tools for building emails, so we just export fully functioning email code. I do a lot of testing around lots of different things within email. Lots, lots, and lots of testing and bug fixing, consistently.
Yeah, if you’ve got any questions and stuff, I’m on Twitter, so just give me a shout, @M_J_Robbins or @GoRebelmail. I’ll be around later as well, so just ask me questions as we go.
One of the things that people, like Web people, don’t really like about email is the limitations. You can’t do any of the cool stuff that you can do on the Web in email, or like this cool, modern stuff.
So -- sorry, I’ve gone the wrong way. [Laughter] It’s a short talk. [Laughter]
Audience: [Laughter]
Mark: Modern email clients can support all these things listed down here. SVG, the stuff that Sara is showing, I haven’t tested anything quite that complex, but it should work. Basically, the rule of thumb: If it works in Safari and doesn’t use JavaScript, it’ll work in Apple Mail.
Like I say, all these things--SVG, CSS grid, CSS animation, HTML video and audio, CSS filters or background blend modes, responsive images, and interactivity, which is what we’re going to be talking about today--you can do all of that in email. It’s not going to work everywhere. If you put that into Outlook, on Outlook desktop on Windows, none of those work. If you use it on Outlook desktop on Mac, everything there works.
Audience: [Laughter]
Mark: [Laughter] Interactivity is the bit I’m going to focus on today, interactive email. What is interactive email? It’s an action taken in an email that triggers an event within the same email. What I mean by that, I am quoting myself as well.
Audience: [Laughter]
Mark: I like to do that. [Laughter]
Audience: [Laughter]
Mark: What I mean by that is, traditionally in email marketing and stuff, you would send out an email with some text, some images, some links. The goal is to get somebody to click on one of those links, go your website, and complete an action on the website. Whereas with interactive email, we’re trying to get people to complete the actions in the email clients without ever leaving the inbox.
There are a number of ways to do that, which I’ll get into. Basically, it’s done with CSS. The interactions, the two groups of interactions that I talk about are fleeting interactions and more lasting interactions. The fleeting interactions are hover, focus, and active, the things that you’ve probably used quite often.
The reason I say fleeting is because this code is only true for as long as I’m hovering over it. This is only true for as long as it’s in focus, and this one as long as I hold the mouse down. Two things here: You can fake a longer interaction with a transition delay, but it’s still fleeting. If you set the transition delay for 60 seconds, then one minute after you finish doing the interaction it’s gone, so it’s still fleeting. The other thing which you can do with these is you can combine focus and hover if you do it in that order. But otherwise, yeah, they’re pretty basic. There’s some stuff you can do with them, but they’re useful tools, which I’m going to show later.
The other type, the more lasting static interactions are based around checkboxes and radio buttons. Some of you probably know to use the checkbox hack a bit. Basically, just on the far left there, there’s a tiny little radio button there, that checkbox. Then next to that I’ve got this code block. When that input is checked, using a sibling selector to apply the style to the element next to it, this code block, I just click on that and it changes. The reason this is the more lasting static interaction is because that will last. I can go backward and forward, and it’s still checked until I make the conscious decision to click, to uncheck it.
The same thing. Checkboxes work with a radio button, so I’ve got three on this side here. The useful thing with radio buttons is only one of the radio buttons in an array can be checked at a time. At the moment, the first one is checked. When I check the second radio button, the checked value is lost from the first button and applied to the second. Then the same for the third. With this, we can build a number of things.
That’ll bring me up to my first example. We’ll just get that over here. There it is. I built this little email here. Let’s make it a bit bigger. Just built this for a bit of fun. It’s just a little photo gallery in an email. It grabs some of the images of previous T-shirts from the btconf. You can just click on them, and it changes it.
Essentially, we’ve got five images here, so there are five radio buttons. When the first radio button is checked, the first image is shown. When the second radio button is checked, the second image is shown. This is just using the basic radio button, but just styling them in a different way and giving them some functionality. As I say, these things don’t work everywhere, so I’ll talk a little bit about the way we progressively enhance something like this photo gallery.
There was a blog post. A guy called Chad White at Litmus wrote this brilliant blog post where he looks into the different potential renderings of an email that sends out. He said, on average, the average marketing email that’s sent out has 15,000 potential renderings, which is quite a lot. That’s conservative calculations he’s using there.
Using the same logic he has, I worked out for Web, and there were just 75. Also, I looked into the project I was working on at the time, and it was 75,000. There are quite a lot of variations for testing. You can’t test all that.
One of the things we do for the photo gallery particularly was we break these down into three groups of static, limited, and interactive. Static is going to be something like your Outlook desktop Windows, which you’re not going to get the interactive, but you can still give somebody a good experience, so you just put fallback. In this case, I’ve just done one image, but you could put whatever fallback you wanted in there. You could put all the images in a row, in a grid, or however you want it.
Limited has got some interactivity, but it’s also slightly limited. In this gallery, you can see it does still work. I can click around. That limited will be something like Yahoo mail, AOL mail. A few of the Android mail apps fall into that as well.
Then interactive, which is all your bells and whistles, that would be something like Apple Mail on the desktop or the iPhone native email client, which is really good. They are, as I say, basically Safari, but without JavaScript. VH units mess up a bit and position fixed has issues. But, generally, it’s the same.
With this interactive one, I can add to this a little transition effect there, so you can just see here it’s quite a hard jump between on the interactive. Just add a little transition in to make it a little bit smoother. Also, I’ve got this infinite scroll, so you can just keep scrolling, putting arrows on either side. It’s just adding that little polish. You’re making it look a bit fancier.
Yeah, this is where I get the stats from. Actually, I’ll jump back a second because I didn’t mention the percentages. The percentages there are based on opens, so global average opens, which I’ll go into in a minute. Thirty-seven percent of people who receive this will get the static version, 5% will see limited, and 51% will see the interactive version. It doesn’t add up to 100% because I’m only looking at the top ten because, yeah, this is where I got the stats from. It’s emailclientmarketshare.com.
Litmus, one of their top products they have is this email analytics tracking code that you put in your email. Every month, they combine all that, and they release it. This is based on 1.23 billion opens from last month. You can see, out of that, 28% were opened on an iPhone. Apple, we’ve got quite a good dominance there with the iPhone, the iPad, and Apple Mail all in the top five, and they all have very, very good support. It’s, yeah, as I say, basically Safari.
Forms is another thing I wanted to mention. HTML forms work in about 77% of emails, so there’s pretty significant support for them. However, there are quite a few issues around them. There’s better support for GET than POST. If we’re looking at POST, I think it’s more like 20% support. That’s okay. We just GET.
There are a variety of bugs, particularly text inputs. One which is quite weird is, on Androids, a number of Android email clients, you get a text input, a text area or text input. You click on it, and the keyboard doesn’t show, so you can’t type into it. You can copy and paste text into it. You could submit it. That all works fine, but you can’t actually type into it. Although, Gmail fixed that recently on their Android app, so that’s given us a little bit more. But, with all these bugs, it does take quite a complex set of layers of targeting to get that 77% of people seeing the form and the others seeing a fallback.
Also, this is constantly changing. With email, we don’t have beta versions. We don’t have release notes. We don’t have documentation. We have to do it all ourselves. We have to just reverse engineer what the support is. There are little bits starting to happen, so we’re hoping that’s going to continue, and we’ll get better documentation around the support. But, generally, when you find a bug, it’s because somebody you see it yourself, somebody is sharing it on Twitter, or there’s an email geek Slack group, which is really good. It’s a great community. Everybody is always sharing these bugs because you need to. We need to share them, share the bugs and share the fixes as well.
If you are going to do something like forms, I would say be wary, and you need somebody maintaining that code. You can’t just write a template and then use that because you need someone keeping an eye on that, maintaining it regularly. I mean I’m pushing weekly updates for things like that.
I’ll show an example of something with a form. This is just a simple review email. Again, I’ve done it for the conference just for a bit of fun. You can see that looks like your regular review form. You’ve got a little star rating, so let’s give it a five star, a title, “Love it,” review, some words, and then we’ve got a little select menu. Although, this isn’t actually a select menu. This is done with radio buttons.
The reason we use radio buttons for doing this is because it’s trackable. We can track. You can track what the person has selected before they submit the review. We can track quite a lot. It’s all done with pixels, tracking pixels as a background image. When this is selected, when this checkbox is checked or this radio button is checked, then load this background image. It just records it in the backend, so we can detect that this person has clicked on five stars.
We can detect they’ve clicked into the text area and the text input, but we can’t detect what they’ve written until they submit. Then you can detect the selection there. Also, it gives you more styling options doing this with radio buttons. Then you just hit submit, although I’ve got a little checkbox to confirm. I’m happy to do that. Then you can submit the form.
With that, that will just be sent as a form would normally if you’re doing it on the Web, and it will just hit the review system you’ve got in the backend and work as it would normally. You would redirect the user to the Thank You page, as you would normally.
We have done this with quite a few clients, and we’ve got doubled conversion, basically, across a number of people we’ve done it with. We’re just split testing the normal, standard review of click here to go to our website and leave a review compared to something like this, which is just straight away saying, “What do you think?” People really do engage with it.
One of the things as well that people often ask is, well, how do you know that you can interact with this because it’s in an email? We use these design conventions. You look at that. It looks like a form. It looks like you can click on it. The same with the gallery. If you see the image with smaller images below it, it looks like a photo gallery. This is a very common design convention, and people are used to using it. They don’t really think that they’re in an email and might become work. They just see a gallery.
Then I was playing around a lot with this, and I wanted to push things a bit further to see how far I can sort of push this in email. Actually, one of the things. There is a limitation of 100 kilobytes, 102 kilobytes in an email. That’s just your HTML CSS, the file you send. Anything over that increases the spam score, so you’re more likely to hit the spam folder. Also, it gets clipped in a number of email clients, so it’ll just cut off anything after that and you have to click to load it again.
I wanted to see how much I could push it, and I’m going to show you what I came up with in a moment. As I was working on this sort of concept email, I was debugging it, and I had all the radio buttons showing. It looked something like that, and I wanted to see. I looked at that, and I thought that looks like a punch card, like the old IBM punch card I’ve got on the right there.
I started thinking about it a bit more. I thought, well, it kind of functions the same. With this punch card, you’ve got a number. Basically, the way it works, you’ve got a piece of card with a number of places where you can either punch a hole or not. You put it into the machine. The machine will look and see whether there’s a hole punched or there isn’t.
The same with the radio buttons. The computer looks through the code, and it will see whether the radio button is checked or not. You could also think of that as if it’s true or false, or if it’s a one or a zero. You start stringing together these ones and zeros, and you get this almost binary like logic that you can build stuff out of.
When I started thinking about it like that, I realized actually there’s so much more. There is so much more possibility here than by doing the photo galleries. It really helped me understand what it was I was coding, how to develop it, and how to push it forward a bit more.
One of the things as well, we’ve got all these radio buttons, and we have them all at the very top of the code. For this punch card technique, they all need to be at the top of the code, so they’re all siblings with each other. Then after all those, you have a div as a wrapper for all your content. Every one of those radio buttons will be a sibling of the div. Then you can change any piece of content inside that by editing those radio button’s checked status.
I got a bit of CSS here just as a little sample to show you. It’s actually quite a short selector for some of the stuff we do. We’ve got item A3 checked. If you imagine we’ve got an array of radio buttons. Five of them, say. Item A and number three is checked. That is a sibling of B6, which is checked, which is a sibling of C2, which is a sibling of D11, which is a sibling of E5 not checked. Anything else in the E array could be checked, or none of them checked, just as long as 5 isn’t. Then this is still true.
Then we count through F2 checked, D5 checked. That’s a sibling of the wrapper. Then inside the wrapper, we have a class of foo and that’s set to display none. Anything with that class will then be set to display none, but only when this very specific set of rules apply.
I’m going to show you a demo. [Laughter] This is a shopping cart that we built. This is a concept. It’s probably a few years ago now, I built this. But, it’s just as a concept of what could be done. Although, now we’re getting closer to actually having something like this in production.
First of all, we go this. It’s an abandoned cart email, so you’ve been on the website. You put a couple of things in your basket, and then you go, “Uh, no, I don’t want them.” You get an email a few days later, and you buy. It’s a pretty standard sort of email that you’d send out.
With this one, we’ve got the three products, but then next to each one we’ve got a quantity. You can change the quantity here up to five or down to zero, and it’ll take it out of your basket and restore. If you wanted five identical pairs of trousers for $249 each, then you can do that. I won’t judge.
Essentially, here we’ve got six radio buttons. Quantity: one, two, three, four, five, and there are also zero. That’s the same for each product. You’ve got these radio buttons controlling each one for the quantity.
Next to that, down the righthand side here, we’ve got the price. We’ve got the total price there. You can see that’s increasing as I change the value. But also, the subtotal, the tax, and the discount are also changing as we edit these values. That is done using CSS counters, like the CSS counter increment.
For example, if we look at the socks down here, you can see if the quantity of one is selected, then the counter increments are set to 12. If 2 is selected, then it’s set to 24. Every time, depending on what radio button is checked, then we change the counter increment on the line total, on the subtotal, the tax, the discount, and the total price. We can then do the calculations and add up all the different products depending on the quantities. Yeah, so you can do the basic calculations within that.
Another cool thing that we’ve built into this, if you’re looking at a hoodie and you go, “Yeah, that’s alright, although I’m not sure about the color.” You just click on it, and it’ll load it up in a new page. Although, it’s not a new page. This is all one singular page because we’re keeping everybody in the inbox.
Essentially, I think there are six pages on this email, and it works exactly the same as the gallery. You click a radio button and it will hide one piece of content and show another piece of content. Now we have this page showing. Inside here as well, inside each of these products, we’ve got a little gallery as well. Change the color there. I should put the size up to a large. If I go back, you can see the thumbnail image has changed there as well as the name of the color and the size. It’s all changed. Because we changed one radio button at the very top, we can change multiple things inside the email.
We’ve got our basket. We’ve edited it. We’ve changed it around. We’ve decided what we want. We want to buy it now, so we want to check out.
You scroll down to a little payment section there, and you just click, “Buy Now.” We put in some validation because I haven’t read it properly and actually, yeah, I need to put some details in. Shipping address, again, this is the same as the select menu. Check there, and check there, so this validation we couldn’t do with a select menu. You can only do it with the radio buttons because then you know that the value is checked.
Then just confirm that we’re happy to buy this and we know the payment is going through, so click that. Then that makes the button active so then you can click and then the order will be processed. The payment will be processed, and you’ll get stuff sent out to you. You just send the user onto the landing page at that point saying, “Thank you for your purchase,” rather than stopping them at any point beforehand.
Yeah, so you don’t really need the website. You just need a Thank You page and a signup form, so no more websites.
Audience: [Laughter]
Mark: [Laughter] That’s the shopping cart. Okay. Accessibility of this. I’m sure a lot of you are thinking, “Ah, but that’s not going to be accessible.” Well, it’s not completely accessible. [Laughter]
Audience: [Laughter]
Mark: But, I try. I’ve tried. I’ve done some work towards it, but it’s not. I haven’t got 100% there yet. One option you can do to improve the accessibility is you have just sort of a link to an online version, which, when you tab to it, the link shows, and then you can tab to a more accessible, online version. The issue there is with privacy. Some emails that will work for, other things they’re more private, so it gets a bit complicated. We’re still working on a solution around that as well.
The other thing is, yeah, if you’re doing all this functionality with checkboxes, there’s no JavaScript. You’re not saying where any of these things are. You’re not saying what’s changing. Then it’s not accessible at all to screen readers. A screen reader will look at that and just see text elements. It won’t see a button, and it won’t understand that it can be checked and unchecked.
I’ve been playing around with some code. I’ll show you the code in a minute, but I’m just going to show you this video first of the result. I’ll show you the result before the code, if that makes sense - if this is not working. Okay, that’ll work.
Screen reader: Heading level one. Interactive CSS accessibility. Heading level three. No added accessibility. I like CSS. You are currently on a text element inside of a frame. Heading level three: With CSS accessibility. Tick box. Button.
I like CSS unchecked. You are currently on a button inside of a frame zero, the clickless button. Press control, option, space. Press tick box button. Checked. Press tick box button. Unchecked.
Mark: Essentially, I’m trying with that all powered by CSS, but I’m trying to replicate what the screen reader does when you’re just using a checkbox as you would normally. This can be scaled up to sort of have the galleries and sort of what’s in the galleries. You can explain more. I’m basically trying to replicate what the screen readers would say, but doing it all through the CSS.
The way it works, this is a work in progress, I’ll point out. We’ve got our code here. We’ve got a label around the whole thing, so the whole area is clickable, so it’s a big target area, which we know is good. Then we’ve got a checkbox, which I’ve set to display none because it does sort of interfere with things. I did try reusing the checkbox, but it interfered with other things a bit too much. I’ve set that to display none, so we just got rid of that, although we’re still using it for its functionality.
Then we’ve got our class of faux checkbox, which is just giving us this checkbox square there. To that, I’ve added a role of button. Now, there is a role of checkbox as well, but I found that had some issues because it was looking for a checked status, and so it was slightly confusing things. I’m using a role of button there, but I’ve given it a label of tick box, so it will read it out as this is a button, a tick box button, and I’ve given it a description, which is the text accompanying it, the click me, which is a terrible, terrible text to use, but I get lazy sometimes. There’s also a tab index on there to make it focusable.
The one thing I haven’t quite got yet is, if you’re using a screen reader, this works and the role button and the tab index at zero makes this focusable and clickable. If you’re not using a screen reader and you’re just using a keyboard input, you can’t click on it. I haven’t worked that out yet. If anybody has any ideas, let me know. I’m still working on a few things. Yeah, it’s getting there.
But then I carry on through. The magic bit here is this bit of class visually hidden. I’ve got checked and unchecked text in there. Also, this is linked by the aria describe by is linking to checkbox label, but also it’s linking to the status. The status here will be read out as part of the description of the checkbox.
This is set to visually hidden, although you can see it there at the moment, just so I can demonstrate how it works. When the checkbox is checked, then the check text shows. When it’s unchecked, the unchecked text shows. Then what we use, at the very top here we’ve got this aria-live polite, so then the screen reader will now read out anything that changes inside this content.
As you change the checked and unchecked status, it will read out checked and unchecked. Then when you tab away from it and tab back to it, it will read it out whether it’s checked or unchecked as well. Yeah, you scale this up and you can do the same with galleries or the select menus and things like that that I’ve shown.
It’s not 100%, and it’s very hacky. I wouldn’t recommend using this on your website, necessarily. [Laughter] But it’s the best we’ve got so far in the email. I’ll also point out that some email clients do like to strip out role. They like to strip out the aria attributes as well. It’s very much an uphill battle but, yeah, we’re getting there slowly, I think.
Cool. Now I’m going to show you a few fun things. Yeah, that’s all the useful stuff that you might actually use, but I just want to show off, really, so let’s start with--
Oh, where’s it gone?
A little puzzle slide again. Did you get those, when you were a kid, have those little games, little plastic squares? You had the tiles you had to move around to make a picture. I used to love them. I was never any good at them, though. But, yeah, you can do a bit of a -- yeah, sort of getting there, Nicolas Cage, but then--
Audience: [Laughter]
Mark: Part of the plan of this talk is to actually complete this and show you what happens when you complete the puzzle, but I’m not very good at them, so it doesn’t work.
Audience: [Laughter]
Mark: The function of this -- [Laughter]
Audience: [Laughter]
Mark: The function of this is essentially you’ve got these eight tiles and nine spaces. Each tile has got six radio buttons associated to it, a horizontal and a vertical position, so you’ve got a top, middle, bottom, left center, and right. From those six radio buttons, you can place the tile in any of those squares.
Then around each tile, you’ve got a label just to change the position of it. Then we’re just using Z and X to put the image on top of the tile. That doesn’t look right, does it?
Audience: [Laughter]
Mark: [Laughter] Also, at the top I’ve got another three radio buttons, which simply just change the background image. I’ve got an animated gif of Nicolas Cage as well, and I’ve got Nicolas Cage as if he were a cat.
Audience: [Laughter]
Mark: That’s up on CodePen if you want to play around with it; have a look how it works.
I started playing around with 3D CSS, which I find really interesting and started to play around. I started putting some 3D stuff in, and that worked. Although actually, it didn’t work the other day when I tested it, so I didn’t fix that one, but I fixed the one I built afterward. When you start playing around with 3D and building games, then obviously the natural progression is to try and build Wolfenstein 3D in email.
Audience: [Laughter]
Mark: I thought, yeah, I’ll give it a go.
Audience: [Laughter]
Mark: Let’s see if the sound works.
[Spooky music]
Mark: That’s just an HTML audio tag styled to look like that. Then we’d play a game. I will pre-warn you. It’s very buggy. [Laughter] I might have to -- no.
Okay. Hang on. I’m going to shut it down. I’m going to start again. The damn thing. This always happens. All right.
[Spooky music]
Mark: There we go, and the game. Ooh. So, okay, it’s going to work this time. Okay, so if you click all the buttons first, then it seems to perform better. Essentially, I built this 3D layout. It’s just a little corridor that you can walk through. Then I wrapped it in a div so it’s animating it to move towards the screen.
I set the animation to pause, and then I’ve set another animation for it to move away from the screen. I want for it to swipe over to the right once, want to swipe to the left, want to rotate one way, want to rotate the other way. These are all set to pause. Then I’ve put a few buttons at the top. When the button is active, then the animation is set to running. As long as I’m holding a button down, it’s playing that animation. It’s using that sort of very basic, fleeting interaction that I started off showing you.
I’m just going to turn this music off because you know -- there we go.
Let’s go back into the game. Right. Yeah, things disappear like that. It’s buggy. Then if I turn the corner, you’ll see, oh, right, there’s a baddy there.
Audience: [Laughter]
Mark: Hang on. Let’s get a bit closer.
Audience: [Laughter]
Mark: It’s buggy. If I just do that, then -- come on. That’s not even working.
Imaging he fell over.
Audience: [Laughter]
Mark: [Laughter] Essentially, it’s just a checkbox. When you check it, it changes the animation from him shooting at you to him falling over. Let’s try this other guy. He’s around the corner.
Audience: [Laughter]
Mark: That was meant to happen. There we go. Here’s another guy.
Audience: [Laughter]
Mark: Oh, come on. Let’s do that. There we go!
Audience: [Laughter]
Mark: [Laughter]
Audience: [Applause]
Mark: Yeah. As you can see, there are quite a few little bugs going on. Sometimes it works perfectly. Sometimes not at all. If we reset it and go back in, yeah, there we go.
Yeah, also, you can walk through walls if you want to.
Audience: [Laughter]
Mark: Couldn’t do that in the original, could you? [Laughter] Actually, I’m just going to show one more game quickly. This one, there’s this email mentor program, which started recently. I got paired up with this guy, Aaron, who was working on this game. I’ve helped him out. I didn’t build this. I just sort of advised on it, but really he did all the hard work.
I love it, so I thought I’ll show it. You can play this one as well if you go to SuperMailQuest.co.uk. Then you can sign up for it and it’ll be emailed to you, so you can actually play it in your email as well.
I’ll just start the game, and it’s this little adventure game. I could go left, or I could go right, so let’s turn left. Then we’ve got this cat. We could attack, so let’s attack it. Then dodge or block. You’ve just got these options that go through. Then you could keep getting asked these questions.
It’s based on the logic of -- I don’t know if you ever had those books that you say if you want to turn left in the path, turn to page 60; if you want to turn right, turn to page 107. You get to that page, and it asks you another question. It’s the same logic as that. Actually, there’s loads of stuff.
Oh, I died.
There are loads of logic in here, and it’s a huge, huge, complex map to get through. It takes a while to complete it. Yeah, it’s really cool. Yeah, check that one out if you go to SuperMailQuest.co.uk, I believe.
I’m just going to jump back to my presentation just for one last demo. Essentially, it’s this presentation has all been in email.
Audience: [Laughter and applause]
Mark: If I just click here, you can see all the radio buttons at the top.
Audience: [Laughter]
Mark: You just jump around. Let’s make this a bit bigger so you can see. You can, yeah, change the pages as you would. It’s just the same logic as the gallery at the beginning. Everything is the same logic.
I talked about CSS grid. You can do CSS grid. That works. Yeah, have the slides as a grid layout as well if you wanted to. Yeah, there’s loads of stuff that can be done in email. Yeah, please do play around with it. Yeah, love email as much as you love the Web. [Laughter]
How do I get to the end? [Laughter] Oh, yeah, I just turn the grid off. There we go. Thank you very much.
Audience: [Applause]
