Адаптивная вёрстка — виды, плюсы и минусы, особенности, инструменты

Что такое адаптивная версия сайта

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

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

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

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

Что лучше: адаптивный дизайн или мобильное приложение

Существует два варианта адаптивного дизайна — мобильная версия и приложение. Первый вариант не совсем практичен, поскольку подразумевает разработку фактически еще одного сайта, который нужно поддерживать отдельно. С точки зрения прибыли, второй не очень выгоден. Стоимость создания мобильного приложения варьируется от 2 000 до 5 000 долларов и выше.

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

• Для использования приложения необходимо скачать и установить программу, что требует дополнительных усилий, доверия пользователя к сайту;
• Приложение распределяет трафик без сохранения его общего объема (показатели трафика через программу не складываются с трафиком сайта);
• Мобильные версии/приложения должны быть адаптированы под каждый тип операционной системы, что предполагает дополнительные затраты на разработку;
• Новые материалы, добавленные на сайт, должны постоянно дублироваться в приложении, что отнимает дополнительное время и силы.

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

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

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

Адаптивный дизайн изначально для мобильных устройств

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

Что такое адаптивная вёрстка?

Основываясь на @media-запросах, адаптивная верстка подразумевает различные макеты для разных устройств. Если условие @media-запроса выполняется, то применяются соответствующие стили

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

В этой статье рассматриваются основы адаптивной компоновки на основе размеров графического окна.

Почему интернет-магазин должен быть адаптивным

В настоящее время адаптивный дизайн — это не только тенденция, но и необходимость в сфере электронной коммерции.

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

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

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

1. Повышает конкурентоспособность. Согласно исследованиям, меньший процент онлайн-предпринимателей все еще использует верстку ресурсов для разных устройств. Быстрый переход к адаптации улучшает пользовательский опыт и дает вашему проекту преимущество перед нишевыми конкурентами.
2. Расширяет аудиторию. Интернет-магазин, совместимый с планшетами и смартфонами, хорошо привлекает мобильный трафик. Оценив простоту использования такого сайта, многие посетители становятся постоянными клиентами компании.
3. Обеспечивает стабильную прибыль. Веб-ресурсы с адаптивной версией характеризуются высокой посещаемостью сайта, что помогает значительно увеличить коэффициент конверсии.
4. Практичность и простота в обслуживании. Несмотря на различия в отображении, все страницы адаптивного ресурса доступны по одному и тому же URL. Согласованный сайт с похожей структурой и узнаваемым внешним видом не требует изменения движков, не вызывает особых трудностей в технических работах.
5. Повышает позицию в результатах поиска. Фактор выравнивания ресурсов учитывается при определении ранжирования по целевым запросам в поисковых системах. Проверить удобство отображения собственных ресурсов на гаджетах можно с помощью анализатора мобильных сервисов Google или Screenfly.
6. Он универсален. Персонализация означает приятное взаимодействие со всеми посетителями. Для пользователей смартфонов доступны те же элементы дизайна, функции и контент, что и для пользователей настольных компьютеров. Информация передается без потери смысла, а страницы с отзывчивым дизайном отображаются вместо уменьшенной версии.

Чтобы понять, нужно ли адаптировать интернет-магазин, проанализируйте своих конкурентов и изучите данные аналитики. Если доля посетителей со смартфонов и планшетов составляет более 10%, пора приступать к разработке адаптивной версии.

В определенных ситуациях адаптивная терапия противопоказана:

Правила разработки и основные принципы адаптива

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

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

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

1. Планирование и проектирование. Сбор предварительной информации, изучение конкуренции, определение целевой аудитории, постановка задач.
2. Создание прототипа. Обсуждает внешний вид, возможные вариации поведения элементов интерфейса при различных разрешениях экрана. Рамка разработана.
3. Типизация и предварительное тестирование. Проект тестируется, анализируется реакция блоков на изменение формата окна, проверяются варианты, выбираются лучшие решения. Разработана структура html-кода.
4. Эстетический дизайн утвержденного прототипа. Типографические, графические и другие элементы создаются, организуются в соответствии с модульной сеткой и оформляются соответствующим образом.
5. Обширное тестирование. Проверяет правильность отображения деталей, гибкость и удобство интерфейса на настольных и мобильных устройствах. Вносятся все необходимые уточнения и исправления.

