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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От автора: не нужно быть фанатиком производительности, чтобы знать, что изображения могут сильно замедлить загрузку страниц. Мы проделали долгий путь: от ленивой загрузки изображений и до использования улучшенных форматов типа WebP. Однако все методы включают в себя загрузку одного и того же статичного URL изображения, что может подходить для десктопов, но не для мобильных устройств, и наоборот. У нас появился атрибут srcset в img, но его довольно сложно обслуживать на динамических сайтах, где основной контент делают пользователи.

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

От автора: термин адаптивные изображения стал ассоциироваться с адаптивными изображениями в HTML. Другими словами, это атрибуты srcset и sizes тега img и тег picture. Но как это относится к CSS?

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