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

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

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

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

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

И снова здравствуйте!

На сколько я могу судить, мой дебютный топик о верстке рассылок был полезен большому количеству хабровчан, и в этом я хотел бы не просто привести список правил и рекомендаций, а рассказать «что? зачем? и почему?». Какие либо моменты я могу опустить, но это лишь потому, что они были четко описаны в предыдущем топике.

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

Доброго утра понедельника, %%username%%

Сегодня я хотел бы рассказать о том, какие приемы стоит применять, и от чего лучше отказаться в почтовых рассылках для своих клиентов.

Какова цель рассылки? Своевременно донести до адресата актуальную информацию о своей компании/услугах/новинках. Но большинство составителей подобных рассылок зачастую не продумывают психологический фактор, который играет немалую роль. Интересно? Добро пожаловать под кат.

И снова рад приветствовать хабражителей!

На написание нижеследующего меня сподвиг этот комментарий из моего первого топика. Суть сводится к тому, что коварный парсер mail.ru вырезает инлайновые стили в верстке письма, а так же добавляет ужасные отступы к ячейкам таблицы, что превращает работу верстальщика в сплошную головную боль. Спешу опровергнуть сказанное злыми языками.

Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

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

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

Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:

Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:

• веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
• десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
• мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)

К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

Автор изображения Mike, Creative Mints

Добрый день. Я уже не раз писал о том, что media_queries в почтовых клиентах работают прекрасно. Даже outlook.com в браузере их адекватно воспринимает. Но вот gmail на яблоке и андроиде так не считает.

Если в случае остальных клиентов мы можем сделать, например так:

@media only screen and (max-width:480px) {
.big_img { display:none !important; }	 .small_img { display:block !important; }
}
@media only screen and (max-width:600px) {
.big_img { display:block !important; }	 .small_img { display:none !important; }
}

Susy — тулкит для создания сеток, с помощью которого можно решать множество разнообразных задач по расположению контента. В отличии от фреймворков, таких как Bootstrap или Foundation, Susy не предоставляет предопределенных классов для использования, а только лишь набор функций и миксин, после знакомства с которыми можно сделать много большее.

В этой публикации будут рассмотрены основные возможности Susy на примерах, а так же будет добавлен вывод с использованием flexbox.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Предлагаем вашему вниманию новую функцию сервиса «ХостТрекер – мониторинг времени отклика». Это значение, как и аптайм, также является очень важным. Каждый по личному опыту знает, как раздражает долгая загрузка страниц. Поэтому оптимизации сайтов сейчас уделяется все больше времени. А первый шаг к устранению проблемы – ее детектирование.

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

В этом посте любитель javascript, вооружившись бензопилой, безжалостно распиливает одну из лучших, на его взгляд, универсальных библиотек.



Препарируем вот этот исходник с точки зрения ученика 5-го «Б» Васи Пупкина, прочитавшего книжку по основам javascript, и страстно желающего получше запутаться в полученных знаниях.

Недавний доклад Гарри Бернхардта на CodeMash оказался довольно популярен (прим. пер.: в том числе и на хабре). В докладе он шутит по поводу некоторых особенностей поведения ruby и javascript.
Вряд ли я смогу вас убедить, что есть какой-то смысл в том, на что жалуется Гарри. Тем не менее, надеюсь, я смогу вам объяснить, почему javascript ведёт себя именно так.

Трудно одним заголовком сформулировать, чем же является Galen Framework. Все началось с того, что у меня возникла потребность тестировать сайты в различных браузерах и проверять: не поехала ли разметка, например, в том же Internet Explore или Chrome. Затем возникла мода на Responsive Web-Design, и пришлось вручную менять ширину браузера и проверять, как отображаются сайты. И, хотя все это время были WebDriver и Selenium Grid под рукой, так и не получалось нормально тестировать верстку сайта в Java коде. Одна из идей была: делать скриншоты в разных браузерах в Selenium Grid и затем собирать их все в один большой отчет, по которому один из тестировщиков обязан пробежаться глазами и, в случае обнаружения несоответствий, рапортовать о дефекте. К сожалению, вся эта затея долго не продержалась. Тестировщикам стало лень листать огромный отчет и сравнивать скриншоты, и они все равно пропускали мелкие дефекты. А затем пошли требования внедрения во всех сайтах Responsive Design. И вот тут появился Galen Framework. Решение оказалось простым: проверять размер и расположение элементов относительно друг друга. Для этого понадобился специальный язык Galen Specs, который было бы легко читать и понимать.



Если коротко, Galen Framework — это специальный язык и инструмент для тестирования отображения сайта в браузере. Он позволяет тестировать адаптивный дизайн, а также проводить кросс-браузерное тестирование сайта.

Решил написать о системе, которую я использую, чтобы помнить практически все, что хочется, при минимальных затратах времени и других ресурсов. Под словом “помнить” имеется в виду любой способ найти нужную информацию — в личной памяти или в памяти компьютера, в зависимости от ситуации и от самой информации; основные требования при этом — экономия времени и контроль того, что мы запоминаем.

Я хочу достичь следующих целей при использовании системы:

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

Ниже я напишу о методах и правилах, которые составляют данную систему. Статья будет состоять из нескольких разделов:

• Мой опыт по описанному вопросу
• Проблемы запоминания
• Теоретическое разрешение проблем
• Практическое разрешение проблем с Evernote
• Практическое разрешение проблем с Anki

Адаптивный дизайн стремительно становится индустриальным стандартом, что влечет за собой целую карусель передового опыта, платформ и инструментов. В результате происходит сдвиг в мышлении специалистов и, в частности, в понимании того, как адаптировать рабочий процесс для повышения его эффективности.

Конечно, из-за того, что процесс работы над адаптивным проектом очень индивидуален и итеративен, проанализировать его и дать решения на все случаи жизни довольно трудно. Тем не менее, некоторые общие способы и техники можно применять практически всегда.

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

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

Ответы и свой вариант объяснения почему такое поведение логично, как и в прошлый раз, я буду скрывать под спойлером. Сразу оговорюсь, что не претендую на непоколебимую истину своих версий и буду рад их обсудить. В разгадывании вам может помочь отличный русский перевод спецификации ECMAScript 5, за который большое спасибо iliakan!

1. Главный вопрос жизни, вселенной и всего такого

"3" -+-+-+ "1" + "1" / "3" * "6" + "2"