В чем смысл отзывчивой верстки

Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница

Проблема: в последнее время на слуху словосочетания «адаптивный сайт» и «отзывчивый сайт» (adaptive и responsive). Кто-то заявляет, что делает сайты с адаптивной версткой и это их конкуретное преимущество. Другие спорят, что верстку правильно называть не адаптивной, а отзывчивой. Третьи говорят, что «отзывчивый» и «адаптивный» — это одно и то же, просто кто-то придумал для них разные названия. В общем, обилие информации в сети по вопросу не уменьшает количество заблуждений. Даже наоборот.

Адаптив и отзывчивый сайт — это очень разные виды сайтов. Поясним с примерами, но сначала вспомним, что было до адаптивных и отзывчивых.

История

Раньше сайты были с фиксированной версткой. Если он был в ширину 800 пикселей — он так и оставался 800 пикселей, на каком мониторе его ни открывай, большом или крохотном. Такой подход полностью устарел вместе с табличной версткой.

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

Адаптивный или отзывчивый: 7 лучших практик мобильного веб-дизайна

В 2019 году 80% пользователей использовали мобильные устройства для поиска в Интернете. То, как ваш сайт отображается для мобильных пользователей, может укрепить или разрушить ваш бренд.

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

В этой статье мы рассмотрим 7 лучших практик мобильного веб-дизайна, а также то, как вы можете использовать их в своем бизнесе.

Адаптивный и отзывчивый веб-дизайн

Одно из важнейших решений при разработке для мобильных устройств — выбрать адаптивный или отзывчивый дизайн. Давайте рассмотрим ключевые различия между ними.

Отзывчивый дизайн

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

Spark Box представляет собой хороший пример адаптивного дизайна.

Пользователи могут просматривать веб-сайт с отзывчивым дизайном с любого устройства. Разница заключается в том, что содержимое страницы будет динамически упорядочиваться в соответствии с размером экрана.

Преимущества отзывчивого дизайна

• Удобный просмотр на всех устройствах.
• Легче в реализации и экономичнее.
• Необходимо поддерживать только одну версию сайта.
• Google рекомендует использовать именно отзывчивый дизайн.

Недостатки отзывчивого дизайна

• Не совместим с устаревшими веб-браузерами.
• Рекламные объявления могут отображаться некорректно.
• Более медленная загрузка на мобильных устройствах.
• Некоторые элементы могут быть сдвинуты вниз по странице.

Адаптивный дизайн

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

Дизайнеру потребуется разработать макеты адаптивного сайта для шести экранов шириной: 320, 480, 760, 960, 1200 и 1600 пикселей.

Amazon использует адаптивный дизайн. Ниже показано как их главная страница выглядит на настольном компьютере.

А вот как сайт выглядит на мобильном устройстве:

Пользователи по-прежнему могут просматривать и делать покупки с любого устройства. Но элементы на веб-странице отображаются иначе.

Преимущества адаптивного дизайна

• Оптимизированный опыт просмотра для отдельных устройств.
• Более быстрая загрузка на всех устройствах.
• Дизайнеры могут оптимизировать демонстрацию рекламы.
• Может быть адаптирован к действующим веб-сайтам.

Недостатки адаптивного дизайна

• Более дорогой и трудоемкий в реализации.
• Требуется команда разработчиков для действительно эффективной поддержки.
• Необходимо внести изменения в дизайн всех используемых макетов.
• Регулярно появляются новые размеры экрана

Итак, какой дизайн выбрать?

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

Какой тип дизайна вы выберете, в конечном итоге зависит только от вас. Но перед принятием решения важно взвесить все «за» и «против».

Важность удобства использования веб-сайта

Удобство использования веб-сайта — это показатель того, насколько хорошо пользователи могут перемещаться по сайту. Если пользователи не могут легко выполнить то, что они намеревались сделать, они без колебаний покинут сайт.

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

