Advertisement
  1. Web Design
  2. Email Design
Webdesign

Створення простого адаптивного HTML-шаблону електронного листа

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

В цей туторіали я вам покажу, як створити простий HTML-шаблон електронного листа, який буде цілісно відображатися в будь-якому сучасному поштовому клієнті і додатку нинішніх смартфонів. Він використовує мінімум медіа-запитів та пливучу ширину, котра забезпечує максимальную сумісність.

Медіа-запити: тільки півсправи

Були часи, коли було цілком достатньо визначення типу пристрою для створення адапівного шаблону електронного листа, який однаково добре відображалося б і в iOS, і в Android поштових клієнтів, обидва сімейства смартфонів підтримували CSS властивість @media.

З тих пір кількість поштових додатків для обох платформ з різним рівнем підтримки методів розробки адаптивних шаблонів досить збільшилася.

Найбільш примітним є останнє оновлення додатка Gmail для Android, яке є в два рази більше популярнішою, ніж стандартне поштовий Android-додаток (що досягає 11% від загальних запусків). Воно ніколи не підтримувало media-запити, і до сих пір не підтримує, проте зараз воно встановлює масштаб вашого електронного листа шляхом стиснення розміру зовнішньої таблиці для заповнення всієї доступної області відображення екрану. Цей процес складно проконтролювати і, в тому випадку, якщо всі ваші листи залежать від медіа-запитів для правильного відображення на мобільних пристроях, створюється кілька неприємних результатів.

Чому плаваючий шаблон "темна конячка"

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

Однак, є кілька дизайн-компромісів, які ви повинні застосувати. Улюблена усіма "схлопування" в одну стрічку колоночного макетів не так добре працює з цим методом. Якщо ж ви навчитеся обходитися без них, ви зможете застосовувати функціональний дизайн, який працює максимально добре.

Сьогодні ми цим і займаємося.

Final-Product-Both

Почнемо

Давайте почнемо з створення порожнього шаблону.

Все що ми створюємо, так це наша базова сторінка з власним заголовком (header), типом документа (doctype) та таблицею-контейнером з застосованим кольором фону (і для body-сторінки, і для великої таблиці-обгортки, так як поки стилізація тега body не цілком підтримується). Для отримання більш докладної інформації цього початкового налаштування, перегляньте Створення HTML-шаблону електронного листа в Scratch.

Я розташувала головну таблицю контенту по центру за допомогою класу 'content'.

Зверніть увагу

Примітка: в ході виконання уроку ви помітите те, що я збираюся розмістити CSS в заголовку сторінки. Зазвичай я розміщую стилі в заголовку сторінки, коли збираюся використовувати їх знову, або залишити вбудованими одноразові стилі.

Важливо: Коли ви використовуєте CSS в заголовку вашого документа, ви зобов'язані в кінці розробки використовувати інструменти для їх перетворення у вбудовані. Якщо ви використовуєте сервіси, на зразок MailChimp або Campaign Monitor, вони автоматично запропонують вам перетворити ці стилі у вбудовані, коли ви імпортуєте вашу розмітку. Ви зобов'язані це робити, тому що деякі поштові клієнти, такі як Gmail, проігнорують або виріжуть зміст вашого тега <style> или проігнорують його., або просто проігнорують їх в цілому. Ви також можете використовувати такий додаток, як Premailer для перетворення ваших CSS стилів у вбудовані. Якщо ви будете використовувати Premailer або подібний інструмент, не забудьте вирізати ваші медіа-запити перед обробкою (так як ми хочемо залишити їх недоторканими), потім повторно вставте їх. MailChimp і Campaign Monitor подбає про це автоматично.

Приховування мобільних стилів від Yahoo!

Ви помітите, що тег body має додатковий атрибут. Пошта Yahoo любить інтрепретіровать ваші медіа-запити як проповіді, тому, щоб запобігти цьому, ви повинні використовувати селектори атрибутів. Я знайшла найпростіший спосіб зробити це (як було припущено Email by Acid) - просто додати випадковий атрибут в тег body. Я використовувала очікуване 'yahoo', але ви можете використовувати що-небудь своє.

