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

Использование медиа запросов 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 я призывал вас делать шрифты выразительными. Я задал очень большой размер текста, чем привлек ваше внимание и объяснил свою точку зрения. Большой текст нужно рассматривать наравне с баннерами. Баннер – это такая большая картинка, создающая нужную атмосферу и привлекающая внимание к определенной области макета.

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

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

100% правильный способ делать адаптивные брейкпоинты в CSS

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

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

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

Что я узнал о макете CSS Grid

От автора: статья нашего гостя, Оливера Уильямса. Оливер уже давно работает с макетом CSS Grid и кое-чему научился за это время. В этой статье он расскажет нам про концепции, которые он изучил. Мне нравится сама идея изучения макета путем разбития его на небольшие куски. Так проще изучать что-то крупное.

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