iPhone text alignment in emails

We are sending the same email to both iPhone and desktop users. In order to correctly align the text for desktop users, I set some extra " " within the code. The problem is that the text has extra spaces when it is viewed on the iPhone.

The reason we are sending the same email to both desktop and iPhone users is because we can't initially identify who is viewing the email in an iPhone and who is viewing the email on a desktop so it's important that the same email goes out to everyone.

Is there a way to avoid this extra spacing on an iPhone and if so can you please help me understand how this can it be done?

Thanks in advance for all your help.

roshodgekiss roshodgekiss, 3 years ago

Hi vilganyc, first of all, you shouldn't need to be adding spaces using   - as you know, this can be pretty problematic, particularly when it comes to word-wrapping. If you post your code/a link to your email campaign here, we're happy to suggest workarounds to this.

> The reason we are sending the same email to both desktop and iPhone users is because...

This is the correct approach - you shouldn't have to send out two 'versions' of an email campaign, especially when using responsive techniques. You may want to skim our guide to responsive email design to get a few pointers on making one email look great everywhere :)

Thanks, vilganyc! Once we hear from you, we'll do our best to help out!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
vilganyc, 3 years ago

Hey

Our code is below.  I needed to replace some of the brand specific words with "text". I hope you don't mind.

I do have a question about your earlier feedback. I am going to look at the guide to responsive email design but for now can you please explain to me why i shouldn't need to be adding spaces using &nbsp and why it can be pretty problematic? This is the approach I have always taken. What other approach do you suggest?

Thanks again for all your help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p><strong>text text</strong></p>
                          <p>To deploy text text, we are using a platform called text. </p>
                          <p>To continue, follow the simple step by step guidelines on your iOS device.</p>
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. From your iOS device&nbsp;Sign up for a new text account. <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If you already have a text account, Download the text text now.<br>
                            <br> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.
Text will guide you to register your iOS device with the &ldquo;text text text&rdquo;. </p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3. From your iOS device login to text and join the &ldquo;text text text&rdquo;.</p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4. The text text will send you an invitation via email to install the text text.</p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5. Once the text text has been installed on your iOS device  log  into your text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text email account with your credentials.</p>
<p><strong>texttext</strong></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp; Visit the text page and use the  password: &quot;text&quot; to download  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the text for text.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. &nbsp;Double click the text file that you had downloaded and wait for the &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;installation process to complete.</p>
<p>For assistance, please contact text support</p>
</body>
</html>
nightjar nightjar, 3 years ago

Hi vilganyc,

You should give tables a shot for the layout rather than <p> tags and lots of spaces. It's much easier to do it this way and it won't break on iPhone!

With tables you can set the widths of cells to create spacing. The W3C schools site has a good introduction here.

To create a list, you would make a simple table like this:

<table>
    <tr>
        <td width="10">1.</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
</table>

And then there are lots of styling options that you can add.

It's best to avoid using the colspan and rowspan tags inside tables for HTML email, so you can simply nest tables inside other tables to get the desired effect.

Check out the guide that they have here at Campaign Monitor, too.

roshodgekiss roshodgekiss, 3 years ago

Nightjar is 100% on the money - using spaces can result in the text wrapping in unexpected ways when viewed on a variety of screens. It also is a lot of work to get the spaces exactly right :) Here's the code you've posted, sans &nbsp's. You can use CSS (inline or otherwise) to adjust the formatting of the ordered list to taste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p><strong>text text</strong></p>
<p>To deploy text text, we are using a platform called text. </p>
<p>To continue, follow the simple step by step guidelines on your iOS device.</p>
<ol>
  <li>From your iOS deviceSign up for a new text account. <br />
    If you already have a text account, Download the text text now. </li>
  <li>Text will guide you to register your iOS device with the &ldquo;text text text&rdquo;.</li>
  <li>From your iOS device login to text and join the &ldquo;text text text&rdquo;.</li>
  <li>The text text will send you an invitation via email to install the text text.</li>
  <li>Once the text text has been installed on your iOS device  log  into your text text email account with your credentials.</li>
</ol>
<p><strong>texttext</strong></p>
<ol>
  <li>Visit the text page and use the  password: &quot;text&quot; to download  the text for text.</li>
  <li>Double click the text file that you had downloaded and wait for the installation process to complete.</li>
</ol>
<p>For assistance, please contact text support</p>
</body>
</html>

