EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Invite

Transcription

1 EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Invite

2 YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is awash with attending companies delivering their pre-event campaigns, after all it s a vitally important part of the event experience. But what do you do if you weren t born with this mythical web Kung-Fu? If the thought of mastering HTML code, or telling the difference between a URL and a jpeg leave you in a cold sweat, relax! We ve got you covered. This is our step-by-step guide to building a great invite. This is a great first step on the ladder and you can send out to your contacts before a show begins. Written with the help of our own webmaster and a total novice, this guide will walk you through every element of making an invite that puts anything your office based system to shame (That s binary for Let s get coding! )

3 THINGS YOU LL NEED

4 YOUR TEMPLATE This is your template. It s pretty basic but it does the job and it looks way more professional than something cobbled together in Outlook or the like. If you click on a section of the , you ll find the corresponding page on how to edit it.

5 1 EDITING YOUR TITLE HEADER If you edit the text between the title tags (highlighted for you in yellow) this will change the name of the internet tab you have open. It ll help your contacts find your if they have lots open at once! <title>invite</title> 3 ADDING YOUR LOGO <title>hello</title> 2 EDITING YOUR VIEW IN WEBLINK You ll need to include a view in web link. Most ESPs automatically generate and add the link for you, but you should be free to edit the text it appears with to make it more appealing. We ve left the link spot blank in your download; but you can see here is the code your looking for We ve left a space for your logo here. All you need to do is upload your logo image (a.png or.jpeg file will be fine) to either your ESP or a file hosting site, then drop the URL between the speech marks next to where it says src. To fit in our template, your logo should be no more than 80 pixels high. Before <td align= left class= head318 > <a target= _blank href= title= Visit our website > <img src= alt= GES logo width= 173 height= 70 = text-decoration:none; LOGO color:#00a0af; font-family:calibri, lucida grande, sans-serif; Why do you need it? view_ _url Say your doesn t quite appear properly in your contact s inbox; the view in web link allows your contact to click on the link and view the in their web browser in all its glory. You can see here the alt text LOGO is showing as there is no image covering it After There s more on this on the next page... RETURN TO LAYOUT

6 Now you just need to do some basic code housekeeping. It s considered good practice to enter some title text (what appears when you hover over the link), a href (a place for a URL link, usually back to your website for a logo), and some alt text (the alternative text that will appear if images are disabled in your contact s inbox). Remember: Enter all your links and text between the speech marks next to the code you want to effect! 4 CHANGING YOUR HEADLINE TEXT <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:20px; color:#00a0af; line-height:21px;" colspan="5"> Lorem ipsum <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:18px; color:#444444; line-height:21px;" colspan="5"> dolor sit amet <br> This bit s easy; just delete the Lorem ipsum text and write a short headline. We always include the event name, venue and date here so it s clear what the After is about (we put the event name in the bigger teal <td align="left" class="head318"> colour text so it s easy to see) but it s your <a target="_blank" href=" title="visit our website"> <img src=" and you can write whatever you like! alt="ges logo" width="173" height="70" ="text-decoration:none; color:#00a0af; font-family:calibri, lucida grande, sans-serif;" border="0" /> <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:20px; color:#00a0af; line-height:21px;" colspan="5"> Hey there <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:18px; color:#444444; line-height:21px;" colspan="5"> check this out <br> You can see here the title showing when you hover over the image RETURN TO LAYOUT

7 BODY 5 CHANGING THE IMAGE The process of changing this image is the same as changing the logo, but we ll explain it here again: We ve left a space for your main image here. All you need to do is upload your image (a.png or.jpeg file will be fine) to either your ESP or a file hosting site, then drop the URL between the speech marks next to where it says src. To fit into our template, your logo should be no more than 640 pixels wide. We ve intentionally squished an image in here and so it doesn t look right. If you don t have Photoshop, this is a handy trick you can use to adjust image size in your code: Look for the bits that say width= and height= Just change the values to what you want bear in mind that image width and height are measured in pixels. width= 638 height= 242 width= 638 height= 150 <img src="" alt="image" border="0" width="638" height="242" style="display:block; border:none; outline:none; text-decoration:none; color:#00a0af; font-family:calibri, lucida grande, sans-serif;" class="banner"/> CODE HOUSE KEEPING! It s considered good practice to enter some title text (what appears when you hover over the link), a href (a place for a URL link, usually back to your website or landing page), and some alt text (the alternative text that will appear if images are disabled in your contact s inbox). Remember: Enter all your links and text between the speech marks next to the code you want to affect! MUCH BETTER! Unlike web browsers, clients aren t as forgiving so you need to define the width and height values or your image might not appear. RETURN TO LAYOUT

