私はhtmlメールを作るためにいくつかのhtmlコードを書いています。私はいくつかの調査を行いましたが、テーブルなどの古い学校のhtmlを使用することがこれを行うための最良の方法であることがわかりました。
以前の問題についてすべての助けを借りた後（ありがとう！）私は残りの作業を開始し、モバイルデバイスでレイアウトを読みやすくしました。これが私が今持っているものです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
a img {border:none;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
.miniwrapper {width:600px;}
.footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px; font-size:0.9em;}
.footermobile {display:none;}
.actiemobile {display:none;}
.iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
.iconwrapper p {margin-left: 0px; margin-bottom:10px;}
.headermobile {display:none;}
.devicesmobile {display:none;}
@media all and (max-width: 400px) {
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
p { margin:0 0 10px 26px; line-height:1.2; width:350px; font-size:0.9em;}
.contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
.headerwrapper {width:320px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:320px; display:block;}
.icons {width:260px; display:block;}
.devices {display:none;}
.miniwrapper {width:100%;}
.footer {display:none;}
.actie {display:none;}
.footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
.actiemobile {display:block;}
.headermobile {display:block; text-align:center;}
.devicesmobile {display:block;}
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="logo.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="devices.png">
</td>
</tr>
<tr class="headermobile">
<td class="fixedwidth" colspan="2">
<img src="logomobile.png" border="0">
</td>
</tr>
<tr class="devicesmobile">
<td colspan="2">
<img src="devicesmobile.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
<h1>Werkt u al met apps?</h1>
<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service,
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p>
</p>
</td>
<td class="icons">
<table>
<tr>
<td colspan="2">
No matter what device.<br>
We build natively.
</td>
</tr>
<tr>
<tbody class="iconwrapper">
<tr text-align="center">
<td><img src="apple.png"></td>
<td><p>Apple iOS is the operating<br>
system that powers the <br>
iPhone, iPad and iPod touch.</p>
</td>
</tr>
<tr>
<td><img src="android.png"></td>
<td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
</tr>
<tr>
<td><img src="windows.png"></td>
<td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
</tr>
<tr>
<td><img src="html5.png"></td>
<td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
</tr>
</tbody>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td class="actie" colspan="2">
<img src="http://i47.tinypic.com/11qi7pw.png">
</td>
<td class="actiemobile" colspan="2">
<img src="actiemobile.png">
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
<td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></p></td>
<td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
</tr>
</table>
</td>
<td class="footermobile" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center">
<p class="contactmobile">
Suikersilo-West 23<br>
1165 MP Halfweg<br>
<a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
<a href="mailto:info@mediabunker.com">info@mediabunker.com</a><br>
<a href="http://mediabunker.com">www.mediabunker.com</a><br>
<a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
モバイルデバイスでもレイアウトをうまく機能させるのに問題があります。私はもっと良い解決策を思いついたと思います。背景画像を使用し、その上に他の画像（デバイス、バナーなど）を配置します。それはおそらくその問題を解決するでしょう？
ただし、他に2つの問題があります。モバイルデバイスでページを表示すると、コンテンツの下にアイコンtdを表示できません。ディスプレイブロックでうまくいくと思いましたが、うまくいきません...また、アイコンテーブルを追加したときに表示された右側の奇妙なスペースがあります。何らかの方法で競合する必要があります。これを修正するにはどうすればよいですか？
それが助けになるなら、これは私の前の質問でした。HTMLメールテーブルのネスト そしてこれはオンラインバージョンです。http://kellyvuijst.nl/email/email.html