В процессе разработки используются различные типы адаптивных макетов. Так называемый «прорезиненный» макет позволяет сжимать/расширять ключевые блоки и изображения в соответствии с размером экрана. Если сжатие невозможно, блоки выравниваются как лента. На страницах с несколькими колонками используется смещение блоков: при уменьшении экрана блоки смещаются вниз (оптимально для интернет-магазинов).

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

Помимо настройки макетов, кодеры используют скрипты или медиазапросы. С их помощью к элементам добавляется свойство CSS, которое применяется при изменении формата экрана. Например, изменяйте размеры и шрифты текста, типы и расположение блоков, скрывайте/добавляйте детали.

Хорошо подготовленный сайт должен соответствовать нескольким ключевым принципам:

• Отсутствие горизонтальной прокрутки;
• Выпадающее меню, оптимизированное для различных устройств;
• Адекватный размер интерактивных элементов, соответствующий среде;
• Достаточное расстояние между компонентами и кликабельными ссылками для оптимального взаимодействия пальцев;
• Плавная реорганизация блоков при изменении разрешения и форматирования экрана;
• Оптимальный интервал и размер строки в тексте (не более 45-80 символов);
• Гибкие или отзывчивые изображения;
• Опциональное отображение контента — сфокусированное на

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

«я чеви чейз, а ты нет»

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

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

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

Это перевод статьи «Отзывчивая стратегия», написанной Брэдом Фростом. Переведено UXDepot с разрешения автора.

Bootstrap

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

Bootstrap — это основа для создания адаптивных веб-сайтов. Разработчикам рекомендуется применять соответствующие классы к элементам и создавать согласованную структуру HTML. После этого на фронтенде появятся блоки с готовым дизайном.

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

Caniuse

Сервис, составляющий таблицы совместимости различных технологий с наиболее популярными браузерами. Вы можете увидеть, какой процент браузеров поддерживает, например, свойство CSS «sticky» или формат шрифта ttf.

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

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

Responsinator

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

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

Startup

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

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

За все хорошее приходится платить. Минимальный тарифный план на год составляет $249. Если вы оплачиваете 12 месяцев одновременно, вы можете сэкономить $99.

Адаптивная модернизация

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

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

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

Адаптивные мобильные сайты

Понятие «адаптивные мобильные сайты» относится к тем, которые дружелюбны к мобильным устройствам

«это практика

Базовая адаптивность с единицей измерения fr (fractional unit)

CSS Grid приносит с собой совершенно новое значение, называемое долей единицы. Доля единицы записывается как

fr

И позволяет разделить контейнер на столько частей, на сколько вы пожелаете.

Изменим размер каждого столбца на 1фр.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px;
}

Сетки делят ширину на три части, а колонки занимают одну часть этой ширины. Вот результат:

Если мы изменим значение

grid-template-columns1fr 2fr 1fr

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

Другими словами, единичное значение en позволяет легко изменять ширину столбцов.

Добавление изображений

Последний шаг — добавление изображений. Это не имеет никакого отношения к CSS Grid, но давайте посмотрим на код.

Мы начнем с добавления тега изображения в каждый элемент сетки.

Чтобы изображение поместилось внутри элемента, мы установим его ширину и высоту равными ширине и высоте самого элемента, а затем применим объектную подгонку: cover ;. Изображение будет покрывать весь контейнер, и браузер обрезает его, если это необходимо.

.container > div > img { width: 100%; height: 100%; object-fit: cover;
}

Вот, что вы получите:

Вот и все. Теперь вы знакомы с одной из самых сложных концепций CSS-сетки.

Дополнительно

Немного больше информации об адаптивной компоновке

Запросы на размер графического окна @media могут быть по ширине или по высоте, но используются реже.

@media (max-height: 719.98px) { .container { padding: 0 15px; }
}
@media (min-height: 720px) { .container { padding: 0 15px; }
}

Запросы @media могут быть объединены, например, требуются только стили для экранов планшетов от 576px до 767,98px.

Стили, назначенные в таком @media-запросе, применяются только при выполнении всех условий

@media (max-width: 767.98) and (min-width: 576px) { .container { background: red; }
}

Можно задать свойства сразу для нескольких различных условий — данный @media запрос выполняется, если выполняется хотя бы одно из перечисленных условий, например, экраны размером меньше 575,98px и больше 1440px.

@media (max-width: 575.98px), (min-width: 1440px) { .container { background: red; }
}

Для упрощения адаптивного макета целесообразно использовать Flexbox, Grid.

Лучше всего использовать относительные значения, а не фиксированные (%, vw, vh, em, rem и т. д.).

Зачем нужна adaptive вёрстка

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

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

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

Если сайт не поддерживает смартфоны, он перестает быть доступным для большинства пользователей. С каждым годом мобильный трафик растет, и за последние 5 лет наметилась четкая тенденция к mobile-first.

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

Хотя 5-10% аудитории все же, скорее всего, выберут широкоформатные мониторы. Во многих ситуациях настольная версия более удобна и помогает сэкономить время на выполнение стандартных задач.

Главное преимущество адаптивных макетов — SEO-продвижение. Те сайты, которые некорректно отображаются на смартфонах и планшетах, вряд ли получат мобильный трафик. Им придется рассчитывать только на пользователей настольных компьютеров.

Кроме того, растет доля мобильных покупок. К 2021 году 60% онлайн-покупок жители России будут совершать с помощью смартфонов. В Китае этот показатель еще выше — 80%. Российский рынок электронной коммерции все еще находится в зачаточном состоянии, но никто не будет спорить, что будущее за мобильной коммерцией.

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

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

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

Преимущества адаптивного распределения продукции

1. Улучшение поведенческих факторов. Пользователи смогут взаимодействовать с контентом через смартфоны и планшеты. Если нет критических проблем, поведенческие факторы, безусловно, будут улучшены.
2. Повышение лояльности аудитории. Эмоции людей напрямую связаны с удобством использования веб-сайта.
3. Бонус в SEO. Тем, кто полагается на бесплатный органический трафик, не обойтись без адаптивного дизайна.
4. Вы можете частично автоматизировать эту задачу. Время адаптации значительно сокращается благодаря использованию фреймворков, сервисов тестирования и других инструментов.

Недостатки:

1. Стоимость проекта увеличивается. Для сайтов с нестандартными функциями настройка может быть очень дорогой.
2. Необходима помощь опытного разработчика. Если проект постоянно дорабатывается, вам придется нанять штатного специалиста или заключить удаленный контракт.
3. Не все проекты подходят для реализации. Некоторые сайты сложно адаптировать под мобильные устройства, поскольку встроенные инструменты слишком «тяжелые», а структура требует значительных изменений.

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

Как узнать размеры области просмотра (viewport)?

Для разработки и тестирования адаптивной верстки по размерам видового экрана необходимо определить такие размеры

Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной верстки, которые отображают размер внутреннего окна и позволяют установить желаемый размер окна, введя значения

Чтобы открыть инструмент адаптивной верстки в Mozilla Firefox, нажмите клавишу F12 и в инструментах разработчика в правом верхнем углу нажмите на значок со смартфоном и планшетом

Окно будет выглядеть следующим образом

В Google Chrome аналогично — нажмите F12 и в инструментах разработчика в левом верхнем углу нажмите на значок со смартфоном и планшетом

