I am developing an email marketing and I am using the newsletter.
One of the problems I encountered in the development was that the style of my buttons worked in gmail, but in outlook it does not work.
The style of my buttons:
<a href="http://www.piccolohotelastoria.com/ponte_2_giugno_dal_1_6_al_5_6.php"
style="text-decoration:none;
background-color:rgb(243, 243, 243);
background-color:-webkit-linear-gradient(rgb(243, 243, 243), rgb(1, 1, 223));
background:linear-gradient(rgb(243, 243, 243), rgb(1, 1, 223));
border-radius:25px;
box-shadow:1px 1px rgb(1, 1, 188);
padding:10px 20px;
color:rgb(255, 255, 255);
font-weight:bold;
font-size:17px;">
VEDI OFFERTA
</a>
Can anyone tell me how I can style the buttons in Outlook?
Unfortunately, compared to the web, a lot more code is required to get a button looking right in email clients. Especially Outlook.
Here is some sample code that should display fairly consistently:
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
<v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">VDDI OFFERTA</center>
</v:roundrect>
<![endif]-->
<a href="http://www.piccolohotelastoria.com/ponte_2_giugno_dal_1_6_al_5_6.php"
style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">VDDI OFFERTA</a>
</div>
Everything within the <!--[if mso]> tags is for Windows Desktop 2007 and above. And an image needs to be created for the effect to appear in Outlook (CSS -linear-gradient is not supported).
Related
I have some design requirements for an email template where I have two "challenges":
two columns need to flip to one column
some visible border lines need to be switched from vertical to horizontal
The following shows how it should look (2 columns on the left for desktop, 1 column on the right for mobile):
The whole email is based on responsive tables and the two-column part is implemented as follows right now:
<table cellpadding="5" cellspacing="0"
style="background-color:#F6F6F6; font-size: 14px; color:#58595b; width:100%; border-collapse:collapse;">
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
<tr>
<td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
Start point
</td>
<td valign="top" style="padding-left:40px; vertical-align:top;">
<strong>Fri, January 12, 2023 12:00</strong>
<br />
Harbour, Seatown
</td>
</tr>
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
<tr>
<td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
End point
</td>
<td valign="top" style="padding-left:40px; vertical-align:top;">
<strong>So, January 18, 2023 10:00</strong>
<br />
Central Station, Capital
</td>
</tr>
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
</table>
I tried the approach with having a left and a right table (explained here) but the problem is that I do not use fixed widths.
How could I achieve the required design with a responsive mail template?
You will need to use the technique as outlined in the link, but if you want to use percentages instead of fixed widths, then use width="50%".
This is because the technique works on the basic fundamentals of HTML, that if a block doesn't fit in the space available, it will automatically shift underneath.
So to enable the stacking without a fixed pixel width, you will need to add a #media query to force the stacking (otherwise it would not stack).
e.g.
#media (max-width: 620px)
.table-left,.table-right {
width: 100% !important;
}
(The article you link to is a bit outdated: don't use [class=...], just write it out normally. Gmail may strip the entire <style> section if it doesn't like something in it, and this is one of those things it doesn't like.)
I prefer an override (max-width, and !important) because you want everything possible inline, and only to use embedded styles where strictly necessary.
But that's also why it's best to use a fixed pixel width, because some email clients do not respect your embedded styles (styles in the <head>). GANGA emails (one form of Gmail account) fall into this category. Those email clients would not stack even though they may need to, if you fully rely on the #media query for the stacking.
To override the border, put a style on the <td>, and reference it in the #media query, e.g.
#media (max-width: 620px)
.border {
border-right:none!important;
}
.border-top {
border-bottom:1.5px solid #d0d0d0 !important;
}
As one doesn't have the same border structure (they don't both need border-bottom), one of the <td>s will need a different class. Here, I'm expecting the first one, i.e. <td class="border border-top">.
Im creating an newsletter email. It has a footer and the footer has some text altogether with some links to some of products. It works well in most inboxes, however on android 4.0, the links dont't allow more text to be next to them. They create a break-line.
See picture
Can you please help me out what's wrong with the code?
<table id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit- text-size-adjust: 100%; background-color: #333; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td pardot-region="footer_content02" class="footerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #dbdbdb; font-family: Helvetica; font-size: 11px; line-height: 15px; text-align: left; padding: 20px;color:#aaa" align="left" valign="top"><span style="color:#fff;"><strong>ReviewPro</strong></span> is the leading provider of Guest Intelligence solutions to independent hotel brands worldwide. The company’s suite of cloud-based solutions includes <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/reputation-management-for-hotels/">Online Reputation Management (ORM)</a> and the <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/guest-survey-solution/">Guest Survey Solution (GSS)</a>, which enable clients to obtain a deeper understanding of reputation performance as well as operational/service strengths and weaknesses. We provide actionable insight to increase guest satisfaction, rankings on review sites/OTAs and ultimately revenue.<br>
The company offers the industry-standard <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/global-review-index/">Global Review Index™ (GRI)</a>, an online reputation score, which is used by thousands of hotels worldwide as a benchmark for reputation management efforts, based on review data collected from 161 OTAs and review sites in more than 45 languages. More than 19,000 hotel brands worldwide are currently using ReviewPro’s solutions. For more information about ReviewPro, please visit <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com">www.reviewpro.com</a>.</td>
</tr>
</tbody>
</table>
Here is the code
I have an HTML email laid out with tables:
<table class='top-level' cellpadding="0" cellspacing="0" border="0"
width="630" height="717" bgcolor='#ffffff' style="width:630px;
height:717px; background-color: white; background: white;
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td class='image-container' id="FOOBAR" valign="top" width="630"
style="width:630px !important; background-color: #DEE7F5;
background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff);
background-image: -moz-linear-gradient(left, #b6cae8, #ffffff);
background-image: -o-linear-gradient(left, #b6cae8, #ffffff);
background-image: linear-gradient(#b6cae8, white); background:
linear-gradient(#b6cae8, white);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:630px;">
<v:fill type="gradient" color="#ffffff" color2="#b6cae8" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div><table><!-- stuff --></table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
This works perfectly in Outlook 2007/10/13, as well as all the other clients I care about, EXCEPT for Outlook 2016 (Windows version). In Outlook 2016, the td.image-container element displays at only about 2/3 of the expected width. When I check out the HTML (by saving the message as HTML), it shows that the widths I set in the style attributes are in pt units and the relationship between the Outlook value and my original value isn't clear. The reformatting also strips my class and my id.
The width attribute seems to get set to the pixel value equal to the point value in the style attribute. Because the style width is set in points even on elements without a width attribute, I assume that it's the style value adjusting the width value.
How can I make sure my original width is respected?
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>...</head>
<body bgcolor=white lang=DE link="#497CBE" vlink="#497CBE" style='tab-interval:
35.4pt' alink="#497cbe">
<div class=WordSection1>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=945
style='width:472.5pt;background:white;border-collapse:collapse;mso-yfti-tbllook:
1184;mso-padding-alt:0cm 0cm 0cm 0cm'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=630 valign=top style='width:315.0pt;background:#DEE7F5;
padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><!--[if mso & !supportInlineShapes & supportFields]><span
style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
"Times New Roman"'><span style='mso-element:field-begin;mso-field-lock:yes'></span><span
style='mso-spacerun:yes'> </span>SHAPE <span
style='mso-spacerun:yes'> </span>\* MERGEFORMAT <span style='mso-element:
field-separator'></span></span><![endif]--><span style='font-size:10.5pt;
font-family:"Arial",sans-serif;mso-fareast-font-family:"Times New Roman"'>
<!-- This linebreak added for readability; the conditional tag below was originally directly after the previous span tag -->
<!--[if gte vml 1]><v:rect
id="_x0000_s1026" style='width:315pt;height:730.7pt;mso-left-percent:-10001;
mso-top-percent:-10001;mso-position-horizontal:absolute;
mso-position-horizontal-relative:char;mso-position-vertical:absolute;
mso-position-vertical-relative:line;mso-left-percent:-10001;
mso-top-percent:-10001' stroked="f">
<v:fill color2="#b6cae8" type="gradient"/>
<v:textbox style='mso-fit-shape-to-text:t' inset="0,0,0,0">
<![if !mso]>
<!-- doesn't matter --><![endif]>
<div>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0
width=945 style='width:472.5pt;border-collapse:collapse;mso-yfti-tbllook:
1184;mso-padding-alt:0cm 0cm 0cm 0cm'>
<!-- table stuff -->
</table>
<p class=MsoNormal><span style='mso-fareast-font-family:"Times New Roman"'><o:p> </o:p></span></p>
</div>
<![if !mso]><!-- doesn't matter -->
<![endif]></v:textbox>
</v:rect><![endif]--></span><!--[if mso & !supportInlineShapes & supportFields]><span
style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
"Times New Roman"'><v:shape id="_x0000_i1027" type="#_x0000_t75" style='width:315pt;
height:730.7pt'>
<v:imagedata croptop="-65520f" cropbottom="65520f"/>
</v:shape><span style='mso-element:field-end'></span></span><![endif]--><span
style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
"Times New Roman"'><o:p></o:p></span></p>
</td>
</tr>
</table>
</div>
</body>
</html>
Worth noting: the email displays as desired in the Email On Acid test suite for Outlook 2016 on Windows, but displays the broken behavior described here when viewed on the installation an Asus laptop (UX301 w/ i7-4558U CPU #2.8GHz & Iris Graphics 5100) running Windows 10 Home (version 1511 build 10586.36).
Outlook (no matter what version) converts all your pixels into points.
Then your emails will be broken on hight PDI laptops.
Here is described the problem and offered a solution.
This is my first attempt at using watir-webdriver for automating. As I go through each test case,I learn new things and face new challenges.I'm so grateful for all the questions and answers here as it has helped me tremendously.Thanks
I'm faced with a new challenge and it's with popups and I'm not very clear on how to resolve this even after going through lot of popup questions on stackoverflow.
I haven't written the watir code yet....just trying to figure out how to do it.So appriciate some pointers.
So I'm trying to create a user profile-fill the form with all relevant information and hit Create profile button.(All this is coded and works fine).
On clicking the Create Profile button a pop up window pops up with lot of images on it in a tabular form and with text "please click on the image of apple". The text is randomly generated-so instead of apple I could be asked to click on a plane.I then need to click on that particular image.
How can I have watir-webdriver do this for me?How do i tell watir-webdriver to use pop up window,read the text at top,match it with image and click on the image?
Thanks.
Here's the error I get.Also included is watir code and HTML
Error:
ArgumentError: invalid window selector: {:id=>"humanVerificationContainer"}
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/window.rb:15:in `initialize'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `new'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `window'
===============================================================================
$b.window(:id => "humanVerificationContainer").use do
$b.link(:id => "humanVerificationQuestion").click
<div id="humanVerificationContainer" style="position: fixed; z-index: 9999; top: 50px; left: 750.5px; display: block;"><a class="close"></a><div id="humanVerificationQuestion" class="modal">
<h2>Click the picture of an aircraft carrier</h2>
<table>
<tbody><tr>
<td>
<div answer="0" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px 0px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="1" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -100px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="2" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -200px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="3" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -200px -100px; height:100px; width:100px"> </div>
</td>
</tr><tr>
<td>
<div answer="4" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px -400px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="5" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -600px -200px; height:100px; width:100px"> </div>
</td>
<td>
When a new browser window is opened, you can invoke the use method.
browser.window(:title => "annoying popup").use do
browser.button(:id => "close").click
end
Based on the html, the popup does not appear to be an actual window. Instead, it is just a div tag within the main page that looks like a popup. Assuming it is not in an frame, you can treat it like you would any other div tag.
To get the "popup":
popup = $b.div(:id => "humanVerificationContainer")
To get the subject at the top of the popup:
subject = popup.h2.text.gsub(/^Click the picture of an? /, '')
#=> "aircraft carrier"
To click the "image", which is actually a div with a background image:
popup.div(:class => 'humanImage').click
However, there does not appear to be a way to determine which image is the aircraft. So your developers will likely need to put some sort of identifier in or make sure the image is always in the same answer (just for the test environment).
Recently I have been working on a contact form for my portfolio website. The form works and I have managed to successfully send HTML mail from the server it's hosted on to my email address. Like most of my emails, these will be primarily read on my iPod Touch so the theme I based the mail template on is engineered for a screen 320px by 480px.
Even though the mail container element is set to width:100% and the same on all inner elements, there is a ~20px gap at the right side of the screen, as if that's the edge of the document:
Here is the script and style-sheet for reference:
PHP (snippet), request_form.php:
...
$email_subject = "Graphic Request - ".clean_string($first_name);
$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...
CSS, mail-styles.css:
body {
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif;
color: #242424 !important;
text-decoration: none !important;
}
#all {
width: 110%;
}
#head {
background: #1393A1;
color: #61BDC7;
border-bottom: solid 0.5em #61BDC7;
width: 100%;
padding: 1em 0.5em;
height: 20px;
}
td.sub {
border-top: solid 0.25em #1393a1;
}
td.info {
padding: 0.35em 0.5em;
font-size: 12pt;
}
td.jstfy {
text-align: justify;
}
span#param {
color: #1393a1;
font-weight: bold;
}
td[class=info] {
text-transform: capitalize;
}
#foot {
background: #1393a1;
width: 100%;
height: 20px;
color: transparent;
border-top: solid 0.5em #61BDC7;
}
#line {
background: #1393a1;
width: 94%;
height: 0.25em;
margin-left: auto;
margin-right: auto;
}
The email also doesn't work well with online email viewers as they tend to have their own overriding style-sheets for common tags like <h1>. I hope the solution is something obvious.
This worked for me:
html, body {
width: 100%;
padding: 0;
margin: 0;
}
When I used min-width instead of width, the content got too wide. I also have these viewport settings in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could try adding min-width: 100% to the <body> element to deal with the gap.
And as the others suggested, moving your styles inline should deal with the rest of your problems.
Maybe try
html, body {
margin: 0;
padding: 0;
}
HTML emails don't handle external stylesheets very well so this may be your problem.
You should only use inline styles on HTML emails as a general rule of thumb.
Here's a good guide on HTML emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
This is happening because body has padding by default on most browsers. add:
body{
padding:0px;
}
I've dealt with this issue numerous times. Every time it occurs I always realize that it's happening because I'm using cellpadding incorrectly on one of my tables.
For example, I got caught up for a bit today because near the bottom of one of the emails I was working on there is a table with a press banner that stretches horizontally across the bottom like this:
<center><!-- Press Banner -->
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a role="link" href="#" target="_blank" title="#">
<span class="press">
<img class="desktop" src="#" border="0" style="display:block;">
</span>
</a>
</td>
</tr>
</table>
</center>
That image is 600 pixels wide and is switched for a 320 pixel wide background image for the mobile layout. I needed to add some vertical spacing between that block and the others so I chose to add cellpadding="15" to do so, without realizing that 15 pixels would also stretch out horizontally. But on the iOS device this is extra space only renders on the right side, not the left, so its not obvious what the problem is.
To fix it, I removed the cellpadding and used table spacers instead on the top and bottom.
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td height="4"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td>
</tr>
There are many other reasons that this issue could occur as other people have already mentioned, but just adding this potential cause for anyone else who may be overlooking the same error that I made.
Additionally as a rule of thumb, you should never import CSS in an HTML email, you should inline as much style as possible and use depreciated CSS2 tags and oldschool HTML styling elements whenever possible to achieve the highest level of cross device, client compability. I recently uploaded a project to github(link) which is the html email template I've created while building emails for some time. It's pretty much the most compatible template you'll find anywhere.