• Шаг 1. Оцените каждый элемент на веб-странице и решите, подходит ли он для пути пользователя.
• Шаг 2: Определите, имеют ли какие-либо элементы второстепенную роль и могут ли они быть скрыты под вкладкой или аккордеоном.
• Шаг 3. Решите, на что вы хотите обратить внимание посетителей сайта, и разместите это в центре внимания (например, призыв к действию на целевой странице).

Теперь давайте рассмотрим рекомендации по мобильному веб-дизайну.

Рекомендации по мобильному веб-дизайну

1.Поймите пути перемещения пользователей

У мобильных устройств нет такой же площади экрана, как у настольных компьютеров и планшетов. Это означает, что вам нужно расставить приоритеты для элементов, которые будут отображаться для мобильных пользователей.

Начните с составления схемы пути к покупке. Кто ваша целевая аудитория и чего она пытается достичь? Каковы ее болевые точки, и какова ее конечная цель?

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

2. Откажитесь от навигации

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

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

Подумайте об использовании меню «гамбургера». Они открывают навигационные ссылки, когда пользователи нажимают на них, и формируют гораздо более чистый интерфейс.

Ниже приведен пример гамбургер-меню, расположенного в правом верхнем углу сайта.

Меню-гамбургер можно реализовать как в отзывчивом, так и в адаптивном дизайне. Рекомендуется реорганизовать меню так, чтобы включить в него как можно меньше ссылок.

Итак, что важно сохранить?

3. Ограничьте количество вариантов

Наш мозг может хранить не так много информации. Слишком большое количество вариантов может сбивать с толку и затруднять навигацию по сайту.

При разработке сводите количество вариантов на странице к минимуму. Если ваша основная цель — заставить посетителей скачать бесплатную пробную версию, сделайте это в первую очередь.

Ниже продемонстрирован хороший пример того, как Shopify ограничивает варианты на своей домашней странице.

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

4. Упростите все

Не усложняйте посетителям задачу. Если что-то не служит цели или не является необходимым, выбросьте это.

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

5. Изображения и видео

Добавление изображений на веб-страницу — отличный способ привлечь внимание и повысить вовлеченность. Изображения должны соответствовать вашему предложению и иметь правильный размер, подходящий для адаптивного дизайна.

Ниже приведен пример контекстно-релевантного изображения.

Еще один важный момент — это размеры изображений. Неоптимизированные изображения могут замедлить работу сайта и повлиять на общее впечатление пользователя.

Используйте программное обеспечение, например, Photoshop, для сжатия изображений перед их загрузкой на сайт. Если это возможно, разместите видео в другом месте и добавьте ссылку.

6. Размещение

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

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

7. Ссылка на контактную информацию

Мобильные пользователи хотят работать быстро. У них не хватает терпения пролистывать страницы контента, чтобы найти именно то, что они ищут.

Номера телефонов должны быть со ссылками, чтобы можно было сразу позвонить в вашу компанию. Таким образом, посетителям не придется переключаться с сайта на мобильное приложение и обратно. Ниже приведен пример от BestBuy.

При нажатии на номер с гиперссылкой на сайте BestBuy автоматически открывается клавиатура мобильного устройства.

Точно так же при клике по вашему адресу должна открываться карта, чтобы пользователи могли легко найти местоположение вашего бизнеса. Последние два момента особенно важны, если вы работаете на локальном рынке.

Заключение

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

Пожалуйста, оставьте свои комментарии по текущей теме статьи. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!

Отзывчивый веб-дизайн

Интернет взлетел быстрее, чем кто-либо мог это предсказать и растёт как сумасшедший. За последние несколько лет вдобавок на сцену ворвались мобильники. Рост потребления мобильного Интернета также опережает общий рост использования Интернета.

В наши дни трудно найти человека, который не владеет мобильным устройством или даже несколькими, подключенных к Интернету. В Великобритании больше мобильных телефонов, чем людей и если данный тренд продолжится, то использование мобильного Интернета превзойдёт настольный Интернет в течение года.

С ростом использования мобильного Интернета возникает вопрос о том, как создавать веб-сайты, подходящие для всех пользователей. Индустрия ответила на этот вопрос отзывчивым веб-дизайном.

