If gte mso 9 что это

У нас разные интеренты? L>Может кто знает где можно подробно прочитать про все это?

Стили для MS Office.

DZ>Стили для MS Office.

Для чего их пихают на WEB-сайты?

Здравствуйте, leksaa, Вы писали: L>Для чего их пихают на WEB-сайты?

Да просто страничку в офисе сделали имхо. А вот про "if gte . ": Re: <!--[if . ]>

Здравствуйте, leksaa, Вы писали:

DZ>>Стили для MS Office. L>Для чего их пихают на WEB-сайты?

На веб-сайты их пихать совсем не надо. Эти стили нужны если ты например на серваке генеришь xls и отдаешь его клиенту, и чтобы те же самые даты нормально отобразились в экселе — тут уж никуда не денешься.

Здравствуйте, leksaa, Вы писали: N>>это MS Office имхо.
N>>сохрани текст из Word'a, в формате HTML, он тебе еще и не такое навставляет L>Да это я уже понел что hmtl был сгенерирован посредством MS Office.
L>Но для чего такие файлы в инет выкладывать, они же много весят да и стили то эти не использую при просмотре этого файла в браузере!

Зато ты можешь с минимальными потерями воссоздать офисный документ из этого html.

Но чаще всего — это результат небрежности. HTML, порождаемый офисом, содержит уйму грязи — начиная от большого количества не нужных браузеру символов (табуляция и комментарии с метаданными) и кончая кривой разметкой (прибитыми шрифтами, размерами абзацев, кучей стилей на каждое отдельное форматирование — и скажи спасибо, если они оформлены как классы, а не инлайнятся во все DIV и SPAN).
Далеко не все авторы веб-страничек озабочены тем, чтобы вычистить весь этот хлам (по незнанию или по лени — не суть).

Здравствуйте, Кодт, Вы писали: К>Далеко не все авторы веб-страничек озабочены тем, чтобы вычистить весь этот хлам (по незнанию или по лени — не суть).

ИМХО есть еще один вариант/категория таких страничек — вставленная копипастом через какую-нибудь чудо-CMS. То есть людям сказали, что теперь занести инфу на сайт может даже секретарща — и они поняли это буквально: посадили секретаршу, она верстает доки в ворде, сохраняет в хтмл, а потом копипастит из в CMS. Без верстки, без чистки мусора — как есть. Учитывая, что сидит она под IE на выделенке — ей все клево и все летает.

Здравствуйте, DrZubr, Вы писали: DZ>Здравствуйте, leksaa, Вы писали:

DZ>>>Стили для MS Office. L>>Для чего их пихают на WEB-сайты? DZ>На веб-сайты их пихать совсем не надо. Эти стили нужны если ты например на серваке генеришь xls и отдаешь его клиенту, и чтобы те же самые даты нормально отобразились в экселе — тут уж никуда не денешься.

а я вот генерю html, после чего указываю тип документа — Excel и всё хорошо и отлично,
но нигде нет описания mso-стилей. может кто видел/слышал?
а-то как-то извращенно сохранять document.xls в document.htm и искать кто за что отвечает.

Верстка HTML писем. Часть 2

При создании профессиональных рассылок следует учитывать особенности своей аудитории. Как показывает статистика, чем она моложе, тем больше процент открытий писем с мобильных устройств. В среднем, около 30% всех подписчиков используют мобильные устройства для просмотра своей корреспонденции. Это весьма значимая доля, а значит нужно учитывать сей факт при создании своих рассылок.
Сегодня речь пойдет о верстке адаптивных писем.

Для начала следует сказать как себя ведут обычные письма на экранах мобильников: на устройствах под управлением iOS все письмо масштабируется, чтобы уместить письмо в ширину устройства (поэтому письма становятся нечитабельным и требуют ручного масштабирования).
Устройства же на Android отображают письмо в масштабе 100%, в связи с чем, мы видим лишь малюсенький фрагмент письма и не можем в полной мере оценить ни дизайна, ни контента.

При создании адаптивной верстке мы должны поставить следующие цели:

1. добиться корректного отображения письма в почтовых клиентах (MS Outlook 2003/2007/2010/2013, Mozilla thunderbird)
2. добиться корректного отображения в веб-интерфейсах основных почтовых провайдеров (mail.ru, yandex, gmail, rambler)
3. добиться корректного отображения на мобильных устройствах под управлением ОС Android и iOS.

К основным приемам верстки писем (см. предыдущую статью) добавляются новые, чтобы добиться поставленных целей.

Размеры

Теперь мы не может однозначно сказать, какая будет ширина у нашего письма, поэтому все параметры width следует указывать в процентах.
Бывают случаи, когда нам необходимо разместить, например, таблицу товаров, где ширина каждого блока фиксирована. Тогда на маленьких экранах они должны перестраиваться друг под друга (примерно как при адаптации обычных веб-страниц).

Это реализуется следующим образом:

 
  
Item1 -->
 

 
 


 
 
Товар 1 
 
 
  
Item1 END -->
 

 
 


 
 
Товар 2 
 
 
  
Item2 END -->

Рассмотрим каждый фрагмент кода подробнее.

