Ідеї, що лежать в основі чуйних email листів

* Переклад статті Кріса Койєр «Ideas Behind Responsive Emails»
 
Скажімо, ви створили 3-х стовпчик email макет. Через обмеженою і дивної підтримки CSS поштовими клієнтами , електронні листи верстаються за допомогою таблиць. Трехколоночной макет виглядає здорово на великих екранах, але незграбно сплющується на маленьких. Теоретично
@media query
можуть врятувати нас, але так як ми не можемо використовувати float , ми, звичайно, не можемо розраховувати і на них. Хоча є ще спосіб.
 
У цій статті я просто хочу показати деякі ідеї щодо чуйних email. Вони не є надійними, готовими до продакшену ідеями. Я просто вважаю, що було весело подумати про це. Мене надихнуло на це недавно прослухана мова Фабіо Карнейро. Фабіо, працюючи для MailChimp зробив крутий email макет і поділився деякими ідеями, що лежать в основі чуйних email листів в цій бесіді. У нього також є Treehouse курс по електронних листів.
 
Джейсон Родрігес також трохи писав з цієї теми недавно.
 
 
Рядки з align = «left»
Ось одна з ділянок макета:
 
 image
 
Ви можете подумати: кожен з цих блоків створений за допомогою
<td>
. Але ні, якщо б це було так, ви ніколи не змогли б обернути їх в обмеженому світі CSS для електронних листів.
 
Насправді, кожен блок це
<table align="left">
. Align це древній, застарілий атрибут, але він до цих пір підтримується у всіх email клієнтах. Це щось на зразок
float
, але ми не можемо використовувати
float
. Я думаю це більше схоже на таблицю провідну себе як
inline-block
елемент. Ви можете задавати його ширину, він може знаходиться на одному рядку з іншими елементами і його як і раніше можна обернути.
 
Це виглядає як:
 
 
<table class="main-wrapping-table">
  
  <tr>
 
     <td>
  
         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

    </td>

  </tr>

</table>


 
Там буде сила-силенна інших вбудованих css стилів, що роблять вирівнювання і різні інші штуки, але це основа макета.
 
Розширивши цю ідею до кількох рядків з різною кількістю блоків, ми отримаємо:
 
 image
 
Не надто погана основа, що не використовує нічого, що email клієнти не можуть відображати.
 
 
розриватися рядка за допомогою min-width
Деякі email клієнти підтримують min-width. Тому якщо ми задамо мінімальну ширину для блоків, які її потребують. Ми зможемо отримати рядки перериваються в потрібному місці.
Ви можете додасть CSS прямо до таблиці, ось так:
 
 
<table align="left" style="width: 33.33% min-width: 200px;" class="chunk"><table>

 
 image
 
Трохи краще. Тепер кожен блок буде переходити на наступну сходинку тоді, коли це необхідно і ніколи не буде занадто стислим.
 
 
Заповнюємо простір з media query
Деякі email клієнти підтримують
@media query
, так що в цьому випадку ми виберемо ці блоки і переконаємося що вони заповнюють простір краще, коли переносяться на новий рядок.
 
 
/* Выясняем когда происходят разрывы строк и используем @media query */
@media (max-width: 400px) {
  .chunk {
    width: 100% !important;
  }
}

 
Ще трохи краще. Ви можете зробити ще краще, ніж я, переконавшись, що всі розриви рядків відбуваються саме так, як ви плануєте.
 
 
Не надто широко з max-width
Також як занадто стислі блоки це погано, занадто широкі теж можуть бути поганими. Можете також обмежити ширину таблиць в браузерах що підтримують
max-width
.
 
 
<table style="max-width: 600px; margin: 0 auto;" class="main-table"></table>

 
 image
 
 
Демо
Знову ж, це не зовсім готове для проакшена рішення, це просто демонстрація ідей.
 Демо можна подивитися на codepen.
 
Якщо ви хочете готовий до продакшену макет, я б ймовірно порадив Email Blueprints від MailChimp. Схоже, вони використовують жорсткі, фіксовані брейкпоінт. Тому цей макет просто відображається як десктопна або мобільна версії, в залежності від доступного простору на екрані. Адаптивний дизайн, яким він був раніше.

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

0 коментарів

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