Tags: editor

HTML Tips & Tricks #4 – Adding Links

HTML Tips & Tricks #4 – Adding Links

Beyond • December 28, 2010

What Is HTML? HTML (HyperText Markup Language) is used by most web pages, especially those using HyperText Transfer Protocols (or HTTP, which is the first part of the web address at the top of this page). HTML is the programming that translates coding into the images that you see, embedding videos and images and scripts, structuring a page\'s content and providing the backbone for Benchmark\'s email marketing software. To properly code with HTML you will use HTML elements called tags. These tags are enclosed inside brackets. For instance, <h1> is the start tag for a large header font. At the end of the header or headline that we are encoding, we place an end tag, which includes a forward slash </h1>. These tags enclose the section or text that you want to format. Think of the start tag as an open channel. The code inside designates what will flow into that channel. The end tag closes the channel and locks the section into the code. The Benchmark Email Editor takes care of almost all of your HTML needs. But for those of you who like to do your own coding, or even for the curious who\'d like to give it a try, these tips will give you a working knowledge of how to code, one tag at a time. Today we\'ll focus on adding links to your email or newsletter. Adding links to websites can broaden the scope of your email or direct your readers\' attentions to your own sign-up boxes or landing pages. It is an invaluable tool when email marketing and today we will cover two methods of linking. First, open your Email Editor (Step 4 when creating a new email) and choose a template, preferably one that doesn\'t have too many colors or crazy designs already added. Find the section you want to edit and click on the pencil icon in the top left corner. Delete all of the body text. This will give you less code to sift through when you start experimenting with your own HTML. Now write a brief sentence with a word you want to use as a link. In my case I\'ll use \"Benchmark Email\". I want my users to be able to click on that word and link directly to my website. Once you have the word (and know which address you want to link to), click on the Code View button under the Insert Additional Elements box. This opens your document in HTML. What we\'re looking at is the same document stripped down to its code. Locate your sentence with the word you want to link. Right after \"Dear Bob,\" you will see two <br> tags. Remember from last week that these are line breaks. Because the code is all mashed together, the <br> tags indicate that I have left a space between \"Dear Bob\" and the body of the email (the body starts at the second line break). Now it\'s time for us to turn our word into a hyperlink. Remember to begin the code at the start of your word, not at the beginning of your sentence. My start tag will look like this: <a href=\"http://www.benchmarkemail.com\">. Leave no spaces between the start tag and your link word and make sure you have entered the full web address between the quotations. Leaving out a quotation at the beginning or end of the url can lead to an incomplete code and you may end up with a broken link. Also key to note is the space between the a and href. At the end of your link word, simply close the code with the </a> tag. See below. Save & Close your HTML window. If your url is accurate your word should now be linked. Always check your link once you have encoded it. First save your email. Then click on the highlighted word. The code we have used is a direct link. This means that when users view your email and click on the link their browser will take them directly to the url specified. This has its disadvantages. Most email marketers will tell you to keep your customers on your page - if you\'re linking to an outside source, a direct link will take them away. However, if you use a direct link at the end of your email or newsletter to take the user to a sign up box or special landing page, it may be exactly where you want them to go. The next code we\'ll use opens the link in a new tab or browser. This is my preferred way of linking. If the user is done with what they\'re viewing they will close or exit out of their first window. But giving them the option to toggle between two tabs leaves them free to navigate between their source page and the linked material. In the end, it\'s a matter of what works best for you. Open your Code View again and find your original start tag. The beginning is written the same, but after the quotation marks around your linked url, leave a space and write target=\"_blank\">. Each one of those elements is important and it\'s easy to skip a space or a quotation (and don\'t forget the underscore before blank). See below for how it fits into the code. If you have input the code correctly the linked word should not look any different. However, when you click on it it should now open in a new tab or new browser (depending on your internet settings). If it doesn\'t, go back to Code View and check your start and end tags. (When creating this blog I found that I had originally written three t\'s in http.) Details matter. And now that I\'ve illustrated how to use links I hope you\'ll give it a try. Until next time, happy coding!