Thanks, vilganyc - we're all learning here, so glad you've joined us on this journey :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Lovely, 7 months ago

I am facing the same problem.. Could anybody help me with this: Here is my code:



<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#fff" width="662">
  <tbody>
    <tr>
      <td align="center">
        <span style="font-size:10px">Protect, Prevent, Care &amp; Health</span>
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.safetykart.com/?utm_source=Mailer-GoTravel&amp;utm_medium=Logo&amp;utm_campaign=Go-Travel"><img alt="SafetyKart" border="0" class="CToWUd" height="87" src="http://safetykart.com/newsletter/Pain-Relievers-Header.jpg" title="SafetyKart" width="660" /> </a>
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0" width="660">
          <tbody>
            <tr>
              <td>
                <a href="http://www.safetykart.com/eye-masks-shades/1124-go-travel-eye-mask.html?utm_source=Mailer-GoTravel&amp;utm_medium=Eye-Mask&amp;utm_campaign=Go-Travel"><img alt="Eye Mask" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-1.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/travel-adapters/2353-go-travel-worldwide-travel-adaptor.html?utm_source=Mailer-GoTravel&amp;utm_medium=Adapter&amp;utm_campaign=Go-Travel"><img alt="Travel Adaptor" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-2.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/miscellaneous/1114-go-travel-aqua-fan.html?utm_source=Mailer-GoTravel&amp;utm_medium=Aqua-Fan&amp;utm_campaign=Go-Travel"><img alt="Aqua Fan" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-3.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/miscellaneous/1109-go-travel-travel-clothes-line.html?utm_source=Mailer-GoTravel&amp;utm_medium=Clothes-Line&amp;utm_campaign=Go-Travel"><img alt="Clothes-Line" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-4.jpg" width="156" /> </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <img alt="" class="CToWUd" height="12" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="10" />
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0" width="660">
          <tbody>
            <tr>
              <td valign="top" width="129">
                <table border="0" cellpadding="0" cellspacing="0" width="129">
                  <tbody>
                    <tr>
                      <td>
                        <a href="http://www.safetykart.com/eye-masks-shades/1134-go-travel-nightshade.html?utm_source=Mailer-GoTravel&amp;utm_medium=NightShade&amp;utm_campaign=Go-Travel"><img alt="NightShade" class="CToWUd" height="238" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-5.jpg" width="157" /> </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <img alt="" class="CToWUd" height="15" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="10" />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <a href="http://www.safetykart.com/travelling-pillows/1137-go-travel-plush-pillow.html?utm_source=Mailer-GoTravel&amp;utm_medium=PlushPillow&amp;utm_campaign=Go-Travel"><img alt="Plush Pillow" class="CToWUd" height="238" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-6.jpg" width="157" /> </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td valign="top" width="41">
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="13" />
              </td>
              <td valign="top" width="465">
                <a href="http://www.safetykart.com/brands/79-go-travel?utm_source=Mailer-GoTravel&amp;utm_medium=Banner&amp;utm_campaign=Go-Travel"><img alt="Flat 15% OFF" class="CToWUd" height="493" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-7.jpg" width="327" /> </a>
              </td>
              <td valign="top" width="12">
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="12" />
              </td>
              <td valign="top" width="13">
                <table border="0" cellpadding="0" cellspacing="0" width="129">
                  <tbody>
                    <tr>
                      <td>
                        <a href="http://www.safetykart.com/miscellaneous/1139-go-travel-snoozer.html?utm_source=Mailer-GoTravel&amp;utm_medium=Cushions&amp;utm_campaign=Go-Travel"><img alt="Cushions" class="CToWUd" height="238" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-8.jpg" width="157" /> </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <img alt="" class="CToWUd" height="15" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="10" />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <a href="http://www.safetykart.com/travelling-pillows/1136-go-travel-pillow-duo.html?utm_source=Mailer-GoTravel&amp;utm_medium=Pillow-duo&amp;utm_campaign=Go-Travel"><img alt="Pillow-Duo" class="CToWUd" height="238" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-9.jpg" width="157" /> </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="10" />
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0" width="660">
          <tbody>
            <tr>
              <td>
                <a href="http://www.safetykart.com/locks-straps/1135-go-travel-no-key-padlock-twin-pack.html?utm_source=Mailer-GoTravel&amp;utm_medium=Padlock&amp;utm_campaign=Go-Travel"><img alt="Key Padlock" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-10.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/wallets-pouches/1132-go-travel-money-belt.html?utm_source=Mailer-GoTravel&amp;utm_medium=Money-Belt&amp;utm_campaign=Go-Travel"><img alt="Money Belt" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-11.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/miscellaneous/1144-go-travel-usb-razor.html?utm_source=Mailer-GoTravel&amp;utm_medium=USB-Razor&amp;utm_campaign=Go-Travel"><img alt="USB-Razor" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-12.jpg" width="156" /> </a>
              </td>
              <td>
                <img alt="" class="CToWUd" height="10" src="http://safetykart.com/newsletter/white.jpg" style="display:block" width="14" />
              </td>
              <td>
                <a href="http://www.safetykart.com/travelling-pillows/2356-go-travel-bean-sleeper-neck-pillow.html?utm_source=Mailer-GoTravel&amp;utm_medium=Neck-Pillow&amp;utm_campaign=Go-Travel"><img alt="Neck-Pillow" class="CToWUd" height="187" src="http://safetykartnewsletter.com/2016/May/11-May/gotravel/Go-Travel-13.jpg" width="156" /> </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td height="2">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td style="border-bottom:1px solid #EDB512;">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td align="center" valign="top">
        <a href="http://www.safetykart.com/blog/" target="_blank"><img alt="Aetoseye" class="CToWUd" src="http://www.safetykart.com/themes/leo_dealstore/mails/en/images/Aetoseye.png" /> </a>
      </td>
    </tr>
    <tr>
      <td align="center" class="container" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td align="center" width="100%">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td style="border-top:1px solid #1b374c;display:block;max-width:100%;margin:0 auto;clear:both">
                        <table align="center" cellpadding="0" cellspacing="0" style="font-family:Arial,serif;font-size:12px;font-weight:300" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" valign="top">
                                <a href="https://www.facebook.com/safetykart" style="border:0;text-decoration:none" target="_blank"><img class="CToWUd" src="http://www.safetykart.com/themes/leo_dealstore/mails/en/images/Facebook.png" style="vertical-align:middle;border:none;color:#818181;font-size:9px" /> </a>
                              </td>
                              <td align="center" valign="top">
                                <a href="https://twitter.com/SafetyKart" style="border:0;text-decoration:none" target="_blank"><img class="CToWUd" src="http://www.safetykart.com/themes/leo_dealstore/mails/en/images/Twitter.png" style="vertical-align:middle;border:none;color:#818181;font-size:9px" /> </a>
                              </td>
                              <td align="center" valign="top">
                                <a href="https://www.instagram.com/SafetyKart/" style="border:0;text-decoration:none" target="_blank"><img class="CToWUd" src="http://www.safetykart.com/themes/leo_dealstore/mails/en/images/Instagram.png" style="vertical-align:middle;border:none;color:#818181;font-size:9px" /> </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table align="center" cellpadding="0" cellspacing="5" style="font-family:Arial,serif;font-size:12px;font-weight:300" width="100%">
                          <tbody>
                            <tr>
                              <td align="justify" valign="top" width="100%">
                                <p style="font-size:11px;">
                                  <font color="#333333" face="Arial, sans-serif" size="-1">SafetyKart.com is the one stop solution to all the safety and protection related products. We stepped in the market in 2013 with the only objective of providing maximum protection to people through our products. The platform also focuses on health and care related products. We have all the solution to your safety and care especially in case of women. Thus, you will find women safety, health products very common on our platform. The reason why SafetyKart is different from other online platforms is that we just focus on one aspect &amp; i.e.; &#39;Safety&#39;.</font>
                                </p>
                                <p style="font-size:11px;">
                                  <font color="#333333" face="Arial, sans-serif" size="-1">SafetyKart believes in giving you the top solutions in terms of big brand products. Child care products, travel safety products, home and office safety products, adventure safety products, maternity care products, fitness and training accessories, health care products etc. are some the stuffs from which you will be satisfied. Apart from this, we are heavily focusing on personal safety products that include pepper sprays for women, intimate wipes, toilet seat sanitizers, body lotions and powder. As you can define yourself that we are very well focused on providing safety in each aspect.If you don&#39;t want to receive more emails from us please [UNSUBSCRIBE]</font>
                                </p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <!-- Footer End -->
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098