Обзор отзывчивости

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

Термин отзывчивый веб-дизайн сам по себе придумал и в значительной степени разработал Итан Маркотт. Многое из того, что рассмотрено в этом уроке было впервые сказано Итаном в сети и в его книге Отзывчивый веб-дизайн, которую стоит прочитать.

Рис. 4.01. Food Sense имеет красивый дизайн, отзывчивый при самых разных размерах окна. Независимо от того, насколько экран большой или маленький, сайт Food Sense подстраивается под него, создавая естественный пользовательский опыт.

Отзывчивый, адаптивный и мобильный

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

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

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

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

Гибкие макеты

Отзывчивый веб-дизайн разбивается на три основных компонента, включая гибкие макеты, медиа-запросы и гибкий медиа-контент. Первая часть, гибкие макеты — это практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины. Гибкие сетки строятся с использованием относительных единиц длины, как правило, процентов или единиц em. Эти относительные длины затем применяются, чтобы объявить основные значения свойств сетки, таких как width , margin или padding .

Относительные размеры области просмотра

CSS3 ввёл несколько новых относительных единиц длины, в частности, связанных с размером области просмотра браузера или устройства. Эти новые единицы включают vw, vh, vmin и vmax. Общая поддержка этих новых единиц не велика, но она растёт. Со временем они начнут играть большую роль в построении отзывчивых сайтов.

vw Ширина области просмотра vh Высота области просмотра vmin Меньшее значение из ширины и высоты области просмотра vmax Большее значение из ширины и высоты области просмотра

Гибкие макеты не выступают за использование фиксированных единиц измерения, таких как пиксели или дюймы. Причина в том, что высота и ширина области просмотра непрерывно меняются от устройства к устройству. Макеты сайтов нужно адаптировать к этим изменениям и у фиксированных значений слишком много ограничений. К счастью, Итан вывел простую формулу, которая помогает определить пропорции гибкого макета с помощью относительных значений.

Формула основана на взятии целевой ширины элемента и делении её на ширину родительского элемента. Результатом является относительная ширина целевого элемента.

Гибкая сетка

Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родитель с классом container, который оборачивает элементы <section> и <aside> . Цель состоит в том, чтобы <section> располагался слева, а <aside> справа, с одинаковыми отступами между ними. Как правило, разметка и стили для этого макета будут выглядеть несколько похоже на следующее.

Используя формулу гибкой сетки можно взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы воспользуемся процентами, но единицы em будут работать также хорошо. Заметьте, независимо от того, насколько широким становится родительский container , margin и width для <section> и <aside> масштабируются пропорционально.

Демонстрация гибкой сетки

Взяв идею гибкого макета с формулой и повторно применяя их ко всем частям сетки, мы создадим полностью динамический сайт, масштабирующийся до любого размера области просмотра. Для ещё большего контроля над гибким макетом можно также использовать свойства min-width , max-width , min-height и max-height .

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

Медиа-запросы

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

Инициализация медиа-запросов

Есть несколько разных способов применения медиа-запросов — с помощью правила @media в существующей таблице стилей, импорта новой таблицы стилей через правило @import и путём ссылки на отдельную таблицу стилей внутри HTML-документа. Вообще говоря, рекомендуем использовать правило @media внутри существующей таблицы стилей, чтобы избежать каких-либо дополнительных HTTP-запросов.

Каждый медиа-запрос может включать в себя тип носителя, за которым следует одно или несколько выражений. Основные типы носителей включают в себя all , screen , print , tv и braille . Спецификация HTML5 содержит новые типы носителей, включая даже 3d-glasses . Если тип носителя не может быть указан, медиа-запросом по умолчанию будет screen.

Выражение медиа-запроса, которое следует за типом носителя может включать в себя различные мультимедийные функции и значения, которые затем считаются истиной или ложью. Когда медиа-функция и значение истинны, стили применяются. Если медиа-функция и значение ложны, то стили игнорируются.