Окно будет выглядеть следующим образом

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

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

На мобильных устройствах контент будет занимать всю ширину браузера, но, например, в десктопных браузерах с шириной 1200px, если есть полоса прокрутки, то часть контента будет около 1183px — этот нюанс не самый очевидный, но его следует учитывать

Компонент за компонентом

Я работал с несколькими организациями, которые использовали довольно интересный подход к адаптивному дизайну. Вместо того чтобы сначала переделывать главную страницу, а затем переходить к задней части, некоторые компании адаптируют определенные компоненты (например, верхний или нижний колонтитул), а затем постепенно переходят к другим. Метатеги просмотра переключаются только тогда, когда весь интерфейс становится адаптивным.

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

Возьмем, к примеру, контрольные точки, используемые в Bootstrap

Bootstrap использует @media-запросы, основанные на размерах большинства устройств. Таким образом, вам не придется изобретать собственные контрольные точки, и вы сможете добавлять или изменять существующие @media-запросы по мере необходимости.

@media (max-width: 1199.98px) { }
@media (max-width: 991.98px) { }
@media (max-width: 767.98px) { }
@media (max-width: 575.98px) { }

Кроссбраузерность

Некоторые разработчики ориентируются исключительно на самый популярный браузер Google Chrome, забывая о том, что есть пользователи, которые обычно используют Opera, Firefox или Яндекс.Браузер.

Хотя почти все они основаны на Chromium, в каждом браузере есть неподдерживаемые свойства CSS. Например, сетка не поддерживается в Opera Mobile, которой активно пользуются владельцы смартфонов.

Логика адаптивной вёрстки desktop first

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

Ширина окна браузера должна быть установлена на 1200px — минимальная ширина для первого запроса @media (max-width: 1199.98px) [ ].

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

Установите ширину браузера на 992px — минимальная ширина для следующего @media request@media (max-width: 991,98px) { }

Выполнение первого запроса @media — @media (max-width: 1199,98px) { }

При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера и создают горизонтальную полосу прокрутки (скроллбар). В результате внутри @media request@media (max-width: 1199.98px) мы начинаем назначать предыдущие стили элементов, чтобы макет выглядел хорошо — например, уменьшаем отступы, размеры шрифтов, перемещаем или удаляем некоторые элементы и т. д. — все зависит от требований макета.

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

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

Если макет выглядит правильно при ширине браузера 992px, то установите ширину браузера 768px — минимальная ширина следующая @media query@media (max-width: 767,98px) { }

Переназначьте стили в блоке @media request@media block (max-width: 991.98px) { }, чтобы макет хорошо смотрелся при ширине 768px.

Затем задайте ширину 576px и стилизуйте блок @media (максимальная ширина: 767,98px).

Если клиент/дизайнер не указал иное, установите минимальную ширину 320 пикселей. Пожалуйста, переназначьте стили элементов в @media request@media (max-width: 575.98px) [ ] для этой ширины.

Когда кажется, что макет работает правильно при всех описанных выше размерах браузера (1200 px, 992 px, 768 px, 576 px, 320 px), проверьте макет, плавно изменяя размер окна все больше и больше, чтобы убедиться, что макет не ломается при промежуточных размерах.

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

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

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

Медиаконтент

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

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

Настройка

В этой статье мы продолжим работу с сеткой, которую мы использовали в моей

. Затем мы добавляем изображения. Вот как выглядит наша начальная сетка:

Вот это и есть HTML:

Недостатки

• Затрагивает только малую часть.
  Опять же, есть множество вариантов выполнения модернизации, но цель большинства из них — «сделать симпатично». Фокусируясь на переделке макета, модернизация часто упускает огромное количество других факторов, которые нужно учитывать при создании успешного проекта для различных устройств.
• 10 литров воды в трёхлитровой банке.
  Так как сайты для настольных компьютеров рассчитаны только для них (и, часто, существуют на протяжении длительного времени), они могут содержать много хлама. А так как модернизация, в основном, заключается в переплавке макета, большинство проблем с контентом, не учитываются полностью.
