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

Понимание медиа-запросов в электронной почте HTML

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

Продолжить чтение

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

Адаптивные элементы DOM: решение проблемы с запросами контейнеров

От автора: запросы контейнеров — это предложение, которое позволит веб-разработчикам создавать DOM элемент на основе размера содержащего элемента, а не размера окна просмотра браузера. Если вы веб-разработчик, то, наверное, раньше слышали о запросах контейнеров. Примерно до тех пор, пока у нас был отзывчивый веб-дизайн, у нас были разработчики, просящие их (изначально запрос элементов, а затем переход к запросам контейнеров). На самом деле, запросы контейнеров могут быть самой популярной функцией CSS, которой до сих пор нет в браузерах.

Продолжить чтение

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

Использование медиа запросов CSS в адаптивном дизайне в 2018

От автора: в июле 2010 я написала статью на Smashing Magazine «создание мобильной версии сайта с помощью CSS3 медиа запросов». Прошло почти 8 лет, а статья все еще привлекает большой трафик. Я подумала, что было бы неплохо вернуться к этой теме теперь, когда у нас есть такие методы макетирования, как Flexbox и Grid Layout. Статья расскажет про то, как сейчас используются медиа запросы CSS в адаптивном дизайне, а также про то, что будет в будущем.

Продолжить чтение

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

Отладка адаптивности интерфейсов в CSS

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

Продолжить чтение

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

Должны ли адаптивные сайты быть такими длинными на мобильных устройствах?

От автора: в адаптивном дизайне часто забывают про высоту. Страницы на мобильных устройствах могут быть очень длинными. Нужно с этим что-то делать? При проектировании адаптивных сайтов мы, как правило, основной упор делаем на хорошее форматирование контента на всех доступных экранах. И это правильно, так как горизонтальная прокрутка совсем не user-friendly, поэтому задается ограничение дизайна на ширину вьюпорта браузера.

Продолжить чтение

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

Адаптивные CSS шаблоны без медиа запросов

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

Продолжить чтение

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

Создаем адаптивную сводную таблицу

От автора: не так давно твит Smashing Magazine привлек внимание к моей статье по созданию элегантной таблицы с помощью OpenType. Спасибо, Smashing Magazine. Один комментатор справедливо заметил, что таблица была неадаптивной: при сужении окна браузера данные отсекались. Я не мог изменить таблицу, как в предыдущих примерах: порядок и направление данных в ней важны и не должны обрезаться. Однако есть другое решение.

Продолжить чтение

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

Решение проблем поддержки адаптивного дизайна в Gmail

От автора: в прошлом году Gmail выпустили самое большое обновление, был добавлен адаптивный дизайн и поддержка медиа запросов. Однако от разработчиков посыпалось множество вопросов, у них не работал адаптивный дизайн в письмах Gmail. Ниже я составил список из семи вещей, которые нужно держать в голове, чтобы адаптивный дизайн заработал в Gmail.

Продолжить чтение

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

Балансировка текста в адаптивном дизайне

От автора: в прошлом году на сайте 24 ways я призывал вас делать шрифты выразительными. Я задал очень большой размер текста, чем привлек ваше внимание и объяснил свою точку зрения. Большой текст нужно рассматривать наравне с баннерами. Баннер – это такая большая картинка, создающая нужную атмосферу и привлекающая внимание к определенной области макета.

Продолжить чтение