Почему почтовый шаблон ZURB приходит на почту без CSS оформления?

Question

[Дмитрий Сидоренко]

Использую ZURB - zurb.com/playground/responsive-email-templates
Взял один из их шаблонов.
Если печатаю письмо перед отправкой, то все отображается хорошо (CSS стили применяются):

А на почту (yandex и gmail) все приходит в таком виде:

Теряются CSS стили.

Все стили находятся в файле html, вот оригинальный файл - https://yadi.sk/d/i8ksSZgEkXsXb

Письмо отправляю так:

$subject = 'test';
$msg = file_get_content('zurb.htm');
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: info@" . $_SERVER['HTTP_HOST'] . " <info@" . $_SERVER['HTTP_HOST'] . ">\r\n";
$headers .= "Bcc: info@" . $_SERVER['HTTP_HOST'] . "\r\n";
mail($orderModel->email, $subject, $msg, $headers);

Заранее спасибо!

Вот одно из решений вопроса: https://github.com/onassar/PHP-Premailer
Но оно убивает адаптивность шаблона!

Answer 1

[Макс]

Сделайте стили inline

Comments

[Дмитрий Сидоренко]

...
или body { font-family: Arial; } table td { padding: 2px; } в одну линию?)

[Макс]

Дмитрий Сидоренко: templates.mailchimp.com/resources/inline-css

[Дмитрий Сидоренко]

Макс: Спасибо за верктор! Вот что нашел https://github.com/onassar/PHP-Premailer

[Дмитрий Сидоренко]

Макс: Эта штука убивает всю адапивность фреймворка, возможно есть иные пути решения проблемы?

[Макс]

Дмитрий Сидоренко: Я не очень понимаю зачем вам эта штука, прогоните один раз шаблон через инструмент mailchimp и используйте
Адаптивность не должна нарушаться в этом случае, за эти обертки на php/ruby поручиться не могу

[Дмитрий Сидоренко]

Макс: я прогнал этим инструментом, адаптивность media only screen and (max-width: 600px) { пропала =) письмо теперь с указанной шириной в 580 пикселей. Интересует почему css стили режет gmail и как заставить его их прочитать =)

[Макс]

Дмитрий Сидоренко: habrahabr.ru/company/pechkin/blog/268527