Логические операторы в медиа-запросах

Логические операторы в медиа-запросах помогают построить мощные выражения. Существуют три разных логических оператора, доступных для использования в медиа-запросах: and , not и only .

Использование логического оператора and в медиа-запросе позволяет добавить дополнительное условие и убедиться, что браузер или устройство одновременно выполняет а, б, в и т. д. Несколько отдельных медиа-запросов могут быть разделены запятой, действуя как негласный оператор or (или). В приведённом ниже примере выбираются все типы носителей с шириной между 800 и 1024 пикселей.

Логический оператор not отрицает запрос с указанием любого запроса, но только одного. В приведённом ниже примере выражение применяется к любому устройству, у которого нет цветного экрана. Чёрно-белые или монохромные экраны, к примеру, применяться будут.

Логический оператор only представляет собой новый оператор и не распознаётся браузерами, использующих алгоритм HTML4, что позволяет скрыть стили от устройств или браузеров, которые не поддерживают медиа-запросы. Выражение ниже выбирает только экраны в портретной ориентации на устройствах, способными работать с медиа-запросами.

Опускаем тип носителя

При использовании логических операторов not и only тип носителя может быть отброшен. В этом случае тип носителя по умолчанию принимается all .

Медиа-функции в медиа-запросах

Знание синтаксиса медиа-запроса и принципов работы логических операторов является прекрасным введением в медиа-запросы, но настоящая работа начинается с медиа-функций. Медиа-функции определяют, какие атрибуты или свойства будут направлены в выражение медиа-запроса.

height и width

Одна из наиболее распространённых медиа-функций вращается вокруг определения высоты или ширины области просмотра устройства или браузера. Высота и ширина могут быть найдены с помощью медиа-функций height , width , device-height и device-width . Каждая из этих медиа-функций также может быть использована с префиксом min или max, вроде min-width или max-device-width .

Функции height и width базируются на высоте и ширине области визуализации, окна браузера, к примеру. Функции device-height и device-width с другой стороны основаны на высоте и ширине выходного устройства, которое может быть больше, чем фактическая область визуализации. Значением этих медиа-функций может быть любая единица длины, относительная или абсолютная.

В отзывчивом дизайне наиболее часто используемые функции включают min-width и max-width . Они помогают построить отзывчивые веб-сайты на компьютерах и мобильных устройствах одинаково, избегая путаницы с особенностями устройств.

Использование префиксов min и max

Префиксы min и max могут быть использованы со многими медиа-функциями. Префикс min указывает значения больше или равно, тогда как префикс max указывает значения меньше или равно. Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, без специального задействования символов < и >.

orientation

Медиа-функция orientation определяет, находится ли устройство в альбомной ( landscape ) или портретной ( portrait ) ориентации. Режим landscape срабатывает, когда дисплей шире, чем высота, режим portrait срабатывает, когда высота дисплея больше ширины. Эта медиа-функция играют роль в основном с мобильными устройствами.

aspect-ratio

Функции aspect-ratio и device-aspect-ratio определяют соотношение ширины к высоте в пикселях целевой области визуализации или устройства вывода. Префиксы min и max доступны для использования с различными функциями, выявляя соотношения выше или ниже того, о котором говорится.

Значение функции состоит из двух положительных целых чисел, разделённых косой чертой. Первое число задаёт ширину в пикселях, а второе число задаёт высоту в пикселях.

pixel-ratio

Кроме медиа-функции aspect-ratio есть также функция pixel-ratio . Она включает функцию device-pixel-ratio , также с префиксами min и max. В частности, эта функция отлично подходит для определения устройств высокой чёткости, в том числе дисплеев ретина. Медиа-запрос для этого выглядит следующим образом.

resolution

Медиа-функция resolution определяет разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI. Функция resolution также принимает префиксы min и max. Кроме того, функция resolution принимает число точек на пиксель (1.3dppx), точек на сантиметр (118dpcm) и другие размеры на основе значений разрешения.

Другие медиа-функции

