Tags: HTML

What Is HTML and What You Can Expect from HTML5

What Is HTML and What You Can Expect from HTML5

Beyond • November 15, 2011

There was a time when the web was chock full of nothing but static web pages whose only appeal was delivering something we had never witnessed: the web browsing experience. Thanks to the implementation of robust scripting languages such as PHP, Python and JavaScript, we are able to enjoy rich graphics and real-time functionality that generates up to the minute updates right before our very eyes. The flip side to all this is that the bells and whistles we are blessed with today have come at the price of sacrificing the standards established to govern how the web is to be created. Unfortunately, the only way for users to enjoy these luxuries is to piece together different programs, plugins and protocols, which as you may already know, does not always result in a seamless experience. HTML is the building block for every web page behind every internet website. Despite being flexible enough to support a broad range of more powerful languages and technologies, its once sturdy framework has become fragile due to all the tweaks, adjustments and enhancements that have been made to keep the language up to date with the technological changes associated with the internet. HTML5, the fifth revision of the essential Hypertext Markup Language, aims to bring order back to the design and development standards of the World Wide Web. Many supporters believe it will revolutionize the look and feel of the web, so here is a breakdown of the benefits we can look forward to: Better Standards for Developers - Adobe’s Flash is a classic example of why something like HTML5 is long overdue. Although Flash has done a fine job incorporating interactive features such as video, animation and games, the fact that it is a plugin prone to performance issues often makes it a headache for users. Many developers are looking forward to HTML5 because it will enable them to incorporate video and other features by simply utilizing code rather than problematic plugins such as Flash. Mobile-Friendly - HTML5 is also being viewed as a solution that will create a better mobile experience. While Apple fully supports Flash on its Mac OS X operating systems, Steve Jobs himself forbid developers from using it on the iPhone because of how it drains battery life and system resources. Natively equipped with many of Flash’s features, HTML5 will not only ensure a better experience for iPhone users but users of mobile devices running Android, Windows and other operating systems. Consistent Web Browsing - Some of today’s most popular web browsers are being designed to support HTML5. This is a big deal because the inconsistency in standards is the very reason a given email, web page or document may look great in one browser, and like crap in another. As more browsers are optimized for HTML5 compatibility, the better the overall web experience will be for both developers and users. At one time, XHTML was believed to be the solution to the growing problem of HTML inconsistencies and broken web standards. It became clear to see that this wasn’t the case when several of the major browsers chose not to adopt it. While we may not officially see HTML5 until 2014, it looks to have more promise for this purpose than any other revision or extension to come before it.


Read More
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
HTML Tips & Tricks #3 – Header Alignment & Breaks

HTML Tips & Tricks #3 – Header Alignment & Breaks

Beyond • December 20, 2010

