私はこのテンプレートに多くの時間を費やしました。モバイル向けに最適化されており、初心者が編集できる dotMailer の easybuilder ソフトウェアと互換性があります。
電子メールが Outlook (デスクトップ クライアント) によって受信されると、右側の幅が水平方向に拡張され、いくつかの要素がそれに続きます。全幅の要素は拡張されません (拡張したいわけではありません!)
添付のスクリーンショットと以下のコード スニペットを見つけてください (ここでは文字制限のため、ヘッダー/上部のコンテンツにのみ貼り付けます)。
<style>.ReadMsgBody{width:100%}.ExternalClass{width:100%}#outlook a{padding:0}body{width:100%!important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0}a img{border:0}a,a:visited,a:hover,a:active{color:inherit!important}img{outline:0;text-decoration:none;-ms-interpolation-mode:bicubic}.applelinks a{color:#333;text-decoration:none}.ExternalClass{width:100%!important}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}.ExternalClass img[class^=Emoji]{width:10px!important;height:10px!important;display:inline!important}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5),only screen and (max-device-width:480px){table[class~=hide],td[class~=hide],img[class~=hide],font[class~=hide]{display:none!important}td[class~=grey_border]{padding:5px!important;margin:0!important}td[class~=eem_frame]{padding:10px!important}table[class~=ee_element],table[class~=eeb_width],table[class~=eev_element]{width:100%!important}table[class~=eem_outerzone],td[class~=eem_outerzone]{max-width:640px!important;min-width:310px!important;width:100%!important}td[class~=ved-scaled-cols],table[class="ee_columns"]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:10px!important}td[class~=ved-scaled-cols-screenshots],table[class="ee_columns_screenshots"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-newsimages],table[class="ee_columns_newsimages"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-button1],table[class="ee_columns_b1"]{display:block!important;clear:both!important;width:200px!important;padding-top:15px!important;padding-bottom:15px!important}td[class~=ved-scaled-cols-button2],table[class="ee_columns_button2"]{display:block!important;clear:both!important;width:100%!important;max-height:54px!important;padding:10px 20px 10px 0!important}img[class~=ee_editable]{height:auto!important;max-width:640px!important;width:100%!important}.ee_editable{width:100%!important;height:auto!important}.ee_columns>tbody>tr>td:not(.ee_dropzone),.ee_columns>tr>td:not(.ee_dropzone),.ee_columnstd:not(.ee_dropzone){display:inherit!important}.ee_columns_screenshots>tbody>tr>td:not(.ee_dropzone),.ee_columns_screenshots>tr>td:not(.ee_dropzone),.ee_columns_screenshotstd:not(.ee_dropzone){display:inherit!important}.ee_columns_newsimages>tbody>tr>td:not(.ee_dropzone),.ee_columns_newsimages>tr>td:not(.ee_dropzone),.ee_columns_newsimagestd:not(.ee_dropzone){display:inherit!important}table[class~="eem_stack320"],td[class~="eem_stack320"]{display:block!important;clear:both!important;min-width:320px!important;width:100%!important;margin:0!important;padding:0!important;alignment-adjust:central!important}.eem_stack{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important}td[class~=eem_stack]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0}div[class~=center],div[class~=center] *{text-align:center!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=left],div[class~=left] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=right],div[class~=right] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}td[class~=eem_smallimage]{line-height:normal!important;height:auto!important}font[class~=title-text],table[class="title-text"]{line-height:22px!important;margin-bottom:15px!important;font-size:20px!important}font[class~=main-text],table[class="main-text"]{line-height:20px!important;margin-bottom:15px!important;font-size:18px!important}font[class~=section-title-text],table[class="section-title-text"]{line-height:26px!important;margin-bottom:15px!important;font-size:24px!important}font[class~=unsubscribe-text],table[class="unsubscribe-text"]{line-height:30px!important;padding-bottom:20px!important;font-size:24px!important}};.ee_editable{width:100%!important;height:auto!important}</style><style type="text/css">table{border-collapse:collapse}</style><table style="table-layout:auto"class="ee_mobiletemplate"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td><table class="eem_outerzone"style="border:1px solid rgb(153,153,153);table-layout:auto;"align="center"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="680"><tbody><tr><td class="grey_border"style="padding:18px;"><table style="width:640px;table-layout:auto"class="eem_outerzone" bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding:0px"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="hide"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-right:5px;padding-bottom:5px"><table style="table-layout:auto"class="ee_customedit ee_sociallinks"data-title="Social sharing"data-edit="social"border="0" cellpadding="0" cellspacing="0"width="230"><tbody><tr><td class="ee_socialcontent"><div class="eesocial"><table style="table-layout:auto"border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=4"><img title="Facebook"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/facebook.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=36"><img title="GooglePlus"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/googleplus.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=12"><img title="LinkedIn"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/linkedin2.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=32"><img title="Twitter" style="width:24px;height:24px"src="https://my.dotmailer.com/cmpimg/sys/socnet/twitter.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=1"><img title="Delicious"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/delicious.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=3"><img title="reddit"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/reddit.png"border="0" height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=5"><img title="StumbleUpon"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/stumbleupon.png"border="0"height="24"width="24"></a></td></tr></tbody></table></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="eem_outerzone"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-left:1px solid #999;border-top:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td class="hide"style="padding:0;width:210px"bgcolor="#000000"width="35%"><table class="ee_element"style="width:208px;table-layout:auto"border="0"cellpadding="0"cellspacing="0"width="208"><tbody><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><img src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=Sys - header logo - Corporate&id=13743"></td></tr></tbody></table></td><td style="width:390px;padding-right:20px;padding-left:20px"bgcolor="#000000"><div style="padding-top:8px;text-align:right"class="ee_editable center"><font style="mso-table-lspace:0;mso-table-rspace:0;color:#f3fff1;font-size:15px;line-height:18px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif">July 2013</font></div><div style="text-align:right"class="ee_editable hide"><img style="width:369px;height:56px"class="vedpw390"src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=Sys - header forward and view in browser&id=13746"border="0"width="369"height="56"></div></td></tr></tbody></table><table class="ee_element" style="width:640px" border="0" cellpadding="0" cellspacing="0" width="640"><tbody><tr><td class="eem_smallimage" style="padding:0;width:640px;line-height:6px" height="6"><img src="https://i.emlfiles.com/cmpimg/2011/44869/2977177_greendivider640.png" class="ee_editable vedpw640 ee_pnggif_image" style="display:block;width:640px;height:6px" border="0" width="640" height="6"></td></tr></tbody></table><table class="ee_element" style="width:640px;table-layout:auto;background-color:#fff" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="padding:0px;width:640px"><a href="#"target="_blank"><img src="/img.ashx?__i__=https://i.emlfiles.com/cmpimg/9/6/8/4/4/files/3578369_main_feature_graphic_640xany.png" alt="Main Feature Graphic"width="640"class="ee_editable vedpw640"style="display:block;width:640px;"align="middle"border="0"></a></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:640px"><table class="ee_element"style="width:640px;table-layout:auto"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td><td style="padding:0;width:600px"width="100%"><div style="text-align:left" class="ee_editable"><font class="title-text" style="mso-table-lspace:0;mso-table-rspace:0;color:#76b900;font-size:15px;line-height:18px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif;font-weight:bold;text-decoration:none;text-transform:uppercase"><a href="#"target="_blank"style="text-decoration:none;color:#76b900"><br>MAIN FEATURE</a></font></div><div style="text-align:left"class="ee_editable"><font class="main-text"style="mso-table-lspace:0;mso-table-rspace:0;font-size:12px;color:#000;line-height:14px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif">Integer iaculis dapibus scelerisque. Quisque diam ligula, pulvinar at quam eget, volutpat adipiscing nulla. Ut et massa tempor, pharetra diam ac, eleifend quam. In rhoncus rhoncus elit a auctor. Aliquam erat volutpat. Quisque blandit nisl eget pretium sagittis. Praesent euismod urna ut commodo mollis. Phasellus lacinia orci at posuere bibendum. Curabitur imperdiet odio nunc, tempus consequat mauris fermentum a.<br/><br/>Morbi ac tellus felis. In libero orci, eleifend dictum tempus consequat, pellentesque nec nisi. Etiam vitae nisl tincidunt, dictum nisi in, condimentum nulla. Morbi euismod vestibulum urna sit amet venenatis.</font></div></td><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td></tr><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"class="ee_dropzone"bgcolor="#ffffff"width="100%"></td></tr></tbody></table></td></tr></tbody></table>