Другие функции включают в себя определение доступных выходных цветов с помощью color , color-index и monochrome , выявление растровых устройств через функцию grid , а также определение процесса сканирования телевизора функцией scan . Эти функции менее распространены, но столь же полезны при необходимости.

Поддержка медиа-запросов в браузерах

К сожалению медиа-запросы не работают в Internet Explorer 8 и ниже, а также других устаревших браузерах. Есть, однако, пара подходящих костылей написанных на JavaScript.

Respond.js представляет собой облегчённый костыль, он ищет только min/max-width и должен идеально подходить там, где используются только эти медиа-запросы. CSS3-MediaQueries.js более развит и тяжелее, и предлагает поддержку более широкого множества более сложных медиа-запросов. Кроме того, имейте в виду, что любой костыль может иметь проблемы с производительностью и потенциально замедлить сайты. Убедитесь, что любой подобный костыль заслуживает снижения производительности.

Демонстрация медиа-запросов

Используя медиа-запросы мы сейчас перепишем гибкие макеты, которые построили ранее. Одна из текущих проблем в демонстрации появляется, когда ширина <aside> становится безуспешно маленькой на небольших экранах. Добавив медиа-запрос для области просмотра ниже 420 пикселей в ширину, мы можем изменить макет, отключив float и изменив ширину <section> и <aside> .

Рис. 4.02. Без каких-либо медиа-запросов <section> и <aside> становятся слишком узкими. Возможно, даже чересчур, чтобы содержать любой реальный контент.

Рис. 4.03. С помощью медиа-запросов мы убираем float и меняем ширину <section> и <aside>. Теперь они занимают всю ширину области просмотра, добавляя свободное пространство существующему содержимому.

Определение контрольных точек

Ваш инстинкт может подсказать писать контрольные точки в медиа-запросах основываясь на основных размерах области просмотра, как это определено разными разрешениями устройств, таких как 320px, 480px, 768px, 1024px, 1224px и т. д. Это плохая идея.

При построении отзывчивого сайта следует настроить массив различных размеров области просмотра, независимо от устройства. Контрольные точки должны быть введены только когда сайт начинает рушиться, выглядит странно или этому препятствует опыт.

Кроме того, всё это время выходят новые устройства и разрешения. Попытка идти в ногу с этими изменениями это бесконечный процесс.

Сначала мобильные

Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.

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

Подход «сначала мобильные» также учитывает в дизайне ограничения мобильного пользователя. В недалеком будущем большинство интернет-соединений будет сделано на мобильных устройствах. План состоит в том, что для этого соответственно и развивать важный мобильный опыт.

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

Кроме того, загрузка ненужных ресурсов может быть остановлена с помощью медиа-запросов. Вообще говоря, удаление теней, градиентов, трансформации и анимации в мобильных стилях сама по себе неплохая идея. При их чрезмерном применении они вызывают тяжёлую нагрузку и даже могут сократить время работы батареи.

Демонстрация

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

Сначала мобильные

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

viewport

Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport .

Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.

Высота и ширина области просмотра

Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height , а для свойства width принимается ключевое слово device-width . С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.

Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width .

Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.

Масштабирование области просмотра

Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale , maximum-scale , initial-scale и user-scalable .

initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.

Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.

Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale . Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale . Оба значения также должны быть от 0 до 10.

Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale . Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable . Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.

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

Разрешение области просмотра

Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi . target-densitydpi принимает несколько значений, включая device-dpi , high-dpi , medium-dpi , low-dpi или конкретное число точек на дюйм.

Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.

Комбинация значений

Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content . Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale .

Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.

Правило @viewport

Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.

В настоящее время в некоторых браузерах уже реализовано правило @viewport , однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.

Гибкий медиа-контент

Последний, но не менее важный аспект отзывчивого веб-дизайна включает гибкий медиа-контент. Когда начинает меняться область просмотра, медиа-контент не всегда под это подстраивается. Изображения, видео и другой медиа-контент должен быть масштабируемым, меняя свой размер при изменении размера области просмотра.

