Здравствуйте, хабраюзеры!

Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Добрый день, уважаемые хабравчане!
Не так давно мы вплотную столкнулись с задачей верстки e-mail рассылок. Это не самое приятное занятие, но многие компании активно используют корпоративные рассылки, и верстка становится всё более актуальной задачей.

Казалось бы, что сложного — сверстать простую страничку? Но есть «подводные камни», которые могут поставить в тупик даже опытного верстальщика. Именно таким «камням» и посвящен пост (оговоримся сразу — все эксперименты, описанные в посте, проводились под Windows с тем ПО, которое есть у многих под рукой).

Первый камень — Изображения

Практически каждая рассылка содержит картинки. Логотип, шапка, фотографии, иконки соц.сетей…
Есть 2 способа использования картинок:

Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов.

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Приготовтесь, сейчас вы увидите предтечу всех священных войн на ресурсах, где зависают веб-разработчики. Перл Харбор по сравнению с этим покажется тем случаем на семейном чаепитии у бабушки, когда ваша сводная сестра в гневе выбежала из комнаты и поцеловала Мустангом дерево во дворе.

Предстоящая битва будет проходить под председательством Дена Хашамовича, ветерана Майкрософт, который сейчас возглавляет команду, готовящую вам Интернет Эксплорер 8.0. Команда IE8 сейчас в процессе принятия решения, которое лежит идеально точно и ровнехонько на той самой линии, что разделяет два разных пути видения мира.

Это граница между «консерваторами» и «либералами». Это граница между «идеалистами» и «реалистами».

Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Уважаемые хабралюди! Мы бы хотели подвести итоги своей акции
«Береги глаза смолоду», но т.к. не все заказы были обработаны, нам нужна ваша
помощь (см. ниже).

Вы также просили дать статистику по акции — вот она.

Примечание: ниже представлен официальный перевод статьи «On having Layout» на русский язык. Статья не является окончательной. Этот перевод отражает 9 версию от 23.10.2007.

UPD текст статьи полностью убран в связи с его неконтролируемыми изменениями с момента публикации. Перепечатка доступна здесь

Итак, для всех тех, кто хотел mp3-плеер на свой сайт, абсолютно бесплатно для вас мы сделали вот такой:


Да, да, абсолютно бесплатно.

Пользуйтесь на здоровье!

Поговорим о всем известном свойстве float, не менее известном position и их соседе — display.

Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.

Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.

Поскольку yagryagr явно взял тайм-аут, позволю себе влить немного информации по теме нашего блога.

Итак. Около года назад я написал и опубликовал на Creatiff.ru типологию клиентов и исполнителей. Не думаю, что кому-нибудь из вас удалось ознакомиться с этим материалом — проект ни жив, ни мертв. А, между тем, сама тема актуальности не теряет, поэтому я возьму на себя смелость опубликовать еще один релиз с небольшими правками и дополнениями.

Как уже было сказано в предыдущих постах, я — отраслевой веб-продюсер. С одной стороны в мои обязанности входит управление требованиями: я общаюсь с клиентами и вывожу их на определенный конструктив, с которым уже можно работать. С другой стороны в мои обязанности входит управление творческим коллективом: тем самым, который полученные требования реализует. Можно сказать, что я меж двух огней. С одной стороны клиенты давят, с другой дизайнеры напирают, с третьей менеджеры суетятся (это вообще отдельная тема). У каждого своя правда, каждому «надо», и мне тоже «надо»… Скучно не бывает.