Skip navigation
Currently Being Moderated

gmail - yahoo - Web Design issue

Jul 23, 2013 6:16 AM

Tags: #gmail

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?

 
Replies
  • Currently Being Moderated
    Jul 23, 2013 6:30 AM   in reply to revdave

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 23, 2013 9:34 AM   in reply to revdave

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 23, 2013 4:09 PM   in reply to revdave

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points