Метка «html» - 10

image Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и эта цифра постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования

С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

  • письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
  • они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
  • нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
  • редактирование компонентов, которые применяются еще в 50 шаблонах писем;
  • необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

Читать полностью »

Ссылка на стандарт: www.w3.org/TR/2013/WD-shadow-dom-20130514/

Итак, что же такое shadow DOM:
Shadow DOM (или теневая модель документа) — часть документа, реализующая инкапсуляцию в DOM дереве. Она (теневая модель) является частью документа и встраивается непосредственно внутрь страницы.
Для упрощения отладки shadow DOM, в хроме можно включить отображение в веб-инспекторе (Settings — General — Show shadow DOM).

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

Некоторое время назад я публиковал статью «Эффект слайдов на сайте. Через грабли на собственном велосипеде»
Статья справедливо набрала множество замечаний, в основном касающихся отсутствия практической части и кодов.
Вашему вниманию переработанная статься снабженная живыми примерами.
Читать полностью »

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

Дайджест интересных новостей и материалов из мира айти за последнюю неделю №57 (11 — 18 мая 2013)
Читать полностью »

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

Дайджест интересных новостей и материалов из мира айти и веб разработки за последнюю неделю №56 (4 — 10 мая 2013)
Читать полностью »

Доброго времени суток, читатели.

На днях решил проверить свои знания в JavaScript и написать аудиоплеер. Как по мне, результат получился хорошим, и я решил поделиться им с вами. Скажу сразу что это было сложновато с моими начальными знаниями js и jQuery. Перейдём сразу к делу.

Для начала создадим страницу, где будет сам плеер.

1. Добавим в массив названия всех файлов, которые лежат в папке music

<?php 
$files = glob('music/*');
?>

2. Подключим к нашей странице jQuery и jQuery UI (для слайдера), а так же я подключил bootstrap иконки, чтобы не мучиться и не искать подходящие иконки по всему интернету.
Читать полностью »

image

Буду предельно краток: ниже я хочу предложить решение проблемы, описанной мною в комментарии, так и оставленным без ответа в отличном посте юзера grokru по мотивам этой статьи.
Если лень кликать по ссылкам, вкратце опишу суть: при стилизации посредством обращения к label'у, стоящему после чекбокса и наличием нескольких строк текста в нём, мы видим ситуацию, показанную на изображении выше.

Читать полностью »

Введение.

Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.

Читать полностью »

Суть проблемы:

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

Истоки

При попытке отправить письмо в формате HTML средствами .Net, без специальных действий, письмо отображается некорректно в почтовых системах и почтовых программах(не во всех), что неприятно. Собственно неприятность в том что картинки видны в виде вложений и иногда искажают вид письма.
Читать полностью »

Приветствую всех!

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

Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования

В статье будут описаны и решены следующие задачи и цели:

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

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js