От автора: благодаря передовым технологиям CSS, таким как CSS Grid Layout и Flexbox, кодирование макета веб-страницы стало значительно проще. Если добавить к этому, что поддержка браузерами как Grid, так и Flexbox тоже очень хороша, тогда возникает вопрос: зачем изучать и использовать CSS фреймворки? В этой статье я рассмотрю Bootstrap, так как это, возможно, одна из самых популярных CSS библиотек пользовательского интерфейса.

Читать далее →

От автора: многие люди работают с гибкими таблицами. Обычно идея заключается в том, чтобы превратить таблицу в пары ключ-значение, чтобы ячейки становились строками. Тогда у нас было бы всего 2 столбца, которые вписываются в любой экран. Это и есть адаптивная таблица CSS. Однако это означает, что заголовки таблиц теперь должны повторяться для каждой строки.

Читать далее →

От автора: с тех пор как я создал BigText более семи лет назад, я был немного одержим красивым большим текстом. К сожалению, в моем собственном блоге заголовки были, если честно, не совсем выразительными. Я хотел немного подправить их и перейти от фиксированных размеров текста к динамическому — сделать адаптивный текст, который увеличивается с увеличением окна просмотра. Я видел много вариантов этого подхода с использованием обработчиков resize в JavaScript.

Читать далее →

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

Читать далее →

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

Читать далее →

От автора: для тех, кто не слышал про CSS переменные – это новая функция CSS, которая позволяет использовать всю мощь переменных в стилях без настроек.

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →