HTML for Newsletter - good coding required! WordPress
Hi,
I've been doing a html newsletter (Campaign Monitor) but there are a few outstanding issues. It needs to be compliant with all major mail clients but isn't compliant with some, so the coding needs to be corrected in some areas. My main problem is Outllook, but a couple of others too.
Issues I have are as follows:
1. Outlook and Yahoo mail clients (web based) cut off the right hand side of the template (about 20 pixels).
2. I use a square image as bullet point in my list items - this cannot be seen on Outlook. I've heard best way to do this is use <td> tags so it will appear on all. Not sure if it can work with my <repeatertitle> in the table of contents - if it can work then great!
3. Outlook: Coloured header images on the right hand side appear below the header titles. They should be aligned right and appear in the middle vertically. Also on mobile if there's a long header title it should wrap underneath the title and align left (this only affects the first header as it's the longest title).
4. Back to Top link appears large on some clients. Should be same size as the main text.
5. Gmail (Android). Images which are aligned right don't resize to smaller.
6. Mobile: buttons at bottom (Like, Tweet and Forward) are spread out. I'd like these to be centered like in the non mobile version.
7. Windows Phone 8. Mobile version doesn't seem to work (this is not high priority - not sure why the tags don't work however?)
There may be a couple of other things which a good coder will spot! but they're the main items I'd like to get sorted anyway.
I've uploaded the template into pastebin here:
http://pastebin.com/jK2pejy7
I hope the above is clear - if not let me know! Help on these issues much appreciated.
Answers (2)
zebra webdesigns answers:
Hello Ailsa,
it would be great if you can post the screenshot of outlook, the code you have given used the images, so I couldnt visualize clearly.
if you would like to solve it quick I am available in skype.
Skype ID: bhuvan530531
Email: [email protected]
zebra webdesigns comments:
Hello Ailsa
I have replied to your mail.
Ailsa Craig comments:
Hi - did you get my mail with screenshot? It was just taken from the emulator in Campaign Monitor. Any solution to the issues?
Many thanks,
Ailsa
zebra webdesigns comments:
Hi Ailsa
I have sent the link to the html mail,
I have adjusted the coding in there, it should work for you.
Can you check in the emulator.
alternatively you can check in http://www.responsinator.com/
Ailsa Craig comments:
Hi - I didn't get any mail - could you send again please?
Many thanks!
Ailsa
zebra webdesigns comments:
forwarded that again.
Can you check it now
zebra webdesigns comments:
Hi Ailsa if you want to compose the html mail through gmail, Use the following tool
http://ctrlq.org/html-mail/
Ailsa Craig comments:
Hi,
Thanks for the link. I uploaded it into the emulator. I'm afraid none of the above issues have been solved with this. I still get the same problems.
Thanks anyway for your help.
zebra webdesigns comments:
Hello Ailsa,
I have attached the screenshots in google drive and I have tested in both mac 15 inch and ipad.
http://goo.gl/WLt9Xn
I hope the scenario is the emulator you are using has a small window to load the iframe which makes it look like cut off.
I see that by resizing my window and attached that screenshot too for yahoo.
that size is actually below 13 inch mac. so it will give a better idea for you.
I will add the mobile screenshot shortly to verify if its good over there.
the screenshots are tested in both outlook and yahoo web clients.
Ailsa Craig comments:
Hi,
I've sent a test mail to Outlook web based and Outlook desktop, Gmail where I'm having most of the problems (as I though maybe the emulator wasn't giving accurate results - but it was!). Unfortunately the problems are all still there. I'll send you screengrabs.
Ailsa
Arumai Prakasam answers:
Hi Ailsa,
May I know what's the base url for the images in the template?
My email id is [email protected]
Arumai Prakasam comments:
Check this link...
https://www.campaignmonitor.com/forums/topic/8152/yahoomail-email-not-centered-and-contents-alignment-issue/
If you can send the base url for images in the template I can try it out...