What Is HTML HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content as well as providing the backbone for Benchmark\'s email marketing software. To encode text inside your emails you 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 we place an end tag, which includes a forward slash </h1>. We used these in our first HTML Tips & Tricks blog and we\'ll be using them again today. The Benchmark Email Editor covers almost all of your HTML needs. But for those of you out there who like to see how the raw code transforms into your lovely newsletters, open up your email editor and let\'s get to it. Today we\'ll handle alignment formatting and line breaks. 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 is so you\'ll have less code to sift through when you start experimenting with your own HTML. Make two headings and leave a space between them. Like so: Now go to your Insert Additional Elements box and look beneath the social links. Click on the Code View button to access your HTML. This is the HTML. For those of you who work with code, you\'ll notice that the HTML is now color-coded. This is a new feature we\'ll be talking more about next week. For now, study that code and you\'ll notice an important tag. See our two headings? There is no longer a space between them but two <br> tags. The <br> tag functions as a space. Imagine that every time you see a <br> the computer is pressing the Enter key. Often you may see a <p> tag, which designates a new paragraph, but <br> (which designates a line break) works better in the Benchmark Editor. <br> will give you a single space rather than the sometimes open break of the <p> tag. Last week we went over how to center text by using the <center> and </center> tags. While this method will work in many back ends, a more specific tag will allow you to alter the size of your text and function in all HTML editors. Find the <br> tag in front of your first header. After the <br> tag, type in <h? style=\"text-align: center;\"> and put </h?> at the end of the sentence. See below: You\'ll notice I replaced h? with h2. For those of you who didn\'t read our HTML Tips & Tricks #1, the h? tag controls the size of the header (ranging from 1 - 6). I\'ll let you decide what size you want your header. But what about this new code? It functions the same as last week\'s <center> tag except now it gives us the additional adjustment of header size. See the results below: If you don\'t see the same results, make sure you\'re leaving no spaces between the text of your heading and the angle brackets. Also, it is important that the number you place next to the <h> is the same on both sides. If you use <h2 style=> for the start tag you must close the code with </h2> after the header\'s period. For our next header I will use <h3> to indicate the change in size. To make a left-aligned heading, simply replace center with left. Now your page looks like this: Naturally, to make the heading right-justified, simply replace \"left\" with \"right\" after text-align. Now, what about a division to offset the header from the rest of the text? To get something like this: Just open your Code View and type <hr> after your alignment tags. It\'s really that simple. The <hr> tag gives you a horizontal line under your heading. If you placed it after the first <br> tag the line would be one space lower. I hope these basic codes have been helpful so far. Next week we\'ll cover the different kinds of hyperlinks. Until then, happy coding!


Read More
HTML Tips & Tricks #2 – Basic Font Attributes

HTML Tips & Tricks #2 – Basic Font Attributes

Beyond • December 14, 2010

What Is HTML? HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content, and keeping SkyNet at bay. To encode text inside your emails you 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 we place an end tag, which includes a forward slash </h1>. The Benchmark Email Editor covers almost all of your HTML needs. But for those of you out there who like to get inside the machine and see what it makes it tick, today we\'re going to mess with our font attributes. For now we\'ll just cover the basics. 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. As before, let\'s delete the text. All we want to focus on right now is getting the HTML code to do it\'s work. More text will just clutter the picture. Now write a short text headline. Go to your left toolbar to access your Text Formatting Options. At the bottom of the toolbar underneath the social network links is the Code View button. Click on this to get a look at your document\'s source code. And here we have our HTML code (color-coded for your convenience). Our wintry headline is nestled inside the tags like a Shakespearian Christmas present. Let\'s make the sentence a little snazzier shall we? First, let\'s bold the font. To do that, simply place a tag on either end of the sentence, starting with <B> and ending with </B>. Like so: Click Save & Close and you should now see this: It\'s really that simple. To place italics, try placing the sentence between <i> and </i>. To get: These tags are pretty intuitive. For one last tip, can you guess how to center the text? A no brainer! Type <center> at the beginning of the text, then type </center> at the end. Now that you\'re started, try experimenting with other font attributes. With a little perseverance you\'ll find you know more than you thought!


Read More
HTML Tips & Tricks #1 – Resizing Headers

HTML Tips & Tricks #1 – Resizing Headers

Beyond • December 6, 2010

HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content, and deciphering The Matrix. To encode text inside your emails you 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 we place an end tag, which includes a forward slash </h1>. Thankfully, the Benchmark Email Editor takes care of most of this coding for you. What today\'s blog is about is teaching you HTML, one tip at a time, to give you the option of coding yourself. So take a deep breath, Neo, because here we go. Today we\'ll focus on the Headers Script. Using this code you\'ll be able to make a header or headline ranging in size from 1, largest, to 6, smallest. This can make the subtitles for promotional newsletters or key extra items in your emails stand out. First, open your Email Editor (Step 4 when creating a new email) and choose a template. Find the section you want to edit and click on the pencil icon in the top left corner. Start with a blank slate and delete all superfluous text. This will make it easier to find the text you want to edit in HTML. Now write a test header where you want the official header to go. Your left toolbar contains your Text Formatting Options. At the bottom of the toolbar underneath the social network links is the Code View button. Click on this to get a look at your document\'s source code. When you take a look at the daunting jumble of HTML code inside you\'ll understand why most users won\'t even bother with it. Remember, as you add more text this code jumble will become more dense. Our header is in there, though. Now comes the fun part. Let\'s change the header size. This HTML trick is accomplished with the simple addition of <h?> and </h?>. The question marks represent a number from 1-6. 1 is the largest size header and 6 is the smallest. Let\'s start off with 1. Don\'t worry about any of the other code. Just find where your header begins (in my case, it is the \"W\" of \"Welcome to Benchmark Email!\"). This is where your first HTML bracket will go. It should look like this: <h1>Welcome to Benchmark Email! At the end of your phrase (in my case the exclamation point after Email!) enter </h1>. See below: Remember to leave no spaces between the coding. Save & Close the window and check out your text. No sweat, right? This is the largest header setting (1). If that\'s too big, you can scale it down. You can play with the numbers to see what works for you. Just go back into the code view and find your text. You don\'t need to re-enter the brackets, just switch the number after the <h>. The limit is 6, seen below. And there you have it. When we break it down, HTML isn\'t quite as daunting as it first appeared. But of course there are many more tags to cover and we\'ll be back next week with a brand new set of code.


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
New Industry-Specific Email Templates

New Industry-Specific Email Templates

Beyond • September 30, 2009

In keeping with the Benchmark quest to constantly deliver innovative and exemplary new templates, we are proud to present our latest range of all new industry specific email templates. Each template has been designed specially for you to use in the industry of your choice. No matter what your profession, each one of these templates is sure to satisfy your requirements. So go ahead and give these templates a try! Environment & Non-Profit The \'Environment & Non-Profit\' template has 2 distinct columns which allow you to easily incorporate the latest environmental and non profit industry news. The hill green column color along with the background of rolling hills and soft clouds gives this template the perfect environmental appeal. Dental Service The \'Dental Services\' template lays out a 2 column format with a single column at the bottom. The bright blue border with sparkling white and blue dots gives a cool, minty impression like that of refreshing toothpaste, perfect for the dental industry. Health Spa The \'Health Spa\' template follows a single column format which comprises of four sections. A separate section on contact information is displayed at the end. Its background of soothing water and soft undulating bubbles instantly relaxes the mind and gives the impression of ultimate relaxation. Investment Advisor The \'Investment Advisor\' template has a 2 column area for content and a section at the bottom for contact information. This template with its practical design and subtle colors instantly appeals to all those in an advisor capacity. Personal Trainer The \'Personal Trainer\' template is divided into 2 columns. The bottom section is perfect for announcing current discounts and contact information. With its curvaceous flowing design and vibrant colors, this template makes your energy flow and gets you in the mood to exercise! Law Firm The \'Law Firm\' template contains a 2 column format with a section on contact information at the bottom. This template has been designed with sensible earth tones that give the impression of long standing knowledge and professional expertise. Wealth Management The \'Wealth Management\' template, designed with a 2 column outlook gives the impression of wealth and expertise. The first column is perfect for supplying the latest wealth management news and investment tips, leaving the rest of the template free for other important information like strategy and planning. Veterinary Clinic The \'Veterinary Clinic\' template has a 2 column format with a section for customer information at the bottom. Its design and structure has been specially created to appeal to those in the veterinary industry. We hope you enjoyed the experience of using our latest industry email templates. Rest assured, there are lots more exciting templates on their way! Don\'t miss out on our new templates - keep watching the template gallery! If you have any queries, feel free to contact us at support@benchmarkemail.com. We look forward to hearing from you.


Read More

Getting your email past the spam filters

Beyond • September 23, 2009

