<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Верстка email писем

Верстка email писем

Верстка писем для email рассылки непростая задача, требующая нестандартного подхода от верстальщика. В чем состоит, трудность, верстки писем?

Все дело в огромном изобилии почтовых программ, браузеров, мобильных устройств. Как сделать так, чтобы письмо выглядело корректно, везде, где-бы не открыл его, пользователь.

Базовые принципы адаптивной верстки писем

Они отличаются от привычной блочной верстки обычных страниц. Верстать следует, на давно устаревшей табличной верстке, прописывая стили инлайн-способом, непосредственно внутри тегов. Многие почтовые программы, обрезают все внешние CSS файлы и медиа-запросы. Ширина контейнера с письмом, не должна превышать 600 пикселей.

Для HTML-тегов

Обнуляем все отступы и рамки

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">

Заменяем:

<div> на <table>
<margin> на <padding>
<background> на <background-color> или <bgcolor>

Их можно применять только для тега <table>.

Для каждой ячейки td, span, p и ссылок обязательно указывать font-family, font-size и color. Для всех span и ссылок, прописываем line-height. В противном случае, почтовые клиенты добавят свои значения. Здесь работает принцип, что лучше лишний раз продублировать стилевые свойства в тегах, чем оставить их пустыми.


-webkit-text-size-adjust:none; - свойство для всех строчных элементов

Изображения

Изображения прописывать только, через тег img, избегая вставки их фоном, обязательно прописывая ширину и высоту.


Шрифты

Шрифты желательно использовать стандартные, которые есть на всех устройствах. Однако, при верстке письма по макету, нестандартные шрифты вставлять картинками, за исключением Google Fonts.

Ко всем изображениям, надо приписать display:block, иначе Outlook автоматически добавит отступы к картинкам.

Адаптивная верстка

Для адаптивности писем, надо совмещать медиа-запросы и резиновую табличную верстку с указанием максимальной ширины max-width. Специально для почтового клиента Outlook, прописывая внутри комментариев альтернативный код, поскольку он не понимает свойство max-width.

Медиа-запросы не поддерживаются в Gmail App, Mail.ru App, Yandex App, Mailbox App, Yahoo! App, Windows Phone, BlackBerry.

Совет новичкам. Если вы для себя создаете email письмо для рассылки, то делайте его в одну колонку, так вы избавите себя от сложной адаптивной верстки, когда приходится перестраивать колонки.

Пример верстки письма для рассылки

Создаем таблицу, шириной 600 пикселей с серым фоном и заголовком в первой строке.

<table align="center" cellspacing="0" cellpadding="0" border="0"
style="width:100%; max-width:600px; background-color:#f4f2f2;">
  <tr>
    <td height="100%"
style="padding-top:20px; padding-bottom:20px; padding-right:20px; padding-left:20px; text-align:center;">
  <h2 style="margin:0;color:#222222;font-family:Arial,'sans-serif';font-size:40px;">Бодрящее кофе</h2&>
  </td>
  </tr>
</table>

Во второй строке разместится картинка.

<tr>
  <td style="padding-bottom:10px;">
    <img src="coffee.jpg" width="600" alt="кофе" style="height:auto;width:100%;display:block;"/>
  </td>
</tr>

В последней строке текст и кнопка, в виде вложенной таблицы.

<tr>
<td class="text" style="color:#222222;font-famil:Tahoma;font-size:22px;line-height:30px;padding-bottom:20px;padding-right:20px;padding-left:20px;">
<p style="color:#222222;font-famil:Tahoma;font-size:22px;line-height:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula magna sit amet lorem venenatis, quis condimentum odio egestas. Suspendisse felis felis, tempor id convallis in, tincidunt quis nisi. </p>
<div style="margin:0 auto; width:300px;">
<table cellspacing="0" cellpadding="0" width="300"><tr><td align="center" bgcolor="#ad7445" style="border-radius:30px;color:#ffffff;padding:18px 2px 18px 2px;"><a href="#" style="font-family:Tahoma;width:100%;font-size:22px;font-weight:bold;color:#ffffff;text-decoration:none; text-align:center;text-transform:uppercase;"><span style="color:#ffffff;">Узнать больше</span></a></td></tr></table></div>
</td>
</tr>

Выше было сказано, что Outlook не понимает свойства max-width, поэтому пропишем в комментариях альтернативный код.

<body>
<!--[if mso]>
<table><tr><td width="600">
<![endif]-->
<table>..</table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</body>

Медиа-запросы

Увеличим текст на мобильных устройствах.

@media screen and (max-width: 425px) {
  .text, p {
    font-size: 28px;
    width: 100% !important;
  }
  }

Скриншот примера

Верстка email писем.

Заключение

Для тех, кто хочет научиться быстро, создать себе бизнес сайт и создавать внутри системы email письма (установив плагин), лучшим решением, по прежнему остается платформа WordPress. Посмотрите мой новый видео-курс по WordPress.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.