So, what is a Bulletproof button anyway?

A Bulletproof button is a button or navigation bar in your HTML email that looks the same regardless of whether the contact has enabled images or not. They are great for calls to action that can be seen even if the contact doesn’t enable images in their inbox. Instead of being made up of one or more images like a traditional graphical button, bulletproof buttons are built from pure HTML. You may not have the same graphic flair available to you, but that is a small tradeoff for the greatly enhanced readability.

Below is an example of each kind of button. The button on the left is actually a bullet proof button. If you highlight it, you’ll notice that you can actually select the text on it. The button on the right is a regular old graphic button, which, if images were not available, would be totally invisible! Not much use, huh?

Bulletproof!

So how can I make a bulletproof button?

Making these buttons used to be a bit of a chore. You would have to manually write the HTML code involved. The code for the button above looks like this:

 Bulletproof!

Luckily, the folks over at Email Transit have whipped up a Bulletproof Button Generator that they have been kind enough to share with the internet. You can find the generator at http://emailtransmit.com/bulletproof

That’s all there is to it. If you have any questions, please leave them in the comments section below.

Lucas Weber
Bronto Client Services

Related posts:

1. Adding Style To Your Images Do your images have style?  If not, why?  It’s...
2. See What They See: Inbox Previews At Bronto, we work hard to implement features that not...
3. Setting The WYSIWYG Editor To Basic Mode Bronto’s WYSIWYG editor is a fantastic way to create and...

Do your images have style?  If not, why?  It’s simple in Bronto’s WYSIWYG editor to add styling to your images to give your message that professional feel.  In today’s post, we’ll look at the styling tools we offer and see how to use them to fix a couple of common problems.

A Look at the Image Appearance tab

In order to see what styles you can apply to your images, you’ll need to go to the normal Insert/Edit Image button () in the Bronto WYSIWYG editor. Clicking this button will bring up the standard image inserting dialogue box. If you take a look at this, you’ll notice two tabs at the top, one of which is labeled Appearance.

After clicking on the Appearance tab, you’ll see the editor window below:

Now that we have the Appearance tab pulled up, we’ll walk through what each of the settings does…

The Alignment Setting

The Alignment setting allows you to align your image. You can choose from a number of different alignment options, including the two most commonly used, left and right.  Aligning an image left will cause text to wrap around the image on the right side, and aligning an image right will cause the text to wrap around on the left.  Like the graphic below.

Dimensions

The Dimensions setting allows you to set the size of your image. It will let you define a width and a height for the image you are styling. It also includes a checkbox that will, if checked, keep the image proportions intact so that your image does not distort when it re-sizes.

Vertical and Horizontal space

The Vertical and Horizontal space boxes are great for allowing your images a little breathing room.  If you look back at the alignment example above, you’ll notice that the images and the text are really close together.  If we take the same left aligned image and put a value of 10 in both the vertical and horizontal space boxes, an invisible buffer of 10 pixels in either direction will surround the image. The result will be much nicer, like so:

Border

The Border property allows you to set a border around your image. The border will be solid with a thickness set to whatever number you type into the box. This is not the most useful aspect of the Border property though. Oddly enough, the vast majority of users will set the Border attribute to 0.  Setting it to 0 will eliminate the ugly blue border that appears around images when you place a link on them. This blue border can be quite the eyesore in an otherwise beautiful email marketing message, so it really pays to get rid of it with this simple setting.

Style

The Style box is kind of a catch all that allows you to apply custom styling to your images using CSS. Using this box will require knowledge of CSS syntax and attributes.

So that is our quick and easy look at the image styling options available in the Bronto WYSIWYG editor. The different styles offered here can really help to lend a professional look and feel to your WYSIWYG generated messages, and can hopefully increase your ROI in the process.

Lucas Weber,
Bronto Client Services

Related posts:

1. Setting The WYSIWYG Editor To Basic Mode Bronto’s WYSIWYG editor is a fantastic way to create and...
2. Adding Blocks Of Re-Editable Dynamic Content In the past, the only way for you to edit...
3. Dynamically Adding Values To Conversion Tracking URLs In recent weeks, I have been getting a lot of...

In this example, we are going to assume that your targeted list has a large amount of Gmail addresses that you would like to send to.  You can easily find this out by looking at the pie chart on your list’s overview page.  What you want to do now is create a segment from this list that includes only these Gmail addresses.

The Segment

On the Contacts tab, choose the Segments option.  This will take you to the “All Segments” page. Here you are able to see all of the segments in your account.  Click the “Create Segment” link in the top right of this page. Give your segment a name and make sure to mark the radio button next to “Select contacts who match all rules described below.”  Proceed to Rule one and establish the list that you are working with.  In this case we are using the Blog Post List. Choose “On List” from the first drop down and then choose your list in the second drop down. You should now be able to click on the “Calculate Criteria” link to see how many contacts are included in this list. In this case we are working with a list of 1,788 contacts.

