5
मैंने एक HTML ई-मेल टेम्पलेट बनाया है जो उत्तरदायी होना चाहिए। यह विभिन्न ई-मेल क्लाइंट और मोबाइल पर सही प्रदर्शित करता है। लेकिन आउटलुक पर यह 100% तक फैला हुआ है, जो बिल्कुल ठंडा नहीं है, क्योंकि हेडर 600px चौड़ा है।उत्तरदायी एचटीएमएल ई-मेल: दृष्टिकोण
मुझे पता है कि Outlook max-width संपत्ति का समर्थन नहीं करता है। लेकिन केवल width का उपयोग करके मोबाइल ब्राउज़र इसे गलत प्रदर्शित करने का कारण बनता है।
तो मेरा सवाल यह है कि: इसे उत्तरदायी बनाने के लिए टेम्पलेट में क्या करना/बदलना चाहिए और अभी भी 600px की अधिकतम चौड़ाई पर प्रदर्शित होना चाहिए?
यहां कोड है। पहले अतिरिक्त सीएसएस (पढ़ने के लिए बेहतर होना चाहिए) के साथ, इनलाइन सीएसएस के साथ दूसरा (जिसे ईमेल करते समय उपयोग किया जाना चाहिए)। इनलाइन को प्रस्तुत करने के लिए प्रयुक्त http://beaker.mailchimp.com/inline-css।
<!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
background:#F4F3F4;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.1; margin-bottom:15px; color:#000;
font-family:Arial, Verdana, "Times New Roman";
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
padding:0!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:0 5px 5px 5px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
background:#FFF;
border: solid 1px #d9d9d9;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#F4F3F4">
<div class="content">
<p style="color:#666; margin:0; padding:0; font-size:10px;"><a href="{email_url}" style="color:#666; margin:0; padding:0;">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align:left;">
<tr>
<td>
<p><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" /></p>
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr>
<td><a href="<?php echo get_permalink(); ?>"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image"></a></td>
<td valign="top">
<a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br/>
<br/>
</td>
</tr>
<tr style="margin:0 15px;">
<td align="center" style="border-top: solid 1px #d9d9d9; padding:5px 0;" >
<p>
<a href="http://twitter.com/Topografie">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas">Facebook</a> |
<a href="{unsubscription_url}">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
इनलाइन सीएसएस:
<!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" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</head>
<body style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;background: #F4F3F4;width: 100%;">
<table class="body-wrap" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
<td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, "Times New Roman";display: block;max-width: 600px;clear: both;">
<div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, "Times New Roman";max-width: 600px;display: block;">
<p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><a href="{email_url}" style="color: #666;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align: left;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></p>
<!-- Callout Panel -->
<p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;background-color: #ECF8FF;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;font-weight: bold;">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"><a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></a></td>
<td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 27px;"><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</td>
</tr>
<tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">
<a href="http://twitter.com/Topografie" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Facebook</a> |
<a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
Am मुझे लगता है कि में सही ढंग से इस व्याख्या, आप अपने उत्तरदायी सीएसएस इनलाइन डाल? आपका उत्तरदायी कोड ईमेल के लिए अपने शीर्षलेख में स्क्रीन आकार निर्भर मीडिया-क्वेरी में दिखाई देना चाहिए। – samanthasquared
http://stackoverflow.com/a/23346010/1922144 – davidcondrey