Responsive Email Designer Tips and Tricks - Post ID 273093


VP of Software Development
49,402 posts

Share your tricks or tips for Responsive Email Designer with others!

This thread is for tricks and tips only - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.


Ambassador
937 posts

How to configure an SMTP server
    Description: an informal name that you will decide to identify the server (best to use the email provider's, like Gmail , Yahoo or your website service provider name).
    Your Email address: your actual email address.
    User Name & password
    Server Address : the actual SMTP server's specification. You can find it consulting the web page of your provider,
    Port: usually SMTP works with port 25, 26 but as the screenshot shows it can work also with 587
    Common SMTP Port Numbers
    SMTP – port 25 or 2525 or 587
    Secure SMTP (SSL / TLS) – port 465 or 25 or 587, 2526
    Connection security: SMTP email transfer doesn't provide an encryption. So if you want to make your connection more secure, it's a good choice to use a STARTTLS or SSL/TLS extension, that employ a separate port for encrypted communication.

Right click on image to then >> View image to see it in bigger size

At following screenshot that I have setup SMTP for old Hotmail account

https://sdrive-storage.s3.amazonaws.com/demo/549ff3972d8ea4/55904438/SMTP_Setting.png
Guys at coffeecup are awesometacular.


Ambassador
937 posts

The Yahoo! Mail SMTP server settings for sending mail through Yahoo! Mail from any email program are:
    Yahoo! Mail SMTP server address: smtp.mail.yahoo.com
    Yahoo! Mail SMTP user name: Your full Yahoo! email address (including "@yahoo.com")
    Yahoo! Mail SMTP password: Your Yahoo! Mail password
    Yahoo! Mail SMTP port: 465
    Yahoo! Mail SMTP TLS/SSL required: yes
Note that these settings may not work in all desktop email programs.

https://sdrive-storage.s3.amazonaws.com/demo/54a6c237cee2c2/90222367/Yahoo-SMTP-Setup.png

Guys at coffeecup are awesometacular.


Ambassador
937 posts

uploading / adding template made with RED into MailChimp

http://demo.coffeecup.com/storage/imgs/mailchimp.gif
Guys at coffeecup are awesometacular.


Registered User
83 posts

Coding the arrow in the button

When you use the button from Elements within RED it contains a little arrow. When you copy the code into a Mailchimp template the arrow is transformed to letters in a strange order. You have to look up for the rule and code the arrow with a html special character, like →

This was also the case when I copied the exported code into a gmail concept. (Dev tools > Inspect elements > code as html.)
The perfection isn't reached in one pass.


COO
796 posts

Hans van Overbeek wrote:
Coding the arrow in the button

When you use the button from Elements within RED it contains a little arrow. When you copy the code into a Mailchimp template the arrow is transformed to letters in a strange order. You have to look up for the rule and code the arrow with a html special character, like →

This was also the case when I copied the exported code into a gmail concept. (Dev tools > Inspect elements > code as html.)

Thanks for the note. This is not a RED issue, other system will 'take' the arrow without issues. However, we will probably remove the arrow from the button in next versions to prevent this from happening and leave the choice to the user.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.


Senior Advisor
17,791 posts
Online Now

Form builder variables.
When setting up your email to import in to the form builder write your variable directly into your text when designing the email, confirmation or notification notice.
For example in RED you can write in a paragraph element ...
Name: [name_field]

Then when you import the email into the form builder the form variables are already there and you don't have to alter anything.
A huge time save for me.
Thanks CC for making this accessible.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
5 posts

RED produces its output as a single line (no CR or LF characters) that can be tens of thousands of characters long. Per RFC 821 (from 1982), lines in emails should be limited to no more than 1000 characters; therefore, some email clients and/or SMTP servers break up long lines into a number of shorter ones -- each less than 1000 characters in length -- and install a break -- usually LF (0A hex) -- at the end of each line . That can play havoc with the rendering of HTML in some email clients if an added break occurs at a critical point within an HTML tag.

I've found that the problem is resolved if the email is sent out using "quoted-printable" encoding. That encoding scheme automatically breaks the RED output into lines no more than 76 characters in length, which the email client can reassemble into the original HTML with no added breaks. MIME-compliant Base64 encoding also results in lines no more than 76 characters in length, so that scheme could be used as well.


Registered User
1 post

Export your RED-email to send it via mail-app to your customers:

We're using OS X and mail.

Preview your email in RED "Preview on Safari"
"Save as" -> Text
Open this Text again with Safari
Copy & Paste it into a blank email
add your costumers via OS X adress-book

you need no clients or additional apps ...


Senior Advisor
17,791 posts
Online Now

Replace string place holders with $_GET in RED emails after export automatically
I use RED in manual export and send personalized emails to users from a database. I'm using a place holder string such as [first_name], [last_name], and [pic_thumb] in the places I want to add the GET variables after export.
You'll need a form to submit the $_POST['generate_email'] on a page and a $_SESSION['data'] variable to get the feed back that it happen.
Paste this code on it's own php file and name it replace.php and place it in the same directory that your my_cool_email_exported directory is sitting. Then point your form to submit to it passing the $_POST['generate_email'].
<?php
session_start();
// Checks to see that $_POST is set
if(isset($_POST['generate_email'])){

//Path to your exported RED email
$path_to_red_email = 'my_cool_email_exported/email.html';
$source = file_get_contents($path_to_red_email);

// Strings in RED to replace
$email_string = array(
"[first_name]",
"[last_name]",
"[pic_thumb]");

// First stage of replacing strings with $_GET varibles
$variables = array("<?php if(isset(xxxx_GET['first_name'])){echo xxxx_GET['first_name'] ;}?>",
"<?php if(isset(xxxx_GET['last_name'])){echo xxxx_GET['last_name'] ;}?>",
"<?php if(isset(xxxx_GET['pic_thumb'])){echo xxxx_GET['pic_thumb'] ;}?>"

);

// Path to generate the new email
$path_to_new_file1 = 'email/email-var-new.html';
$replaced_values = str_replace($email_string, $variables, $source);
file_put_contents($path_to_new_file1,$replaced_values);
$new_source = file_get_contents($path_to_new_file1);

// strings to search for
$email_string = array(
"xxxx");

// replace xxxx with $
$variables = array("$");

// path to finished email
$path_to_new_file2 = 'email/email.html';
$replaced_values = str_replace($email_string, $variables, $new_source);
file_put_contents($path_to_new_file2,$replaced_values);

// delete the unused first stage file
unlink($path_to_new_file1);
// generate a session var and redirect back to referer
$_SESSION['data'] = "Email Generated!";
header("Location: {$_SERVER['HTTP_REFERER']}");

}else{header('Location: ../index.php');}

?>


Then you pass the variables to the email like this in your email message.
$message = file_get_contents('http://mydomain.com/email/email.html?first_name='.$first_name.'&last_name='.$last_name.'&pic_thumb='.$pic_thumb);

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.