Now, click the link to create a new rule.

You will need to establish your accounts Gmail.com contacts. In the first drop down, choose “Email address.”  In the second drop down list, choose “contains.”  The last field for this rule is a text field.  In this field you would add gmail.com. You can now click on the “Calculate Criteria” link now to see how many gmail.com addresses you have in your account.  It’s important to remember that this rule is showing you how many of these addresses you have across your whole account and not just on the list.

Click the link to “Calculate Full Segment” and you will now find the intersection between the contacts on your stated list and contacts with gmail.com in their address. In this example we have 135 contacts that now belong to this segment.  Save this segment and you are ready to send to your Gmail contacts.

Sending To This Segment

When you send your message in Bronto, just choose this segment from the “Select Recipients” area as you would any list you are sending to.It is important to remember that if you are sending another version of this same message to the rest of your list, you should select your original list for that delivery. Also for that delivery, you should choose the segment created above from the “Ineligible Recipients” area in the advanced sending options to ensure that the contacts on the segment created above don’t also receive the version of the message sent to the entire list.

The Power of Segmentation

This is only a small part of what makes segmentation in the Bronto application such a powerful marketing tool.  There are hundreds of ways to use segmentation to send targeted messages to select groups of contacts.  If you have any questions on creating a segment, please make sure to contact anyone in Client Services here at Bronto.

Frank Chapman
Bronto Client Service

Related posts:

1. Advanced Segmentation With Additional Rules And Criteria In my last post, I looked at the basics of...
2. Testing, Testing 1, 2, 3: Sending Test Messages As a Bronto user, you have probably been sending test...
3. Segmentation Basics In previous posts, we have talked a lot about using...

Have you ever had a Microsoft Word document that you would like to send as an email?  If you’re like a lot of our clients, then you probably have.  You have probably also noticed that when you copy and paste the Word document into an email, it probably doesn’t look the same as it did in Word.  Why?  What happened?!?

I would like to take this opportunity to explain why this happens, as well as show you the proper way to bring content from Microsoft Word into Bronto.

The initial display problems stem from the HTML code that Microsoft inserts into a Word formatted document.  Much of this HTML code is proprietary to Microsoft and is only rendered correctly in a Microsoft product.  Most email clients (even Outlook) do not know how to render this HTML correctly, and will either ignore it completely, or make their best effort to display it.  Either way, it usually comes out broken and is not displayed correctly.

Original Word Document (click to enlarge)

Word Document Pasted Directly into Bronto (click to enlarge)

Bronto has a tool in the WYSIWYG editor that allows you to paste information from a Word document.

The Paste From Word button is located on the top row of the WYSIWYG toolbar:

How to use the Paste From Word tool:

1. Click the Paste From Word button. A pop-up window will appear.
2. Copy the text you wish to paste from Mircosoft Word into the WYSIWYG editor by highlighting the text and hitting CTRL + C on your keyboard.
3. Paste the copied text into the text box in the Paste from Word pop-up window by placing your cursor in the text box and hitting CTRL + V.
4. Click Insert to add the text into WYSIWYG Editor.

So what exactly does the Paste From Word button do?  Let’s take a look at some examples of the HTML code before and after using the button.  If you try and copy and paste content directly from Word into the WYSIWYG editor, the HTML code in the background will look similar to this:

As you can see, this HTML code is full of unnecessary tags that are specific to Microsoft.  Email clients will simply have fits trying to render this the way it is supposed to look.  Now lets take a look at the HTML code of the same Word document after we paste it using the Paste From Word button:

There is now a dramatic difference in the structure and cleanliness of the HTML code.  This message should have no issues rendering correctly in an email client.

**One thing you may notice when you insert your Word document into the WYSIWYG editor using the Paste From Word button is that some of the text formatting will be removed.  This is because of the removal of the Word HTML that formatted that text.  You can use the WYSIWYG editor to quickly re-format that text into the correct size, font, style, etc. to make the message appear as it did in Word.  Using the WYSIWYG editor to format the message will help to ensure that email clients render it correctly.

Please feel free to share your thoughts, comments, and any related issues that you have experienced in the comments section below.

Rob Slade
Client Support Specialist at Bronto

Related posts:

1. Setting The WYSIWYG Editor To Basic Mode Bronto’s WYSIWYG editor is a fantastic way to create and...
2. Got The Email Rendering Blues? Background images not rendering in Outlook? Tables not looking quite as...