<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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