Быстрый способ сделать медиа-контент масштабируемым — это использовать свойство max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой медиа-контент будут уменьшаться в соответствии с шириной контейнеров.

Демонстрация гибких изображений

Встраивание гибкого медиа-контента

К сожалению, свойство max-width не очень хорошо работает для всех случаев медиа-контента, в частности, для <iframe> и встраиваемого медиа-контента. Когда дело доходит до внешних сайтов вроде YouTube, которые используют <iframe> для встраиваемого медиа-контента, это огромное разочарование. К счастью, есть решения.

Чтобы встраиваемый медиа-контент был полностью отзывчивым, элемент должен быть позиционирован абсолютно в родительском элементе. У родителя width должен быть 100%, чтобы он мог масштабироваться, основываясь на ширине области просмотра. Родительский элемент также должен иметь height равный 0, чтобы включить механизм hasLayout в Internet Explorer.

Затем добавляем padding снизу родительского элемента, значение которого устанавливается таким же, что и соотношение сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу гибкого макета? Если у видео соотношение сторон 16:9, то 9 разделить на 16 будет .5625, таким образом требуется нижний padding равный 56.25%. padding снизу, а не сверху используется специально для предотвращения Internet Explorer 5.5 от поломки и лечения родительского элемента, как абсолютно позиционированного.

В чем смысл отзывчивой верстки

Любой современный сайт должен быть оптимизирован под мобильные устройства. Дизайнеру нужно сделать так, чтобы интерфейс выглядел единообразно на экранах разных размеров.

Что такое отзывчивый веб-дизайн?

Отзывчивый дизайн — это процесс разработки сайта, который адаптируется под устройство посетителя, будь то компьютер, планшет или смартфон. Разработчики используют CSS-медиа-запросы, чтобы установить контрольные точки (breakpoints) для разных экранов, — так пользователи смогут просматривать сайт на любых девайсах без каких-либо ограничений.

Медиа-запросы позволяют менять лейаут (количество колонок), размеры шрифтов, изображений, а также скрывать или отображать контент. Функционал сайта остается прежним, но содержание и структура подстраиваются под размер экрана.

Почему отзывчивый дизайн — это важно?

Смысл UX-дизайна заключается в создании наиболее приятного и удобного опыта взаимодействия. Это понятие включает и адаптацию интерфейсов к устройствам пользователей. Дизайнер должен спроектировать единообразный опыт для устройств и экранов разных размеров.

Отзывчивый веб-дизайн необходим, если вы хотите, чтобы поисковые системы индексировали и ранжировали ваш сайт. К примеру, Google отдает приоритет отзывчивым сайтам в результатах мобильного поиска.

По данным Google Search Central, "в США 94% обладателей смартфонов ищут нужную информацию со своих телефонов. Интересно, что 77% мобильных поисковых запросов производятся дома или на работе — то есть там, где, скорее всего, есть обычный компьютер".

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

Google предлагает бесплатный тест “Mobile-Friendly Test”, который поможет оценить, насколько ваш сайт оптимизирован для смартфонов.

Отзывчивый дизайн: подход

Есть 2 основных фактора, которые должен учитывать дизайнер при разработке отзывчивого сайта:

• Контрольные точки;
• Визуальный контент.

Контрольные точки

UX-дизайнер должен установить контрольные точки и оптимизировать макеты для нескольких устройств. В большинстве случаев создается 3 версии сайта:

• для смартфона/мобильного телефона;
• для планшета;
• для обычного компьютера.

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

• смартфон/мобильный телефон — портретная ориентация;
• смартфон/мобильный телефон — альбомная ориентация;
• планшет — портретная ориентация;
• планшет — альбомная ориентация;
• обычный компьютер.

Визуальный контент

К визуальному контенту относятся изображения, видео и GIF-файлы. Все эти элементы требуют много ресурсов и могут долго загружаться на мобильных устройствах, поэтому их размер необходимо уменьшить — сжать или оптимизировать файлы другим способом.

10 лучших практик отзывчивого дизайна

1) Гибкость.

