What is the max width you should use for an HTML e-mail newsletter?
I'm wondering because I have seen a lot of different answers. Ultimately I would think 500-600px would be fine. Especially if you are buildi开发者_如何学Cng to match standards for Hotmail, Gmail, Outlook, Mail.app, etc.
But I would like to hear others' opinion on the matter. Is there a set size perfect for developing e-mail newsletters? This is talking about building the template with HTML tables.
IMO you shouldn't set the width. I, like many others, tend to view my email on my phone. The population of users with smartphones is growing; so is the population of users that also use their phone to check email.
You never know what resolution a user is at. If you want them to actually read your info, and not just delete it since it causes annoying horizontal scrolling, it would be a good idea to avoid a set width if at all possible.
For viewing purposes, change your Windows resolution (or Mac resolution) to the smallest possible. And see what it looks like. Although, I'd stick with the website baseline resolution, which is 800x600. I would assume this would also apply to email sent in an HTML format.
If you are wanting to make your newsletter printable (to a physical printer) in HTML, I would use different style sheets for different browsers when the page prints and flip the media attribute to "print". Then it will look differently depending on when the style is applied and whether the end-user is printing the page to a physical printer or viewing it in HTML. Test thoroughly with different browsers. I've seen strange behaviors in the Print Preview print scale change in different browsers. Sometimes the scale doesn't persist. Google Chrome is the worst for making the print scale accurate. They are good for performance and styles working consistently, but are poor when it comes to sending to printers. In IE 9, the print scale default doesn't persist. In some versions of Mozilla, you need to force the scale to 125% (or anything other than 100% really) then to 100% before it actually becomes 100%. I won't get into details, but this snippet of code will get you started on how to use the media attribute. The print scale "Shrink To Fit" is your worst enemy. If the browser supports CSS3, then you have more options and can better control how your newsletter prints!
Example:
<style type="text/css" media="all">
.printPage { height:100%; width:100%; position:relative; }
</style>
<style type="text/css" media="print">
.printPage { height:8.5in; width:100%; position:relative; }
</style>
Here's a good code snippet if you want headers/footers in your page:
<html>
<head>
<style type="text/css" media="all">
thead { display: table-header-group; vertical-align:top; }
tfoot { display: table-footer-group; vertical-align:bottom; }
.printPage { height:11.5in; }
</style>
<style type="text/css" media="print">
.printHeader { display: table-header-group; vertical-align:top; }
.printFooter { display: table-footer-group; vertical-align:bottom; }
.printPage { height:100%; }
</style>
</head>
<body>
<table class="printPage">
<thead class="printHeader"><tr><td>Your header goes here</td></tr></thead>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
<tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论