Потім ви можете навіть призначити особливі стилі вашому тегу, використовуючи селектор атрибутів.

Два трюку для засвоєння плаваючого методу

Як ви можете помітити, нашої таблиці 'content' присвоєні всі 100% ширини, тому вона буде займати все доступне в ширину простір екрану смартфона або планшета. Ми також призначимо максимальну ширину 600px для уникнення відображення шаблону на екрані монітора або пристроїв з великим розширенням.

Ми маємо два досить хитрих момента, які можна використовувати для того, щоб переконатися, що все відображається як заплановано на всіх поштових клієнтах. Ці два фікса завдяки відмінному уроку Тіни Йе доступні на FogCreek Blog.

1. Подолання відсутності підтримки властивості max-width

На жаль, властивість max-width підтримується не всіма поштовими клієнтами. Для того, щоб ваші листи правильно відображалися в Outlook і Lotus Notes 8 / 8.5, нам треба помістити ( "обгорнути") кожну таблицю в певний в код умови, що створює всепоглинаючу таблицю. Це в основному націлене на роботу з IE (його движок рендеринга використовується в Lotus Notes) і Microsoft Outlook.

Розміщуємо нашу таблицю в певний код умови:

2. Виправлення для Apple Mail

Здасться дивним, але Apple Mail (зазвичай дуже прогресивний поштовий клієнт) також не підтримує властивості max-width. Але так як воно підтримує медіа-запити, ми можемо додати один, який вкаже додатком проісвоіть ширині класу 'content' нашої таблиці всю доступну пристрою ширину, тим самим повністю відображаючи всі 600px.

Cтворення заголовка

Створюємо перший рядок таблиці - заголовок. Додаємо нижчезазначених для стилізації рядки, яку ми створили:

І потім в своїх CSS стилях, задаємо підкладку для нашого заголовка.

Створення першого адаптивного рядка

Тепер ми створимо перший адаптивний рядок. Спосіб, за допомогою якого ми робимо це, полягає в використанні двох плаваючих таблиць розташованих одна відносно іншої HTML-властивістю 'align'.

Ліва колонка

Замінимо наше маленьке вітають тим, що наведено нижче.

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

Права колонка

Також ми створимо праву колонку знову застосувавши вирівнюється до лівого краю. Таблиця буде 445px в ширину, що дозволить нам заощадити 25px для правого боку. Це дуже важливо, тому що Outlook автоматично нагромадив ваші таблиці, якщо не буде залишено без принаймні 25px для кожної створеної рядка.

Responsive-AlignedTables

Якщо ви будете залишати в запасі по-крайней мере 25px, ваші таблиці будуть такими, як ви очікуєте.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Залиште хоча б 25пкс вільного місця, що б в перспективі дати можливість Оутлук не накладаються таблиці.

Альтернативне рішення для обману Outlook

Щоб обійти цю примху, ви можете також використовувати умовний код, щоб обдурити Оутлук що ви закрили таблицю і відкрили нову. Після тегу закриття першої таблиці и перед тегом відкриття другої просто добавьте: 


Продовжимо..

До ширшої правої таблиці ми збираємося застосувати той же метод, що і для нашої таблиці-контейнера, який включає в себе створення класу і також умовного коду-обгортки. Для цієї таблиці ми також ставимо 100% ширини доступною на смартфоні, на якому вона буде провалюватися вниз на ліву таблиці.

Як ви можете побачити, я створила клас, названий 'col425', для цієї таблиці і задала ширину 425px для нього. Я помістила таблицю, яка буде містити в собі іншу таблицю в 425px шириною, в код умови. Потім ми додаємо наш клас також і в медіа-запит, який ми створили для Apple Mail.

Зараз усередині нашого осередку додамо стилізований заголовок.

Я додала кілька класів для кожного осередку для стилізації, а також кілька класів, які я пізніше буду використовувати для тексту.