В отзывчивом дизайне гибкость имеет решающее значение. Лейаут, изображения, текстовые блоки, компоненты — все должно быть адаптивным.

2) Меняйте изображения.

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

У Mozilla есть отличная статья об отзывчивых изображениях с рекомендациями для дизайнеров и разработчиков.

3) Используйте векторную графику (SVG).

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

4) Позаботьтесь о контрольных точках.

У каждой веб-страницы должно быть как минимум 3 контрольные точки (для мобильных устройств, планшетов и компьютеров). Как упоминалось выше, мы рекомендуем использовать 5 точек для максимальной гибкости. Иногда дизайнерам также нужно учесть, как сайт будет работать на устройствах iOS и Android.

5) Подумайте о карточном интерфейсе.

Карточный интерфейс — это контейнер для контента, который сэкономит вам много времени, поскольку его намного проще адаптировать под экраны различных размеров.

6) Обратитесь к минимализму.

Вот 3 причины, по которым минимализм можно назвать самым эффективным решением для отзывчивого интерфейса:

• Чем меньше контента, тем меньше беспорядка — в этом случае людям проще читать и воспринимать информацию.
• Проще поддерживать единообразие на различных устройствах и экранах разного размера.
• Веб-страницы с меньшим количеством контента, HTML, CSS и Javascript загружаются быстрее, что делает опыт посетителей приятнее и улучшает SEO.

7) Подход mobile-first (“сначала мобильные”).

Mobile first — это подход, при котором вы начинаете проектирование с экрана самого маленького размера и от него двигаетесь к десктопной версии. Дизайнерам, которые начинают с самого большого экрана, часто приходится удалять некоторые элементы или идти на другие компромиссы при уменьшении масштаба.

Узнайте больше об этом подходе из нашей бесплатной электронной книги "Отзывчивый и адаптивный веб-дизайн", где мы анализируем сайты 10 крупных компаний, включая Facebook и Hulu.

8) Расставляйте приоритеты и скрывайте контент.

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

Дизайнеры также могут обратиться к методу прогрессивного раскрытия, чтобы скрыть некритичный контент и сделать интерфейс более аккуратным и минималистичным на экранах любого размера.

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

9) Увеличивайте кликабельную область кнопок.

Закон Фиттса (описан в книге "Лучшие практики дизайна взаимодействия: Книга I") гласит, что кнопки с большой кликабельной областью облегчают взаимодействие пользователя с интерфейсом. Кроме того, дизайнер должен оставить достаточно свободного пространства между ссылками и кнопками, чтобы люди случайно не нажали не туда.

10) Изучайте конкурентов и лидеров отрасли.

Один из лучших способов оставаться в курсе последних тенденций отзывчивого веб-дизайна — исследование конкурентов и лидеров отрасли. Например, если вы разрабатываете сайт электронной коммерции, посмотрите, как это делают крупные мировые бренды Nike, Asos, H&M и другие. Такие компании тратят миллионы на исследования и тестирование лучших практик, так почему бы не использовать соответствующие разработки в своих интересах.

Примеры отзывчивого веб-дизайна

Мы разберем 3 всемирно известных сайта с правильным отзывчивым дизайном.

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

1. The Guardian

The Guardian — известная британская газета, которую многие читают онлайн. Это отличный пример единообразного дизайна, ориентированного на мобильные устройства.

Давайте начнем анализ The Guardian с самого маленького экрана в соответствии с подходом mobile first:

Смартфон

На смартфоне сайт выглядит целостно и привлекательно и может похвастаться четкой визуальной иерархией.

• В верхней части мы видим баннер, который включает все самое необходимое: кнопку входа в систему, поиск и название сайта.
• Прямо под ним расположены наиболее популярные пункты меню (“главная” — иконка дома, "США", "мир" и т.д.) для быстрого доступа. The Guardian скрывает дополнительную навигацию за иконкой гамбургера (в соответствии с принципом постепенного раскрытия информации).
• Главная статья с интригующим изображением занимает большую часть экрана. Так дизайнер показывает, что это самый важный элемент на странице.
• Прокрутив страницу вниз, пользователи могут быстро получить доступ к нескольким второстепенным публикациям, что упрощает поиск и дает им ощущение контроля над ситуацией.

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