• Производительность.
  Есть что-то странное в написании кода для лучшей поддержки небольших устройств. Удаление лишнего может зайти слишком далеко, но без концентрации на производительности она сама по себе не вырастет.
• Худшая поддержка.
  Медиа-запросы, изначально разработанные для настольных компьютеров, плохо поддерживаются большинством мобильных устройств.
• Временные исправления.
  Мне хочется умереть, когда я слышу от людей просьбу «сделать адаптивным» что-либо, как будто это просто чекбокс в плане проекта (который иногда на самом деле существует). Такой тип ограниченного мышления упускает реальные возможности, которые предлагает адаптивный дизайн.

Область просмотра (viewport)

Область просмотра — это область браузера, где отображается контент.

Чтобы запросы @media правильно работали на мобильных устройствах, необходимо добавить специальный метатег

Метатег отвечает за размер области просмотра и масштаб страницы на мобильных устройствах

Мета тег размещаем в HTML файле в секции

Однородность

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

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

Особенности адаптивной вёрстки

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

Поддержка браузерами

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

И этот процент постоянно растет.

Я думаю, что 2021 год станет годом CSS-сетки. Сетки вырвутся вперед и станут необходимым инструментом для разработчиков фронтенда. Подобно тому, что произошло с CSS Flexbox за последние два года.

Полезные инструменты для разработчиков

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

Полезные ссылки

Использование медиазапросов

Использование метатега viewport для контроля разметки в мобильных браузерах

Правильные шрифты

Для правильного функционирования сайта все шрифты должны быть преобразованы в формат, удобный для работы в Интернете. 98% браузеров поддерживают woff, что делает его лучшим.

Что касается Google Fonts и других внешних библиотек, то их следует избегать, если это возможно. Гораздо быстрее загружать шрифты с собственного сервера, и не будет заблокированных запросов к голове.

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

Преимущества

• Начало с новыми силами.
  СНачала мобильные — начало с чистого листа. Дизайнеры с восторгом берутся за работу для целевой аудитории для достижения бизнес-цели. Разработчики фокусируются на компактной и эффективной разметке. Оставляя в стороне (или полностью изменяя) существующую базу кода, команды могут погрузиться в реальность разнообразных устройств без необходимости беспокоиться о расходах на устаревающие технологии.
• Лучшая поддержка.
  Создавая по принципу «сначала мобильные», разработчики способны обеспечить поддержку большего количества мобильных устройств, особенно более старых, которые не поддерживают медиа-запросы.
• Производительность.
  Несмотря на то, что производительность сайта в первую очередь зависит от его реализации, адаптивные проекты для мобильной среды дают командам возможность с самого начала акцентировать внимание на производительности.
• С учётом всего и сразу.
  Дизайн «сначала мобильные» (несмотря на его название) может учитывать большое количество разрешений, а не только ориентироваться на один класс устройств.
• Дизайн, ориентированный на будущее.
  Интерфейс, в первую очередь разработанный для мобильных устройств, создаёт прочный фундамент, способный перенести проверку временем и служить в качестве платформы для будущего роста и изменений.

Простой пример адаптивной вёрстки

Полный текст примера в Codepen

Основными моментами адаптивности являются

Оригинальный макет для настольного компьютера при ширине 1200px

.container { max-width: 1170px; margin: 0 auto; padding: 0 30px;
}
.cards__col { width: 33.33333333%; padding: 0 15px 30px;
}

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

При ширине 768px карты становятся слишком узкими. Поэтому свойство map width должно быть переназначено для отображения карт в ряд по две штуки.

@media (max-width: 991.98px) { .cards__col { width: 50%; }
}

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

@media (max-width: 767.98px) { .cards__col { width: 100%; }
}

При ширине 320 px карточки не имеют достаточного пространства и выглядят довольно узкими. Поэтому уменьшите внутреннюю подложку .container.