Наш заголовок закінчений і як ви бачите на малюнку внизу, саме так наші колонки будуть наїжджати один на одного на мобільному пристрої. (Щоб подивитися те, що в робите, вам треба прописати медіа-запити min-device-width, так як вони забезпечують фіксовану ширину на моніторах)

01-header

Створення рядка тексту в один стовпчик

Для створення одного рядка тексту, просто напросто додамо новий рядок в нашу таблицю з класом '.content'  . Цьому рядку додамо клас '.innerpadding' з повторного використання значеннями підкладки. Також додамо клас 'borderbottom', щоб створити рамку для кожного рядка.

Наш CSS для цієї секції:

Створення двоколонкової статті

Зараз я додам адаптивну рядок, точно таку ж, як наш заголовок, але трохи з іншими розмірами, тому ми можемо використовувати більшу картинку.

Ми додали кнопку з класом 'buttonwrapper'. Вона містить осередок-розпірку з колірною заливкою фону і також текстове посилання всередині себе. Я вважаю за краще використовувати цей спосіб, тому що він дозволяє використовувати кнопки з плаваючою шириною, що дуже корисно при створенні багаторазово використовуваних шаблонів, де ширина кожної кнопки може бути різною. Якщо ж ширина вашої кнопки фіксована, ви можете віддати перевагу використовувати Bulletproof Button Generator.

Наші стилі для кнопки:

Також встановимо ширину для нового класу 'col380', і додамо наш розмір в стилі, щоб подбати про Apple Mail. І тепер стилі виглядають так:

Email-TwoCol

Створення однієї колонки для зображення

Це дуже простий рядок. Просто встановимо для зображення 100% ширину листа і переконаємося, що його висота встановлена в auto.

Наш CSS:

Створення фінального рядка звичайного тексту

Нарешті ми додамо рядок тексту без рамки внизу.

Створення підвалу

Для створення підвалу, додамо новий рядок з таблицею всередині. Один з рядків буде містити іншу таблицю для наших іконок соціальних мереж.

Додамо необхідні стилі для підвалу в CSS:

Оптимізація кнопок для мобільних пристроїв

Для мобільних пристроїв ідеально, якщо вся кнопка - це посилання, а не просто текст, тому що набагато складніше потрапити нашим пальцем по маленькій текстовому посиланню. Так як неможливо це реалізувати для всіх десктопних користувачів (тег <a> в повному обсязі підтримує властивість padding), це те, що я можу додати в мобільну версію за допомогою медіа-запитів.

Видалимо колір з тегом <td>, до якого він був застосований і потім додати його в тег <a> з великою підкладкою.

Я використовую обидві властивості max-width і max-device-width в цьому медіа-запиті в спробі уникнути баг Oulook.com IE9.

Тепер, коли ви клікните в будь-якій частині кольоровий кнопки це буде посилання.

Подальші удосконалення з використанням медіа-запитів

Якщо ви хотіли, зараз ви можете приступити до вдосконалення вашого макета присвоєнням імен класів елементам, які ви хотіли контролювати, і ви зможете додати нові правила всередині медіа-запиту, який ми створили раніше.

Як приклад ми додамо кнопці посилання Відмовитися, додавши посиланню певний клас.

і додаємо відповідні CSS стилі в медіа-запит:

Email-Footer-MQs

Ви можете також поціліти класи .innerpadding, .header і .footer, щоб зменшити вплив підкладки для клієнтів, які підтримує медіа-запити.


Тестуй та рухайся далі!

Нарешті, як і завжди, переконайтеся, що ви пройшли валідацію (використовуючи W3C Validator - ви можете мати тільки одну помилку з власним атрибутом 'yahoo' тега body) і протестуй чи все в порядку, використовуючи реальні пристрої і на Інтернет-просмотріщіках, на зразок Litmus або Email on Acid.

Отримуй задоволення, створюючи адаптивні електронні листи, які виглядають чудово в будь-якому поштовому клієнті!

Для отримання наступного рівня, отримай наступні уроки:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.