Планшет

• В планшетной версии над баннером размещено рекламное объявление, что выгодно The Guardian с точки зрения бизнеса.
• Сам баннер остается прежним, но в нем нашлось место для дополнительных элементов (пункт "вакансии" и выбор страны), иконок с подписями и подзаголовка под логотипом.
• Гамбургер-меню осталось, но в навигации появилось больше видимых категорий, чем в мобильной версии.
• Самое существенное отличие заключается в том, что на планшете отображается больше статей, а количество колонок увеличивается с 1 до 4. Креативное применение карточного интерфейса позволяет дизайнерам расставить статьи в приоритетном порядке — для создания иерархии используются карточки разных размеров.

Десктоп

Десктопная версия демонстрирует, насколько продуманным является сайт The Guardian. Дизайн, как и опыт взаимодействия, остается единообразным на всех устройствах.

Все версии сайта состоят из одних и тех же компонентов — карточек, имеют схожую навигацию и брендинг. Единственное существенное различие — количество статей на экране.

2. Smashing Magazine

Smashing Magazine следует собственному совету и дарит посетителям своего полностью отзывчивого сайта позитивный опыт, в том числе тем, кто взаимодействует с интерфейсом с мобильных устройств.

Смартфон

• Хедер выглядит довольно просто, он включает логотип бренда, иконку поиска и кнопку меню, которая открывает выдвижную панель навигации.
• На экране отображается последняя статья и метаданные.
• Пользователи сразу понимают: чтобы увидеть больше контента, необходимо прокрутить страницу вниз.

Планшет

Контент остается прежним, но кнопка меню исчезает, и теперь мы видим все навигационные ссылки. Под ними появляются категории контента для быстрого доступа к соответствующим материалам. Справа размещается боковая панель с полем поиска, формой подписки на рассылку и рекламой продуктов Smashing Magazine, что делает дизайн более эффективным для достижения бизнес-целей.

Десктоп

Десктопная версия сайта Smashing Magazine практически идентична планшетной, но основная навигация и категории контента здесь смещены влево.

Единственное, что остается неизменным на всех устройствах, — это контент. Поскольку блог Smashing Magazine чрезвычайно популярен, компания хочет, чтобы контент играл главную роль вне зависимости от того, какое устройство использует посетитель.

3. Lookout

В отличие от первых двух примеров, Lookout — это сайт по продаже ПО, задача которого состоит в том, чтобы привлечь новых клиентов. На этот раз мы проанализируем дизайн, начиная с десктопной версии, и закончим мобильной.

Компьютер и планшет

Сайт Lookout выглядит одинаково на планшетах и компьютерах. Навигация, кнопка входа в систему, CTA и иконка поиска остаются видимыми и там, и там, хотя в десктопной версии между элементами остается больше свободного пространства.

Бренд Lookout стремится привлечь больше потенциальных клиентов, поэтому использует яркие зеленые CTA-кнопки для нескольких лид-магнитов.

Смартфон

• Основная навигация скрыта за стандартной иконкой гамбургера, при этом кнопка входа в систему, CTA и иконка поиска — видимы и доступны для пользователей.
• Lookout придерживается той же дизайн-стратегии в мобильной версии сайта: мы видим заметные, яркие CTA-кнопки для лид-магнитов.

Каждый из 3 рассмотренных сайтов — отличный пример единообразного дизайна и четкой визуальной иерархии на всех устройствах: от компьютера до мобильного телефона.

Заключение

Отзывчивый веб-дизайн перестал быть чем-то, о чем дизайнер “может подумать”. Сегодня вы просто обязаны сделать его неотъемлемой частью вашего рабочего процесса.

Основной принцип — уделять особое внимание мобильной версии, а не десктопной: используйте подход mobile-first или метод прогрессивного раскрытия.