@media (max-width: 575.98px) { .container { padding: 0 15px; }
}

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

Расширенная адаптивность

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

Repeat()Начнем с функции repeat (). Это мощный метод определения столбцов и строк. Теперь давайте изменим исходную сетку с помощью функции repeat ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px);
}

Ордена,

repeat(3, 100px)

Идентичные.

100px 100px 100px

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

auto-fit

Давайте вместо фиксированного количество столбцов, определим их автоматически, заменив 3 на auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px);
}

Это ведет к следующему поведению:

В новой сетке число столбцов зависит от ширины контейнера.

Браузер пытается вместить в контейнер как можно больше колонок шириной 100 пикселей.

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

Minmax()Последний ингредиент, который нам нужен для решения этой задачи, называется minmax(). Мы просто заменим 100px на minmax(100px, 1fr). Вот окончательный вариант CSS.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px);
}

Вы заметите, что вся адаптивность CSS заключена в одной строке.

Это приводит к следующему поведению:

И, как вы можете видеть, это работает идеально. Функция

minmax ()

Задает диапазон размеров, больший или равный

min

и меньше или равен max.

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

Страница за страницей

Этот метод предполагает создание подмножества страниц. Такие компании, как

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

Стратегия поэтапности

Стратегия поэтапного адаптивного дизайна готовит крупномасштабную кампанию пошагово.

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

Типичные ошибки адаптивной верстки

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

1. Мелкий шрифт и мало активных элементов. На маленьком экране текст сжимается, и материал, который легко читается на компьютере, трудно увидеть на смартфоне. Для мобильных версий рекомендуется размер шрифта не менее 12px. Другие интерактивные элементы, призывы к действию и кнопки назначения также не должны быть маленькими.
2. Блоки прокрутки. Для экономии места во многих веб-ресурсах были введены блоки прокрутки. На устройстве с сенсорным экраном и узким экраном прокрутка страниц громоздка. Поэтому полезно предусмотреть возможность разворачивать блоки при нажатии или отображать их во весь рост.
3. Элементы, которые вызывают события при прикосновении. В версиях веб-сайтов для настольных компьютеров часто есть события, срабатывающие при перемещении курсора (изображения, всплывающие подсказки, меню). Вы должны знать об этом: На мобильных устройствах нет курсора, все работает по-другому. Событие, соответствующее щелчку мыши, происходит при касании экрана.
4. Меню без функции касания. Основная задача кастомизации — сделать функциональные элементы компактными, но доступными для пользователя. Громоздкое меню может занимать весь экран. Это затрудняет свободную прокрутку и провоцирует непреднамеренное нажатие на ненужные разделы. Эту проблему можно решить, введя специальный значок, который сворачивает/открывает меню при нажатии.
5. Недостаточное тестирование глубины. Перед запуском магазина стоит провести тщательное тестирование и проверить основные пути посещения в популярных браузерах. Это поможет избежать возможных ошибок в работе будущего магазина.
6. Медленная загрузка веб-страниц. Как и пользователи настольных компьютеров, пользователи мобильных устройств также любят скорость. Этот параметр зависит от объема страниц. Необходимо оценить все элементы, минимизировать их, распределить контент по разным вкладкам и уменьшить вес основной части страницы. Java-скрипты, изображения и файлы CSS также влияют на скорость загрузки страницы. При проектировании оставляйте только необходимую информацию. Для уменьшения размера файлов ресурсов можно использовать специализированные инструменты.
7. Игнорировать первоначальный анализ аудитории. Анализ поведения пользователей — самый важный подготовительный этап. Он помогает определить типы устройств, используемых для входа на сайт, выявить наиболее распространенные действия, выполняемые во время веб-серфинга, и удовлетворить ожидания целевой аудитории.

Универсальность

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

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

Итоги

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

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

Статья будет дополняться по мере возможности.

Заключение

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