Table cells are out of alignment

[Gregprm1320]

I'm using a Dreamweaver (21.2) template to create a basic HTML email. When I drop in my content, the cells become unaligned. Even after I fix and refine the spacing in dreamweaver, the result is still out of alignment when viewed in a browser. How can I stop this from happening, or fix it when it does?

[L e n a]

Are you talking about this template ?

If we have access to the same base document, the HTML code is a real spaghetti dish!!!

TABLEs encapsulated in each other, a real headache. I don't know why these models have been maintained, despite several feedbacks during the testing phases.

It would certainly be better to start from a much healthier base...

If not, please send us the code used

[Gregprm1320]

It is not that specific one, but yes I used a template from that menu. Sounds like that may have been my first mistake. Are there any fixes to get a reliable final display? 

[Nancy OShea]

I should also mention that Emails are not websites.  They rarely work the same way in email clients like Outlook, WindowsMail, Gmail, AppleMail, etc... as they do in a real web browsers.  That's because email clients don't respect web standards the way browsers do.   And 50% of email users see plain text and no images.  So there's that to consider, too.  What you see is not what they see.  To keep your sanity, focus less on fancy presentations & more on the content you wish to convey to people. 

Good luck with your project.

[B i r n o u]

And 50% of email users see plain text and no images.  So there's that to consider, too. 

By @Nancy OShea

if you have the link, I would be really interested to see this source.

[Nancy OShea]

Web Mail users represent the majority. 

Gmail, Squirrel Mail, Cube Mail, etc...

Few people use actual email clients like Outlook anymore.

[B i r n o u]

so where do you get the info that 50% of email users see plain text and no images ? that was my initial question, but you are ignoring the issue by answering a question that has not been asked.

Or probably that my frenglish still plays with my uderstanding 🙂

[Nancy OShea]

Gmail:

Gmail blocked images by default and later announced that “images would display across desktop, iOS, and Android.” For security, Gmail serves images through Google’s own secure proxy servers. If users prefer,  they can adjust a setting to ask before displaying external images. If Gmail thinks a sender or message is suspicious, images aren’t shown and you’ll be asked if you want to see the images.

Litmus:

In 2013, 43% of Gmail users viewed emails with images off.  Your audience may be opening emails with images off, it’s best to create your emails with image blocking in mind to ensure the best experience for everyone.

Microsoft:

Blocks images to help their readers avoid viewing potentially offensive content as well as protect them from malicious code. Blocking images by default allows people with lower bandwidths to choose if they want to use that bandwidth for image download or not.

Mozilla Thunderbird:

To protect your privacy, Thunderbird does not load remote content automatically, but instead shows a notification bar to indicate that it blocked remote content.  Remote content is a privacy concern because it allows the message sender to know:

• each time you view the message
• rough details about what application and what platform you are using
• your current geographic location (a rough approximation by IP address)
• that your email address is actually used ("active")

Desktop Email Clients	Image Display
Outlook 2007-2019	off* ✘
Outlook (mac)	off* ✘
Apple Mail	on ✓
Office 365	off ✘
Office 365 (mac)	off ✘
Windows 10 Mail	on ✓

That's all I have time for.

Bonne nuit.

[Liam Dilley]

Just another one.. 

Image use in regard to emails:
If you build an email or EDM that is pulling content from a website such as a news feed which has images and those images say appear 300px by 300px but are in fact 900px by 900px in size - You can not use these in an email. Because they there for responsive/retinna email clients like Outlook will render images as the size they are regardless of any CSS in inline width and height html applied to them.
They will remain the size added.

Emails is Web YEARS ago plus extra hurdles. Not doing anything fancy and focusing on derliverabilty is key.
What Apple does with preview text and how you have to have a hidden component of text purley for that to render nice to as people like Nancy have said how your email looks pre-image loading including logo and text color of the no image text etc all matter.

Yes there are some fancy emails out there, embedded gif images that animate in some email browsers but if an email marketing does not even get the wording in the subject line right or that is too long then its instantly in spam or even blocked by services.

[B i r n o u]

my English needs a basic overhaul, I can no longer understand the content at first reading.

In fact, when I read your first message that indicated that 50% of the users could not see the images, I thought you were making a distinction between plain text and images.
So for me I interpreted it as what I usually create in campaigns, a double content, a first one in plain text using no images and a second one in HTML using images.

if , what you talk about, is only the percentage of webmail users who see their HTML content not displaying the images automatically, and who are asked to explicitly press the button, display the images... effectively we can say that webmail users don't see images, and will only if they ask for it, ... which still, but again for my limited understanding of English, is very different from ... don't see images... 🙂

anyway, you didn't answer my question about your sources that attest to this figure... and I'm still interested in being able to better refine my message campaign advice

[Liam Dilley]

Not sure who the post was aimed at? I did not mention HTML really in my comments.
As a summary to what people have said.

1. HTML emails need to be old code structure, tables, inline styles. You can do mobile responsive options for email clients that support it but it is a good chunk of work.

2. Images will often not load, especially if your email is recieved for the first time from your source location (Email FROM). With that in mind how you structure your email is important. Alt wording for images, a logo and header display that does not just look like nothing initially etc. Many email services and clients will for safety not sure images initially.

3. Using images ensure you use dedicated email images. Optimised, small in size and the exact image ratio the image is. Email clients like Outlook will only render the image size NOT what is inline within the HTML of the image tag or any CSS applied to it.

4. Sources:
Google. A quick google on email EDM derliverability will bring you a wealth of inforamtion with services like Active Campaign, Mailchimp and like with resources and information all covering what people have said here. Literally have all the info you need there in less that 5 minutes.

[B i r n o u]

Not sure who the post was aimed at?

By @Liam Dilley

I was answering to @Nancy OShea 

[BenPleysier]

@B i r n o u , join the club:

https://youtu.be/f_jykVgznHA

[B i r n o u]

@BenPleysier so funny...  we should really speak by phone one of this day, or viso... 😉

@L e n a told me such a stuff some days ago... having  an ACP's DW on of these day, plus some legends... just to put voices and face over icons and pseudos...

[Nancy OShea]

anyway, you didn't answer my question about your sources that attest to this figure...

By @B i r n o u

==============

From various resources:

Google, Litumus, Microsoft, Mozilla, RoundCube, MailChimp... 

Look them up.

[B i r n o u]

From various resources:

Google, Litumus, Microsoft, Mozilla, RoundCube, MailChimp... 

Look them up.

By @Nancy OShea

well, these are usually the first places where I go to exploit this kind of data, but I never found convincing results, all of them contradict each other and none of them really give figures on the share of users who don't see the images (by default, or after click, or in an unmanaged way)...

only a few figures indicate the share of users who use plain text mailers, in opposite of HTML ones... and this is still very marginal (although it increases according to the niches)

so, I still have questions about this 50% figure that you announce ?

[Nancy OShea]

The Sock Probability & Statistics Problem.

==========

A drawer contains red socks and black socks. The lights are off.  When two socks are drawn at random, the probability of drawing a pair of matching red socks is 1/2 (50%). 

If you factor for replacement, that number drops to 47.8%

Amazon Interview Sock Problem

[B i r n o u]

long answer

A drawer contains red socks and black socks. The lights are off.  When two socks are drawn at random, the probability of drawing a pair of matching red socks is 1/2 (50%). 

By @Nancy OShea

short answer...

[L e n a]

It is not that specific one, but yes I used a template from that menu. Sounds like that may have been my first mistake. Are there any fixes to get a reliable final display? 

By @Gregprm1320

Don't worry, it's from our mistakes that we all learn, you're not the first and wouldn't be the last, if you were here at the studio you could track the number of mistakes we all make every day...

Anyway, the final display should be reliable... but the technique used is very old, especially since the display of mail clients has improved since a few years, although it still leaves something to be desired.

In fact, the problem comes from the fact that there is a large number of tables (TABLE) nested in each others.

Not only does this make for too much verbiage, but it also makes editing and management too cumbersome.

We should remove the useless tables, reorganize all that, but at this stage we might as well start from a blank sheet of paper, or as recommended by @Nancy OShea  and @B i r n o u by using an external template.

[Gregprm1320]

The actual amount in content in the tables is small. I think dumping the template tables and coding a simpler solution may work. Thanks

[Nancy OShea]

For best results, use an industry-tested Email Template. 

Look on Litmus, HubSpot, Mail Chimp or Constant Contact.

https://litmus.com/community/templates

https://mailchimp.com/features/email-templates

[Gregprm1320]

I've tried Constant Contact with this client. Long story, but those types of industry standard email services gets flagged by their firewall (hyper sensitive security) and dumped. I've got to give them something they can send from an internal email address. I'll keep looking into these services as some of them seem to offer code downloads.

[B i r n o u]

Do you own a remote server (Private, VPS) ?

[Gregprm1320]

I'm afraid not. That has been a real issue lately. I'm working on allocating some space on a server that we can use for something like this. 

[B i r n o u]

I just google some keys... here it's what I got

https://medevel.com/12-open-source-free-self-hosted-email-marketing-solutions-alternative-to-mailchi...

here at the studio we use a specific WP + some plugins for this type of use, and that's generally good enought for our clients and or partners needs. until now we used this one https://wordpress.org/plugins/newsletter/ but we're still searching new possibilities