Архив метки: верстка

Верстка email рассылок от А до Я для чайников

Уже долгое время занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению. 1. Основные положения Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах. Такие конструкции не будут работать в head и body: <link rel=»stylesheet» type=»text/css» href=»/base.css»> <style type=»text/css»></style> Если вы верстаете для… Читать далее »

Адаптивная верстка. Шпаргалки верстальщика

Адаптивная верстка

Все больше набирает обороты адаптивная верстка (responsive), вот недавно и я делал очередной проект с адаптацией под разные экраны. Для своих читателей, которые уже начинают переходить к этому замечательному и сложному способу верстки решил поделиться некоторыми секретами и фишками которые я нашел при верстке сайта, думаю, будет полезно. Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android … ). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте. Адаптивная верстка – с чего начать Поговорим по порядку с чего начать делать… Читать далее »