8 6 7 TEXT IS TEXT! FOOTER This is the only part of the that has a different colour background. <td style="font-family:calibri, lucida grande, sans-serif; font-size:15px; line-height:18px; font-weight:normal; color:#444444;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor So, if incididunt you want to ut change labore it, just et follow dolore these magna simple aliqua. steps: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <table width="640" bgcolor="#444444" Another easy bit; all you need to do here is delete the Lorem ipsum text and replace it with your own. Invites should be short, to the point and friendly. Vital pieces of information to include are: Your stand name Your stand and hall number Look for the little bit of code that says bgcolor. You can set by either a hex value or a word (use this handy guide to choose your own colours!) The below example shows the different ways you can create a standard blue: bgcolor= #000fff bgcolor= blue What your visitor gets for coming to see you e.g. a discount off your product when they present a copy of your Sign off from a person, not a team e.g. John Smith Managing Director, The Super Widget Company TOP TIP If you need to find any text in and amongst all this code, use the find function (Ctrl+F Keys) Read on for more information about editing the text in your footer... RETURN TO LAYOUT

9 8 SO WHAT ABOUT THE TEXT! This is just the text in your footer; we usually put our company website in and link to it (don t forget to add your link between the quote marks in the href) <a href= style= text-decoration:none;color:#ffffff; > Lorem ipsum <a href= style= text-decoration:none;color:#ffffff; > ges.com Next up, if you ve got some social media accounts, why not link your up to them? It helps extend your reach. Like all links, all you need to do is put the link to you social page into the href, just delete the images of the social platforms you don t have (eg. the one that looks like radio waves we use to represent our blog). <td align="right" width="28%" style="padding-top:5px; padding-bottom:2px;" class="footer"> As something extra, <a title="" we include href="" a little bit target="_blank" of text before the style="text-decoration:none;"> social icons to <img src=" border="0" height="30" width="30" /> add some personality. <a title="" href="" target="_blank" style="text-decoration:none;"> <img src=" border="0" height="30" width="30" /> <a title="" href="" target="_blank" style="text-decoration:none;"> <img src=" border="0" height="30" width="30" / <td align= right <a title="" style= font-family:calibri, href="" target="_blank" lucida style="text-decoration:none;"> grande, <img src=" border="0" height="30" width="30" /> sans-serif; font-size:15px; line-height:18px; font-weight:normal; <a title="" href="" target="_blank" style="text-decoration:none;"> color:#ffffff; class= fthide > <img src=" border="0" height="30" width="30" / dolor sit amet <td align= right style= font-family:calibri, lucida grande, sans-serif; font-size:15px; line-height:18px; font-weight:normal; color:#ffffff; class= fthide > fancy a natter? RETURN TO LAYOUT

10 9 LAST, BUT NOT LEAST 10 CLICK SEND! ont-family: calibri, lucida grande, sans-serif; font-size:11px; col You are currently registered to receive this newsletter because <br/> <! Don't forget to add your unsubscribe link > If you don't want to receive any more s from us <a style="text-decoration:none; color:#00a0af;" href="" target= unsubscribe here <br/> Company Name <br/> Address line one, City, Post Code, Country <br/> Phone number <br/> <a style="text-decoration: none; color:#00a0af;" href="" target= us

11 GLOSSARY.jpeg An image file format, most images you ll see on the web or even your PC are saved in this format..png A higher quality image file than a jpeg, which can also be transparent, however they usually have a larger file size because of this. alt= The code that controls what text appears if images are disabled in an client bgcolor= - The code that controls what background colour appears clients Desktop providers i.e. Outlook, Gmail etc. ESP Service Provider. This is different to an client. An ESP is a program that allows you to send marketing s to a list using HTML. Hex value Hexadecimal notation, a six digit code for defining a colour using the Red, Green, Blue values ranging from 0-F. href= The code that controls what a piece of content links to on the internet. HTML Hyper Text Markup Language. That confusing looking writing that makes up most of the things you ll see online. Loren ipsum text - Standard place holder text, it s written in Latin so you remember to edit it. Paint A simple image & graphics editing program. Photoshop A more advanced image editing program. Pixel A measurement used for sizing digital images pixels are the little dots that make up your computer or phone screen. src= The code that controls the source of the image. title= The code that controls the titles tab. URL Fancy term for a web address. Web browser What you browse the web on. Chrome, Firefox, Safari, or if you re still kicking it old school - IE.