Сначала мы создаем таблицу шириной 100%, в которой и размещаем блоки. Это сделано для того, чтобы все прочие объекты не пытались обтекать наши блоки с товарами.

Следует обратить внимание еще на пару моментов: параметр display у нашего блока следует указывать как inline-block, также следует указывать параметр float. Сами блоки следует писать без пробелов и переносов строк (они могут быть внутри комментариев, для бОльшего удобства восприятия). Это решит проблему в веб интерфейсе Outlook.com (hotmail.com), где блоки отображаются как "инлайновые".
Если в outlook 2010/2013 возникает проблема с лишними отступами, ее можно решить, заключив контент блока в

Но это может вызвать проблемы в outlook 2007.

Между блоков следует код в - этот код предназначен исключительно для Outlook 2007/2010/2013. Он не поддерживает блочные теги, поэтому специально для него мы формируем вспомогательные ячейки таблицы.

При объявлении блоков можно комбинировать значения ширины указанной в процентах и ограничением минимальной ширины (чтобы блоки перескакивали, достигнув какой-то минимальной ширины)

Родительская таблица

В любом случае, максимальную ширину письма следует ограничивать.
Для большинства веб интерфейсов достаточно указать параметр max-width, который и решит данную задачу. Но Outlook данный параметр игнорирует. Поэтому для версий Outlook 2003-2013, а также Lotus следует все обернуть в таблицу созданную специально для него, а также чтобы исключить проблем в устаревшей версии Safari, необходимо добавить div с ограничением максимальной ширины:

А также следует у родительской таблицы задать класс, ширину которого описать в области head. При этом следует прописать параметр для мобильных устройств:

 @media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width:100% !important; max-width:700px; >> .table600

Как вы видите, это несколько противоречит тому, что было написано в предыдущей статье об использовании style. Дело в том, что почти все веб-интерфейсы игнорируют данный параметр (вернее - вырезают), а вот мобильные почтовые клиенты по-умолчанию интерпретируют корректно (приложение Почта на Android до версии 5.0 и приложение Mail на iOS).
Это нам дает некоторую свободу в использовании дополнительных плюшек для мобильных устройств.

Изображения в тексте

Часто необходимо вставить изображение с обтеканием. Для корректного отображения в outlook следует использовать следующую конструкцию:

Медиа запросы(@media)

Наиболее популярные мобильные почтовые клиенты (стандартное приложение Android и iOS) поддерживают медиа-запросы, так что можно использовать стандартные приемы, применяемые при верстке адаптивных сайтов:

 html < -webkit-text-size-adjust:none; -ms-text-size-adjust: none;>@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) < table[class="table600"]< width: auto !important; max-width:600px; >td[class="mob_center"] < text-align: center !important; >div[class="mob_center_bl"] < float:none !important; display: block !important; margin: 0 auto; >> .table600

Обратите внимание на первую строку - стиль -webkit-text-size-adjust:none; позволяет предотвратить увеличение шрифта на iOS-устройствах, это в значительной степени сделает отображение более аккуратным.

Также, вы, наверное, обратили внимание, что в качестве селекторов используются не классы, а атрибуты. Это критично для веб-интервейса yahoo.com

И так, подведем небольшой итог по данной статье:

Верстая адаптивное письмо следует помнить:

1. параметры ширины должны быть указаны в процентах (если блок не является "плавающим")
2. максимальная ширина блока, вместе со всеми внешними рамками и отступами не должна превышать 320px
3. Outlook не воспринимает блочную структуру, для него нужно прописывать спец.теги, где описывать табличную структуру.
4. Outlook.com(hotmail) плавающие блоки интерпретирует как инлайновые. поэтому не следует оставлять лишние пробелы и символы переноса строки
5. приложение Gmail не поддерживает медиа-запросы (также как приложение от mail.ru, yandex.ru и большинство других)

• верстка писем,
• адаптивная верстка,
• копилка идей,

Хабр, давай пофиксим письма?

В очередной раз получив письмо от хабра, я расстроился. А дело вот в чем. На скриншоте слева мы видим нормальное адаптированное письмо. Так оно отображается во всех вменяемых мобильных почтовых клиентах, которые поддерживают media queries. Теперь давайте взглянем на скрин справа. Таким письмо мы видим в мобильных Gmail, Yandex, Mail.ru клиентах как на андроиде, так и на яблочке. Как вы уже возможно догадались, эти клиенты media queries не поддерживают.

В случае с хабром задача проста до боли. Нам нужно отказаться от медиазапросов в пользу банальной резиновой верстки с кусочками магии. Давайте представим, что текущее письмо хабра — это #NEWSLETTER# для упрощения восприятия кода.

Прежде всего рассмотрим обертку письма в ее текущем виде:

 
 
 
 
 
#NEWSLETTER#
 
 
 
 
 

Давайте избавимся от мусора:

 
 
 
#NEWSLETTER#
 
 
 

Уже намного лучше. А теперь давайте сделаем обертку адаптивной:

  
Похожие публикации:

Cin fail c что это
Ens33 ubuntu что это
Момент нагрузки квт м что это
Почему при распечатке документа в ворде смещается текст