When it comes to getting your email past the spam filters there are a number of factors to keep in mind. Although sender authentication and reputation are amongst the most important criteria when it comes to ISP filtering, there is one more potential hazard - your spam score rating. Once your emails pass the authentication and reputation filter, they have to pass a content filter. Here, your emails are rated on the basis of different factors and then given a ‘spam score’. Failing to pass these filters would result in your email going straight to the junk folder. For this reason it is vital that you follow all the right rules when it comes to your data, email templates and content. Following the right rules gives you a much higher chance of delivering your email to the inbox. If you want to guide your email to an inbox rather than a junk folder, take a look at some helpful tips to avoid getting trapped by ISP filters. However, keep in mind that spam filters, firewalls and ISPs do not follow a fixed set of criteria when it comes to filtering email. The following tips should prove helpful but due to constantly changing criteria there is no guarantee that following these tips will ensure you escape the filters unscathed. Tip 1: Your template should be professional Your template must: Be well designed Contain correct HTML code Appear properly in every browser Avoid incorrect coding as this adversely affects your spam score. Tip 2: Your email must be error free When it comes to your email, avoid: Incomplete/ unnecessary code Blank font tags Excessive use of \' &nbsp\' Incorrect grammar Spelling errors All these will give ISPs the impression that your email contains spam and will affect your email delivery. Always run your email through spell check and send test mails to friends to catch errors. Tip 3: Your email must contain text plus HTML Ensure that: Your email is multipart; it should contain plain text and HTML The text version and HTML version are as similar as possible Your email has a proper mix of text and images You avoid sending emails with only images and no text Multipart emails enable even those with Blackberry’s and PDA’s to read your email. Your email should have a balanced amount of text and images as too many images result in ISP’s tagging it as spam. Tip 4: Your emails should be correctly personalized It is important that your database is precise and you avoid: Unpersonalized email Incorrectly personalized email Badly personalized email All these result in people unsubscribing from your emails and making spam complaints. Tip 5: Your emails should have proper text Avoid the following text traps in your email: Text in italics Huge font Different fonts Text completely in uppercase Text with gaps in the words White text that blends into the background Italics, big and gappy fonts simply scream to the ISP’s that your email is spam. Also using white text on graphical backgrounds is a common spammer trick - avoid doing it. Ensure that your text always stands out and is easily readable. Tip 6: Your email should not contain: Avoid the following text traps in your email: Embedded images Images as attachments Forms As most spam mails contain embedded or attached images and forms, avoid placing these in your email. Instead, your images and forms can be hosted online via your image library or website. Tip 7: Your email should not have spam words Certain words are spam triggers. Avoid placing words and phrases such as: Free Viagra Gamble No obligation Order now The more spam words placed in your email, the higher your spam score. A Spam Checker is a good idea It is a good idea to pass your email through a spam checker before sending it. A spam checker would point out broken HTML and words which could be considered spam. This gives you the opportunity to rectify these errors before they can cause damage. Setting up test accounts at sites like Hotmail, Yahoo and AOL is also a good way to check if your emails are landing up in the inbox or junk folder.    


Read More
20 New HTML Email Templates

20 New HTML Email Templates

Beyond • August 14, 2009

At Benchmark, we do not believe in staying idle. Constantly creating, improving and adding to our already vast range of HTML Email Templates is our mission. When it comes to existing templates we continuously re-design and improve on them. At the same time we strive to create new and innovative templates that satisfy your growing requirements! So take a look at our latest range of HTML Email Templates! Here are a few samples from our latest batch: Email Newsletters: Our Email Newsletters have been specially designed to fulfill all your marketing needs! Take a look at our innovative templates such as Wavy, Customer Win-Back, Webinar and Vibrant. View all Newsletter Templates Seasonal Email Templates: At Benchmark we are proud to say that we have a template for every season! Spring, Summer, Fall and Winter - we have the perfect Seasonal Email Template to satisfy your requirements! View all Seasonal Email Templates Travel Newsletters: Are you looking for templates specially created with travel in mind? Are you interested in newsletters that cater to tour promotions and more? Try out our Travel Newsletters! They are sure to be a perfect fit for your travel needs! View all Travel Newsletters Templates In keeping with the Benchmark mission, our highly skilled design team will be devoting all its time and efforts towards a full fledged effort to update our templates on a frequent basis. Don’t miss out on our latest templates – stay tuned to the gallery template to find out what’s new! If you have any particular template requirement do let us know! We welcome any suggestion for future templates – just contact us at support@benchmarkemail.com.


Read More
1 2