Какую максимальную ширину вы должны использовать для рассылки электронной почты в формате HTML? - PullRequest
Новая
       26

Какую максимальную ширину вы должны использовать для рассылки электронной почты в формате HTML?

3 голосов
/ 11 августа 2011

Мне интересно, потому что я видел много разных ответов. В конечном счете, я думаю, что 500-600px будет в порядке. Особенно, если вы строите, чтобы соответствовать стандартам Hotmail, Gmail, Outlook, Mail.app и т. Д.

Но я хотел бы услышать мнение других по этому вопросу. Существует ли размер набора, идеально подходящий для разработки новостных рассылок по электронной почте? Это говорит о создании шаблона с таблицами HTML.

Ответы [ 2 ]

5 голосов
/ 11 августа 2011

IMO вы не должны устанавливать ширину.Я, как и многие другие, склонен просматривать свою электронную почту на своем телефоне.Население пользователей со смартфонами растет;То же относится и к числу пользователей, которые также используют свой телефон для проверки электронной почты.

Вы никогда не знаете, в каком разрешении находится пользователь.Если вы хотите, чтобы они действительно прочитали вашу информацию, а не просто удалили ее, поскольку она вызывает раздражающую горизонтальную прокрутку, было бы неплохо избегать заданной ширины, если это вообще возможно.

0 голосов
/ 11 августа 2011

Для просмотра измените разрешение Windows (или разрешение Mac) на минимально возможное.И посмотри, как это выглядит.Хотя я бы придерживался базового разрешения сайта, которое составляет 800x600.Я предполагаю, что это также относится к электронной почте, отправляемой в формате HTML.

Если вы хотите, чтобы ваш информационный бюллетень можно было печатать (на физическом принтере) в HTML, я бы использовал разные таблицы стилей для разных браузеров, когдастраница печатает и переворачивает атрибут медиа на «печать».Тогда это будет выглядеть по-разному в зависимости от того, когда применяется стиль, и от того, печатает ли конечный пользователь страницу на физическом принтере или просматривает ее в HTML.Тщательно протестируйте с различными браузерами.Я видел странное поведение в изменении масштаба печати предварительного просмотра в разных браузерах.Иногда масштаб не сохраняется.Google Chrome является худшим для точной печати масштаба.Они хороши для производительности и стилей, работающих последовательно, но плохо, когда дело доходит до отправки на принтеры.В IE 9 масштаб печати по умолчанию не сохраняется.В некоторых версиях Mozilla вам нужно увеличить шкалу до 125% (или что-то иное, кроме 100%), а затем до 100%, прежде чем она действительно станет 100%.Я не буду вдаваться в подробности, но этот фрагмент кода поможет вам понять, как использовать атрибут media.Шкала печати "Shrink To Fit" - ваш злейший враг.Если браузер поддерживает CSS3, то у вас есть больше возможностей и вы можете лучше контролировать, как печатается ваша новостная рассылка!

Пример: 

<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>

Вот хороший кодфрагмент, если вы хотите, чтобы верхние / нижние колонтитулы на вашей странице: 

<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>
...