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

Как сайты с отзывчивым дизайном загружать чертовски быстро

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

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

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

Руководство по созданию удобных и отзывчивых CSS-колонок

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

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

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

Отзывчивые изображения: примеры использования

От автора: Наконец-то, по-настоящему отзывчивые изображения становятся реальностью в веб-разработке — на чистом HTML, без применения хитроумных хаков. Элемент picture и несколько новых атрибутов для элемента img уже появились в браузере Chromium 37 (а также скоро появятся и в браузере Opera), в браузере Firefox Nightly, и в настоящее время внедряются в движок WebKit (хотя еще предстоит узнать, будет ли компания Apple внедрять их в следующую версию браузера Safari).

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

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

Отзывчивые блоки одинаковой высоты на основе Flexbox

От автора: После публикации поста о том, как я создал отзывчивые блоки одинаковой высоты на сайте Readerrr, я получил несколько полезных отзывов от сообщества веб-разработчиков. Дэниел Стёрм (Daniel Sturm) предложил мне использовать модуль Flexbox из CSS3 вместо JavaScript, а Вирли Питерс (Veerle Pieters) оставил твит «… вы можете сделать это с помощью Flexbox, а JavaScript использовать для подстраховки». Точно! И почему я сам об этом не додумался?! Я читал до этого несколько статей про Flexbox, но сам никогда его не применял, поэтому он совершенно вылетел у меня из головы.

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

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

На пути от отзывчивого веб-дизайна к адаптивному

От автора: Сегодня не найти такого веб-разработчика, который не слышал бы о концепции отзывчивого веб-дизайна (responsive web design или RWD). С тех пор как Итан Маркотт придумал данный термин в мае 2010 года, отзывчивый веб-дизайн был признан одним из лучших направлений, успел сформироваться, а также появилось множество возможностей и способов его реализации.

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

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

Отзывчивая резиновая навигация с меняющимся числом пунктов на CSS

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

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

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

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

Медиа-запросы: Обзор различных возможностей

От автора: Если вам приходилось работать над созданием отзывчивого дизайна, то, наверняка, вы использовали медиа-запросы. Медиа-запросы – это понятный и простой способ для создания отзывчивых сайтов с помощью CSS. Они позволяют вам изменять оформление страницы при определенном размере экрана пользователя.

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

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

Ускорение сайтов с адаптивным дизайном

От автора: Когда в последний раз вы заходили на какой-нибудь сайт и были потрясены его производительностью (т.е. как быстро вы могли на нем делать то, что вам хотелось?)

Заходя на сайт CanIUse.com, после его последнего обновления, создается ощущение, что он работает быстрее, чем летит пуля. Он не только снабжает нас статистическими данными о совместимости различных передовых веб-технологий и других возможностей, но еще и делает это с впечатляющей скоростью и производительностью.

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

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

Функция calc - потрясающие возможности для адаптивного веб-дизайна

От автора: Функция calc является относительно новой, но очень редко используемой возможностью в CSS 3. Она позволяет осуществлять простые арифметические операции прямо в описании таблиц стилей с использованием всевозможных единиц измерения. Ее очень удобно применять для вычисления размера, позиции, трансформаций и даже цветов.

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

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

Адаптивное целое фоновое изображение с помощью CSS

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

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