One of the biggest complaints we get from nonprofits as they mature in their online communications is that creating properly-functioning formatted (i.e. HTML) emails in their email blaster is a pain in the @$$. The trouble is that having regular email blasts as an organization is seen as a baseline measure of organizational online competancy after having a web site. So it’s important to at least know what’s going on and what’s going wrong when you’re sending out your email blasts.h8wyp1tjxdhwyiai23q020urvfi4q0mx

WYSIWYGs Suckk564muz4rwps3rljxxdetbpoex2tykf9

When you’re putting together an email in your email blaster with images, links and formatting, you’re really writing a piece of HTML code (*gasps*).gmgepqx63ugzprtv63y2wmkx1tmzmn9t

Editors in blasters like VerticalResponse or MailChimp use what are known as “WYSIWYG” (What You See Is What You Get) editors so that instead of having to know how to code something to, say, look bold in HTML, they can just highlight some text and click a bold button. Anytime you see buttons like “bold” “italic” “left align” font size, etc. like you would in Microsoft Word or Open Office, you’re most likely using a WYSIWYG editor. So why is this even an issue to bring up?0k14wzlibbbnr31g2c8rfspx44zudnd4

Well.rz4qxlxvhvl0b5sr0aj4mxa200a86kdo

The long and the short of it is that WYSIWYG editors almost universally suck. And the problem is that, unless you know how to code HTML, you’re stuck with them to build your HTML email. Let’s take a look at why WYSIWYGs by nature are problematic and give you some tips around how to work with them so that you’re not pulling out your hair.0dpbyq8pnedvu7jjyqcgsjv7wellgic7

Many Ways to Do the Same Thing in HTMLjege59wk3tpuyzgkthkxnpzcmawwti12

The first thing to know about HTML is that there are many ways to do the same thing. For instance, let’s say that I want to add space around an image so that the text isn’t butting right up against it. In HTML, I could increase the “margin” around the image OR
Increase the margin around the text OR add some non-breaking spaces OR put it in a table and increase the “cellspacing” OR a whole host of other things to give that image some breathing room from the text. q33zjeraegq9jtiuai7cng4995f6w9xdWhen I’m using a WYSIWYG editor, though, all I see is space between the image and the text. It has to guess which technique I want to use.fr95rv0r59z4d8a9pnxp3o4shllyx922

This can cause problems down the line.65c89iumbaazfs12nl82stpfdzeupo2m

For example, in the WYSIWYG, I’m just visually separating the image from the text probably with my mouse.zw7k188sqz07c4bidy8snpy2cfcf3tkt

The WYSIWYG interprets this as adding margin around the text.wvic557u4gte05lcnnvirkddjvymtghg

Later, let’s say I decide I don’t need that image after all. I delete it.xfgbsub3nt2f82u7qj90ak18frb3w7pj

Because the WYSIWYG added margin around the text rather than the image, the margin stays because the text is still there and now the edge of my text has extra white space and doesn’t line up with my other text.y0yagifv7pbygj32bxo1t37nd762z0ho

Argh. Because WYSIWIG editors have to guess which of many HTML techniques you want, your email suffers.chqk1xwx253nljdel3srxfmejmsro4cr

Formatting Invisible Containerso83dtnsliuudjd5dtzbgscd1i28ulavz

Another basic point to understand about HTML is that it is a language built of containers. In HTML, you define containers and put containers inside other containers. Like tupperware, HTML containers (ideally) fit nicely into one another.ps2uhuec2q4wabe8ev8htckgghlt6k4l

Most of the time, these containers aren’t visible when a browser or email client is displaying the email. The contents of the containers are visible.dyqz6bmbt0v948o5siyc921g5x9361ra

In code, to make the contents of the container look a certain way (font size, family and color), you format the container. The problem with this is that when you’re using a WYSIWYG, all you see is the contents because the containers are usually invisible. So if you select some text and click the “bold” button, the WYSIWYG has to guess which container you’re trying to format.5qfurzz8m589g5vnis3ugc17n6ju462z

*sighs*6swaen3z6izso3niloidzu73kkwsoxsk

 cq5xm07s3306kmcpwbr8xz4yc8i8n7zps3a8vian55sb5pd9qv0e8ailpgedkox3

Because WYSIWYGs don’t show the containers that are being formatted only the contents, deleting content in WYSIWYGs, many times, leaves HTML “crumbs” behind. In other words, deleting content in WYSIWYG editors many times leaves empty, previously-used containers that may be formatted a certain way. zfblp44bb783e6zcykso7wrx8zza19iqWith all of these invisible, empty, formatted containers lying around your email template, it’s only a matter of time until you place content into one of them without knowing and the format of your text is completely different.aoowhc0z9wzst0ra6fadksik7fxcfeig

Because of this reality, it’s important to use a fresh, empty template every time you send an email instead of taking a previously-sent email, deleting its contents and inputting new content. Templates provided with email programs are specifically designed to work with that particular program’s editor and quirks. i07abgc5xhfk3idcw4l5kfae8yi9ez4mSo remember that when you upload or input a new branded template that you have created outside the program, it may not work as well as the templates that the email blaster automatically provides.b8kll67buo6r0ums3z3cftjioegt9mlb

Common HTML Email Editor Problems:vs2krdckf1ytrbwo7wjehd8f5cccefez

Let’s look at some other common problems that people encounter when working in an WYSIWYG editor and why they’re happening:jyq7ytkjnb763po2l0q9wj6xtrhlddhm

• Tables and bulleted lists (sometimes known as “unordered lists” or UL) automatically changing the font family and font sizeff0h18130ahv87fwdpuy0w3pi63s2ie8

  This is because when you insert a table or bulleted list, you’re actually creating a new container. Depending on your editor, these containers may have specific formatting that is different from the rest of your email.gizg7x5ck58eh579g3rh1wrlxlgr5s5c

• Small images take forever to load when someone looks at the emails8crz5100vz4eiz86gs6fb19xkxu2yok

  When you upload a large photo (think high-res photos from a digital camera) and then resize them in the WYSIWYG, the email will actually load the big picture (and its huge size) inside the smaller frame that you set for it when someone looks at it. Best practice (and courtesy to your constituents) is to resize photos and images before uploading them into your email blaster.bpfg6d6c7tbagtoa1pjcgg48xbqoax7c

• Copying from Microsoft Word or “Rich text”7o79ranwk93zlby5adn12a0h4quvzjlx

  Whenever you’re working in code, whether it’s HTML or CSS or whatever, you don’t want to be copying from Microsoft Word or any other “Rich Text” editor. “Rich Text” as opposed to “Plain Text”. Rich Text allows you to format your text (bold, left align, font family) while Plain Text is just text. The extension for plain text files is .txt while Rich Text is .rtf and Microsoft Word is .doc.tz36pmu11wdh1xovf2m2a8sh8lbxuqoe

  Any text editor that allows you to format text will insert its own invisible code around the text so that the computer knows that it should show it a certain way. When you copy this extra code and paste it into your HTML email editor, it can cause a slew of errors because the editor is expecting only HTML code not rich text or Microsoft Word code. Plain text doesn’t have any of this extra code. It’s simply text. Nothing more.8cz7u3c6jy8chswyh34efpmd0vfz8lw6

  Before you copy any text into your HTML editor, make sure you first paste it into a plain text editor and see if there’s any extra invisible code floating around. A plain text editor will only show text so you’ll immediately see anything that isn’t the text of your email. Remember that even if the code looks unformatted, it might still have rich text or Microsoft Word formatting code around it.p26y85embn10bgm5aja38xm9v74qo4m3

• Weird codes like “ show up where there’s supposed to be a charactergg9j9sqgz7tvvhvfqzkxe2odrke4x0l4

  

  Sometimes Rich Text or Microsoft Word will change certain characters to look more fancy. The most common two examples are quotation marks and ampersands. Some rich text editors will automatically change quotation marks to what are called “smart quotes”. Smart quotes curve depending on whether they are to the left or right of the text. i37zknfh3xcfcewoerwzy3j5mf5km3lvThese “smart quotes” replace the plain text ” with a bit of code to make them “smart” so that when you paste the code into HTML, they get pasted as a string of code instead of a quotation mark. This is a big deal because quotation marks are a critical piece of HTML code so that if they are switching to “smart” mode because of your editor, a whole host of things can go to hell because of it.mwle0h4mk2nysinfjzei71u69bo50uqd

• My editor says my file is too big!y5g8b80ai9d6pcfdrcfqlymc89m8f093

  Sometimes you may try to send your email and your editor says that your email file size is much too large. This can be caused by many things but one thing that happens often is that an email created in a WYSIWYG editor creates a new container for every new type of formatting. In regular non-WYSIWYG HTML editing, you can apply multiple formats to a single container.jgc5r27xhv6o5y5md1e8tvwbt3ms9pbj

  For instance, if you wanted to make a paragraph have orange, bolded, underlined and italic text that was 20pt in size you would format the paragraph container orange, bold, underline, italic and 20pt font. In WYSIWYGs, many times instead of formatting the same container in multiple ways, it creates a new container for each format. zhlw0oa9vppwjeotq3xzg8hhfyly2mgsSo in our orange text example, it would make a new container around the paragraph and style the new container with underline text and then enclose that container in another container and style it with orange text and then another enclosing those two styled as bold and so on. All this extra, unnecessary code means the file size of your email increases and looks more and more like spam or a virus.
  3shtyihwcuixh0f2vaxz7orh1tl0fuk9

Take-Awayspugl25o8ga2qga3sgwkah0zenbbonsw3

• Use a plain text editor (Notepad in Windows, TextEdit in Mac (make sure in the preferences that you’re editing in TXT and NOT RTF)4t8v5k5sbruf3acl8knzkud6a7wcbdr5
• Use a fresh template for every new email. Don’t copy a previously-sent email and delete its contents.5w7ct89jd4myuqmztg2i3dj1qn9bfn0a
• Resize your images before you upload themt1dh170i4wvto5wwp3sd2kj2x3y3f5oy

What are your experiences using WYSIWYGs for HTML Emails?kxgljtccsynop756o13q8747ty8h72nh

 cq5xm07s3306kmcpwbr8xz4yc8i8n7zps3a8vian55sb5pd9qv0e8ailpgedkox3