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...

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...