내 이메일 디자인

-1
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"> 
 
    ReadMsgBody{ width: 100%;} 
 
    .ExternalClass {width: 100%;} 
 
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
 
    body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;} 
 
    p { margin: 1em 0;} 
 
    table td { border-collapse: collapse;} 
 
    img {outline:0;} 
 
    a img {border:none;} 
 
    p {margin: 1em 0;} 
 
    @-ms-viewport{ width: device-width;} 
 
    
 
    @media only screen and (max-width: 300PX) { 
 
    body[yahoo] .container { width:100% !important; } 
 
    body[yahoo] .footer { width:auto !important; margin-left:0; } 
 
    body[yahoo] .content-padding{ padding:4px !important; } 
 
    body[yahoo] .mobile-hidden { display:none !important; } 
 
    body[yahoo] .logo { display:block !important; padding:0 !important; } 
 
    body[yahoo] img { max-width:100% !important; height:auto !important; max-height:auto !important;} 
 
    body[yahoo] .header img{max-width:100% !important;height:auto !important; max-height:auto !important;} 
 
    body[yahoo] .photo img { width:100% !important; max-width:100% !important; height:auto !important;} 
 
    body[yahoo] .drop { display:block !important; width: 100% !important; float:left; clear:both;} 
 
    body[yahoo] .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;} 
 
    body[yahoo] .nav4, body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important; } 
 
    body[yahoo] .tableBlock {width:100% !important;} 
 
    body[yahoo] .responsive-td {width:100% !important; float:left !important; padding:0 !important; } 
 
     .fluid, .fluid-centered { 
 
     width: 100% !important; 
 
     max-width: 100% !important; 
 
     height: auto !important; 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
     .fluid-centered { 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
    /* MOBILE GLOBAL STYLES - DO NOT CHANGE */ 
 
     body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;} 
 
     h1 { font-size: 22px !important; line-height: normal !important;} 
 
     h2 { font-size: 20px !important; line-height: normal !important;} 
 
     h3 { font-size: 18px !important; line-height: normal !important;} 
 
     .buttonstyles { 
 
     font-family:arial,helvetica,sans-serif !important; 
 
     font-size: 16px !important; 
 
     color: #FFFFFF !important; 
 
     padding: 10px !important; 
 
     } 
 
    /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */ 
 
    } 
 
    
 
    @media only screen and (max-width: 640px) { 
 
    body[yahoo] .container { width:100% !important; } 
 
    body[yahoo] .mobile-hidden { display:none !important; } 
 
    body[yahoo] .logo { display:block !important; padding:0 !important; } 
 
    body[yahoo] .photo img { width:100% !important; height:auto !important;} 
 
    body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important;} 
 
     .fluid, .fluid-centered { 
 
     width: 100% !important; 
 
     max-width: 100% !important; 
 
     height: auto !important; 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
     .fluid-centered { 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     } 
 
    } 
 
</style><!--[if mso]>  <style type="text/css">   /* Begin Outlook Font Fix */   body, table, td {    font-family: Arial, Helvetica, sans-serif ;    font-size:16px;    color:#808080;    line-height:1;   }   /* End Outlook Font Fix */  </style>  <![endif]--></head><body bgcolor="#ffffff" text="#000000" style="background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0px; -webkit-text-size-adjust:none;" yahoo="fix"><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center" valign="top"><div style="margin:18px 0;"> 
 

 
<!-- END Table use to set width of email --></div> 
 
<!--End Navi Bar--> 
 
</td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding-top: 10px;padding-right: 10px;padding-left: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td> 
 
<img data-assetid="31498" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpg" height="337" width="256" style="height:337px;width:256px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></table></td></tr></table></td> 
 
<td class="responsive-td" valign="top" style="width: 50%; padding-left: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_motts.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_honey_nut_cheerios.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="168" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_metamucil.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_green_giant_beans.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 400px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td> 
 
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Mission.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/ReddyWhip.jpg" alt="" width="120" height="120" border="0" class=""></a></td> 
 
<td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/images.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""> 
 
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Kraft.jpg" alt="" width="120" height="120" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style> 
 
/* Gridblock with Title Sections Pattern CSS */ 
 
@media only screen and (max-width: 500px) { 
 
     table[class="pattern"] table { width: 100%; } 
 
     table[class="pattern"] .spacer { display: none; } 
 
     table[class="pattern"] .section-title, 
 
     table[class="pattern"] .section-row { 
 
      display: block; 
 
      height: auto; 
 
     } 
 
     table[class="pattern"] .section-title { 
 
      width: 100%; 
 
      padding: 20px 0; 
 
      margin-bottom: 8px; 
 
     } 
 
     table[class="pattern"] .section-row { width: 100%; } 
 
     table[class="pattern"] .section-row .section { 
 
      display: block; 
 
      float: left; 
 
      width: 32%; 
 
      height: auto; 
 
      margin-left: 2%; 
 
      padding: 60px 20px; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     } 
 
     table[class="pattern"] .section-row .section:first-child { margin-left: 0; } 
 
} 
 
    @media only screen and (max-width: 400px) { 
 
     table[class="pattern"] .grid-block { padding-bottom: 0 !important; } 
 
     table[class="pattern"] .section-row .section { 
 
      float: none; 
 
      width: 100%; 
 
      margin: 0 0 8px 0; 
 
     } 
 
    } 
 
</style><table cellpadding="0" cellspacing="0" class="pattern" width="100%"><tbody><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            2 
 
           </td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            3 
 
           </td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            2 
 
           </td><td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;"> 
 
            3 
 
           </td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%; padding-left: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td><img data-assetid="31510" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpg" height="395" width="300" style="height:395px;width:300px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody> 
 
</table></td></tr></tbody></table></td> 
 
</tr></table></td></tr></table></td></tr><tr><td valign="top"><center><table cellpadding="2" cellspacing="0" width="600" ID="Table5"><tr><td> </body></html>
모바일 장치에 응답하지 않습니다 난 그냥 그러나 나는 그것이 모바일 기기에 제대로 응답으로 힘든 시간을 보내고 있어요 이번 캠페인을 위해 이메일을 디자인했다. 내가 Litmus에서 그것을 체크 할 때 어떤 중단 점이라도 인정하지 않는다. 나는 코드 아래에 첨부했습니다 :
출처
2017-05-09 Clay
코드가 없습니다 : ( –
이메일 디자인을 평가할 수있는 온라인 서비스가 있습니다. 하나는 Litmus로, 79 달러/월입니다. 잘 생긴 이메일 디자인이 필요한 경우, 구매를 고려할 수 있습니다 – amphetamachine
@amphetamachine 나는 리트머스를 가지고있다. 이것은 브라우저 링크 등등에 관한 나쁜 링크에 대해서만 알려줄 것이다. – Clay
세 가지가 나에게 스틱 :
1 호 : 당신은 더 이상이 table[class="pattern"] 같은 클래스를 정의하기 위해 괄호가 필요하지 않습니다. table.pattern은 모든 이메일 클라이언트에서 작동합니다.
제 2 : 은 왜 거의 모든 body[yahoo]로 시작된다? 야후! 메일은 다른 곳에서는 렌더링되지 않습니다. 이와 같이 접두사가 붙은 미디어 쿼리 코드가있는 경우 iOS Mail 또는 Gmail App에서 렌더링되지 않습니다.
제 3 호 : <body>에서 <style> 꽤 많은 태그 블록이 있습니다. 이것들은 모든 이메일 클라이언트에 의해 렌더링되지 않고, <head>으로 이동하기에 가장 좋습니다.
출처
2017-05-10 12:06:56
답변

관련 문제