Read More

Pointers for Those Who Prefer to Write Their Own Html Code

Beyond • May 3, 2010

With Benchmark Email newsletter templates, you don’t need to know HTML coding. Our software does all the legwork for you. However, we recognize there are those of you out there that want the freedom of coding your own HTML emails. Here are some common errors and mistakes to avoid when coding your own HTML emails: What are some common HTML coding mistakes? When you create and send an email, plenty of factors determine whether your email makes it to the inbox. And HTML code - the foundation language for most email newsletters - is just as critical as your subject line, body text or call to action. If your HTML code is sloppy or contains errors, you can bet that your email will either not be delivered, or show up in your recipient’s inbox looking garbled and unprofessional. If you want to tackle your email display problems in advance, here are some common HTML coding mistakes to avoid: Designing email as if it were a Webpage. There’s nothing wrong with using HTML editors like Microsoft Front Page, Publisher or Dreamweaver to build your email or newsletter. Just remember to use code that’s friendly to emails and newsletters and not just webpages. Referencing external CSS files Since the vast majority of email clients including Gmail, Yahoo! and AOL use their own CSS coding, any outside code will interfere with the display of your emails. Thanks to this conflict, most major email clients routinely bounce emails with external-referencing CSS code, or send them right to the spam file. Here’s an example of code referencing eternal CSS: <link href=\"css1.css\" rel=\"stylesheet\" type=\"text/css\"> Another mistake is using CSS in the header of your email and referring to it in the body of the email. Here’s an example: <style> .main{font-size:16px;} . subhead{font-size:14px; font-weight:bold; color:#cc0000;} </style> <span class=\"subhead\">Newsletter Article</span> Use Inline Stylesheet <span style=\"font-size:14px; font-weight:bold; color:#cc0000;\">Newsletter Article</span> If you must use CSS, make sure you use inline code and send plenty of test emails to check for mistakes and inconsistencies. Using one image that takes up your whole email Since most email clients block images as a default, your recipients will only see a blank screen when they receive your email. Avoid using a large image as the centerpiece in your email and you’ll have better luck with how your newsletter displays. Creating an email that is too wide When it comes to emails, size truly does matter. Always design your emails or newsletters with the recipient’s preview pane in mind. A good width is 650 pixels because it accommodates the preview window of most email clients.. Failing to remove junk code from your HTML If you used Microsoft Front Page, Microsoft Word or Microsoft Publisher to design your email, expect your email template to contain lots of extra “junk” code. This junk code can break up your layout and cause all sorts of display problems and, at worst, cause your emails to bounce back or land right into the spam file. To tackle this issue, clean up and/or remove empty or unwanted tags, unnecessary attributes, comments and other junk code before you upload your email template to our system. The following is an example of junk code you might find in an email template: <span class=\"fs12\"> <v:shape> <o:column> <b:Xl> ![endif]> </span> Using Flash, Javascript, ActiveX, embedded movies or sound files Make no mistake: sound files, movies and other visual/audio files can make an email snazzier. However, your multimedia email probably won’t make it past the anti-virus software most big clients use. For this reason, we recommend that you skip the movies and sound files in your emails altogether, and instead link to a webpage where recipients can enjoy your media in full. Linking to images with incomplete web-based URLs When using images in emails, make sure you link to a web-based page rather than a file on your hard drive. If you link to a file on your hard drive, your images will not show up in your newsletter. Here’s an example of a relative (incomplete) URL that links to a hard drive or local page file: <a href=\"lastpage.htm\"> </a> Now, here’s an example of a full, correctly linking URL: <a href=\"http://www.microsoft.com/\"> </a> This text is a link to a live webpage on the World Wide Web Sending test emails to only one or two email clients Every major email client uses its own coding to display emails. To maximize both the delivery and display of your emails, we recommend setting up free email accounts and sending test emails to the following email services: AOL, Yahoo!, Gmail and Hotmail. By sending test emails to so many clients, you can solve all your email display problems easily, quickly and in one fell swoop.


Read More