6 Replies Latest reply: Jul 23, 2013 4:09 PM by Nancy O. RSS

    gmail - yahoo - Web Design issue

    revdave Community Member

      Hi all,

       

      I created a web page to send out as an email promo. From Mac safari, I sent (email this message) - which added the full web page in email. Looks fine in the client app, but when I send to a gmail or yahoo address - it looks fine in the cleint app but messed up when viewed on gmail/ yahoo in a browser. Mainly the background color is lost and some tables are misaligned...

       

      Any idea how to fix this?

        • 1. Re: gmail - yahoo - Web Design issue
          Jon Fritz II CommunityMVP

          Email clients generally render code very differently from each other and very differently from a browser. Some will strip out the entire <head> section of an html email, so any css that might have been there will be gone. Some flat out ignore css.

           

          To create an html email, you really need to use 1990's design concepts. Tables for layout, minimal inline css for styling, no scripts...

           

          Could you post the code?

           

          I'm sure the folks here could give you other pointers to get it to behave a little better cross client. Though, depending on what you have, it may be impossible to get it exactly the way you want.

          • 2. Re: gmail - yahoo - Web Design issue
            revdave Community Member

            Thanks for the help,

             

             

            This is an example. The table came directly from PS6 ( save as slices and html). it shows fine in a browser - but after sens as email and viewed in gmail browser the slices have spaces. I added green BK table color so it's easy to see...

             

            here's test web page..

             

            http://www.deboisproductions.com/try3/summer-2013.html

             

             

            I just posted a simple version here - with no css - but will post another soon

             

             

            ** the main problem is that the table gets messes up so all the images are not perfectly aligned !

             

            part of the issue is that PS6 adds a spacer to make the table like..

             

            <img src="images2/images-summer-news/spacer.gif" width="1" height="45" alt="">

             

            Q: maybe this is getting messed up?

             

             

            example w broken table pics now with unwanted spaces (blue line should be solid not w black lines)

             

             

            pic-7-23-13-7.48 AM-1103.png

             

             

            ---

             

             

            <html>

            <head>

            <title>test email</title>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            </head>

            <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

            <!-- Save for Web Slices (testdemo.psd) -->

            <table width="601" height="1116" border="0" cellpadding="0" cellspacing="0" bgcolor="#99FF00" id="Table_01">

                      <tr>

                                <td colspan="2">

                                          <img src="images/summer-2013_01.png" width="600" height="381" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="381" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2">

                                          <img src="images/summer-2013_02.png" width="297" height="319" alt=""></td>

                                <td>

                                          <img src="images/summer-2013_03.png" width="303" height="174" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="174" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2">

                                          <img src="images/summer-2013_04.png" width="303" height="190" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="145" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2">

                                          <img src="images/summer-2013_05.png" width="297" height="319" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="45" alt=""></td>

                      </tr>

                      <tr>

                                <td>

                                          <img src="images/summer-2013_06.png" width="303" height="274" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="274" alt=""></td>

                      </tr>

                      <tr>

                                <td colspan="2">

                                          <img src="images/summer-2013_07.png" width="600" height="97" alt=""></td>

                                <td>

                                          <img src="images/spacer.gif" width="1" height="97" alt=""></td>

                      </tr>

            </table>

            <!-- End Save for Web Slices -->

            </body>

            </html>

             

             

            ======== here is one with basic css on page ====

             

            <!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>Summer Blast Newsletter!!! - What's Happening at de Bois Entertainment</title>

            <style type="text/css">

            .white {

                      color: #FFF;

            }

            a:link {

                      color: #FC0;

            }

            a:visited {

                      color: #FC0;

            }

            </style>

            </head>

             

             

            <body>

             

             

            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">

              <tr>

                <td>

             

             

                </td>

                <td>

             

                <table width="601" height="1116" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" id="Table_01" align="center">

                      <tr>

                        <td colspan="2"><img src="images2/images-summer-news/LINKER2.png" width="600" height="40"></td>

                        <td> </td>

              </tr>

                      <tr>

                                <td colspan="2"><a href="index.php"><img src="images2/images-summer-news/summer-2013_01.png" width="600" height="381" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="381" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2"><a href="newsongs.php"><img src="images2/images-summer-news/summer-2013_02.png" width="297" height="319" alt=""></a></td>

                                <td><a href="music_acts.php"><img src="images2/images-summer-news/summer-2013_03.png" width="303" height="174" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="174" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2"><a href="video_debois_orchestra.php"><img src="images2/images-summer-news/summer-2013_04.png" width="303" height="190" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="145" alt=""></td>

                      </tr>

                      <tr>

                                <td rowspan="2"><a href="index.php"><img src="images2/images-summer-news/summer-2013_05.png" width="297" height="319" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="45" alt=""></td>

                      </tr>

                      <tr>

                                <td><a href="index.php"><img src="images2/images-summer-news/summer-2013_06.png" width="303" height="274" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="274" alt=""></td>

                      </tr>

                      <tr>

                                <td colspan="2"><a href="index.php"><img src="images2/images-summer-news/summer-2013_07.png" width="600" height="97" alt=""></a></td>

                                <td>

                                          <img src="images2/images-summer-news/spacer.gif" width="1" height="97" alt=""></td>

                      </tr>

            </table>

             

                </td>

                <td> </td>

              </tr>

             

               <tr>

                <td> </td>

               <td> </td>

                <td> </td>

              </tr>

             

              <tr>

                <td>

                </td>

                <td>

             

                      <span class="white">

                      <?php include('includes/foot1.php'); ?>

            <?php include('includes/foot-02.php'); ?>

            </span></td>

                <td> </td>

              </tr>

             

              <tr>

                <td> </td>

                <td> </td>

                <td> </td>

              </tr>

              <tr>

                <td> </td>

                <td> </td>

                <td> </td>

              </tr>

            </table>

             

             

             

             

            </body>

            </html>

            • 3. Re: gmail - yahoo - Web Design issue
              Jon Fritz II CommunityMVP

              Photoshop is the wrong thing to use in this situation, it creates horrible table code that regularly blows up.

               

              Simplify your tables from within DW (you'll likely need to simplify your slices too). Column and row spans will cause problems. Nesting simple tables (without any kind of row or column span) within cells of other tables to get multiple items to stack is a far better way to go. Something like this (I left some spacing to better illustrate it)...

              nested.jpg

              Here are some other things I noticed with your code...

               

              Images and links must have absolute paths (http://www.yoursite.com/yourimage.jpg) to files stored on your server or they will not work. Even then, they may not display depending on the viewer's settings.

               

              All css in the <head> should be placed inline within the elements they style <p style="font-weight:bold;">.

               

              Here's a good article with some other points to help you...

               

              http://alt-web.com/Articles/HTML-Emails.shtml

              • 4. Re: gmail - yahoo - Web Design issue
                revdave Community Member

                Thanks so much Jon,

                 

                Super helpful!!

                 

                I will look at the mods that you speak of and try them out.

                • 5. Re: gmail - yahoo - Web Design issue
                  revdave Community Member

                  Thanks for all the help....

                   

                  It seems that using simple same size table cells and I even tried a basic div inside of div...

                   

                  they all seem to add spacing between pics....

                   

                   

                  Q: they are fine in webpage but gmail add extra spacing between... ANY WAY to get rid of extra spacing?

                   

                  basic div

                   

                  <div>

                  <div><img src="http://mysite.com/images2/test.png" width="200" height="125" /></div>

                  <div><img src="http://mysite.com/images2/test.png" width="200" height="125" /></div>

                  </div>

                   

                  and

                   

                   

                  <table border="0" align="center" cellpadding="0" cellspacing="0">

                    <tr>

                      <td valign="top"><img src="http://mysite.com/images2/test.png" width="200" height="125" /></td>

                      <td valign="top"><img src="http://mysite.com/images2/test.png" alt="" width="200" height="125" /></td>

                    </tr>

                    <tr>

                      <td valign="top"><img src="http://mysite.com/images2/test.png" alt="" width="200" height="125" /></td>

                      <td valign="top"><img src="http://mysite.com/images2/test.png" alt="" width="200" height="125" /></td>

                    </tr>

                  </table>

                  • 6. Re: gmail - yahoo - Web Design issue
                    Nancy O. CommunityMVP

                    Don't use image slices.  Use whole images. And not too many of them.  Ultimately, e-mail is a form of text communication. Less than 30% of web mail users can see formatted HTML and images no matter what you do.

                     

                     

                    Nancy O.