«Пишіть листи»: Три техніки верстки хороших email'ів

Верстці листів і розсилок присвячено величезну кількість навчальних статей. В такому обсязі інформації дуже легко заблукати, а писати листи і робити розсилку все-таки потрібно. Тому сьогодні ми підготували матеріал, в якому зібрали три популярні техніки для ефективної верстки email'ів, що підходять для початківців верстальників.



Інтерактивні листи

Інтерактивні елементи розбавляють монотонний текст і економлять час читача, тому є зручним інструментом для створення рекламних листів і красиво оформлених текстів.

В якості прикладу давайте розглянемо простий спосіб створення інтерактивних зображень. Він складається з трьох кроків:

1. Створюємо таблицю з однієї комірки і задаємо для неї фонове зображення, яке показується відразу після завантаження сторінки.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://.../alternate-image.jpg">
</td></tr></table>

2. Встановлюємо головне зображення «ховаємо» його на заслання з класом img-swap. Це дозволить створити hover-ефект: коли при наведенні курсору на зображення тла, на його місці з'явиться головне.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://../alternate-image.jpg">
<a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a>
</td></tr></table>

3. Налаштовуємо команду :hover і встановлюємо стилі для класу img-swap.

<style>
.img-swap {
display: block;
width: 240px;
height: 170px;
}

.img-swap:hover img {
height: 0px;
}
</style>

Цей варіант створення інтерактивного зображення підтримується такими сервісами, як: Mail, Outlook, Yahoo! і Gmail (з модифікаціями).

Прогресивне поліпшення (progressive enhancement)

Прогресивне поліпшення – це стратегія, передбачає поетапне створення веб-сторінок – від простого до складного. Спершу позначається структура листа, а вже потім ведеться робота по поліпшенню зовнішнього вигляду і юзабіліті.

Спочатку вміст листа розмічається з допомогою HTML, щоб сформувати його структуру, побудувати макет. Після цього йде налагодження дизайну засобами CSS – набори стилів CSS покращують оформлення та презентабельність документа – тут встановлюються фонові зображення, задаються параметри шрифту і так далі. На третьому етапі застосовуються нові можливості специфікації CSS3. Після розмітки вмісту і приведення його в порядок приходить час JavaScript, що відповідає за взаємодію з інтерфейсом і динамічні елементи.

Покрокова робота з документом дозволяє відслідковувати помилки і виправляти їх на місці, адже поява одного недоліку може позначитися на результаті всієї роботи. Якщо ви хочете подивитися на прогресивне поліпшення в дії, то зверніть увагу на приклад від html academy.

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

Media queryМедиазапрос — це компонент мови CSS, що дозволяє вибирати різні набори стилів CSS. Набори стилів – ключ до створення привабливого зовнішнього вигляду документа (наочний практичний приклад CSS у дії ви знайдете посилання).

Медиазапрос включає в себе три послідовних компонента, які налаштовуються покроково:

  • Тип середовища (media type) – визначає середовище застосування правил. Виділяють такі типи, як all print, screen (використовується для email) і speech
  • Виразу (expressions) – це перелік властивостей пристрою, що описують, наприклад, ширину (width) і висоту (height) екрана, колір
  • Правила стилів – застосовуються при відкритті листа в середовищі, що відповідає типу і властивостей у вираженні
Медиазапросы незамінні при оптимізації формату відображення листів на мобільних пристроях. Вони дозволяють перейти з фіксованого дизайну на «плаваючий» – такий документ буде добре виглядати на різних платформах.

Більше того, технологія медиазапросов може бути використана для націлювання сервісів (виділення сервісів, що задовольняють заданим критеріям) і адаптації під них. За аналогією здійснюється таргетинг і пристроїв, де важливо враховувати розміри екрана. Наприклад, так виглядає стандартний код для iPhone 6 Plus:

@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
/* Insert styles here */

Медиазапросы дозволяють створювати красиві і, головне, адаптивні листи, які добре виглядають на будь-якому пристрої, однак потрібно бути готовим до того, що багато поштові клієнти не підтримують цю технологію.

Інтерактивні листи, прогресивне поліпшення і медиазапросы – це досить поширені техніки, здатні перетворити ваші електронні послання в невеликі твори мистецтва, більше того, вони є непоганою базою для подальшого розвитку ваших навичок верстки.

Про що ще ми пишемо в блозі Пєчкін-mail:

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.