Секреты адаптивной верстки: как создать идеальный сайт
В конце 90-х Интернет-серфинг был возможен только с ПК, а о наличии других устройств, с которых можно выходить в сеть, только мечтали. Современный адаптивный сайт, который корректно отображался бы на экранах с разной диагональю, попросту не был нужен.
Все изменилось с развитием технологий: сегодня пользователи просматривают страницы порталов и с компьютеров, и со смартфонов, и с планшетов, а некорректное отображение информации чревато потерей трафика, а для бизнес-проектов — клиентов и денег. Давайте разберемся, что такое адаптивная верстка и как создать сайт, который одинаково хорошо выглядит со всех устройств.
От мобильной версии к адаптивному сайту
Итак, необходимость в новом типе верстке возникла с появлением смартфонов. При попытке открыть портал, сверстанный табличным способом, с телефона, посетитель страницы видел только часть контента, а взаимодействовать с кнопками или формами было неудобно. При этом загрузка веб-ресурса занимала массу времени и «съедала» трафик со скоростью света. Фронтенд-разработчики и дизайнеры нашли выход из этой ситуации: стали создавать мобильные версии сайтов, адаптированные для экранов с небольшим разрешением. Настоящий прорыв в этом направлении совершила популярная социальная сеть VK, мобильная версия которой успешно функционирует до сих пор.
Однако создание и обслуживание отдельного сайта, как и покупка еще одного домена, не были по карману многим владельцам интернет-ресурсов. При этом количество пользователей Интернета, предпочитающих пользоваться мобильными устройствами, неуклонно росло. А с ними — и потребность в адаптивной верстке сайтов.
Первым шагом к решению этой проблемы стала так называемая резиновая верстка. При создании такого проекта дизайнер указывал размер элементов не в пикселях, а в процентах: страница уменьшалась и увеличивалась вместе с регулировкой размера окна браузера. Хотя макет и был единственным, проблему адаптивности это не решало. Сложные веб-ресурсы, информация на которых размещалась в несколько колонок, по-прежнему плохо отображались со смартфонов. Текст был слишком мелким, и прочитать его было фактически не возможно.
Решением стала адаптивная верстка. Она подразумевает, что для каждого проекта создается несколько собственных макетов — десктопная, для просмотра с ПК, и мобильная, для взаимодействия с порталом со смартфонов и планшетов. При этом, все они доступны по одному URL: браузер сам «покажет» нужный макет, определив, с какого устройства зашел пользователь.
Преимущества адаптивной верстки
- Увеличение трафика и сохранение аудитории. Если в 2019 году количество пользователей, заходивших на сайты со смартфонов, составляло примерно 50% от общего числа, то в 2024 их уже 70%. Адаптивная верстка вашего ресурса гарантирует, что посетители получат нужную информацию, а вы — не потеряете клиентов.
- Отличные SEO-показатели. Адаптивные сайты находятся гораздо выше в поисковой выдаче. Они хорошо ранжируются за счет улучшения показателей пользовательского поведения.
- Простота реализации. Адаптивная верстка позволяет сэкономить на создании и поддержке мобильной версии. Такой вариант обойдется дешевле, а реализовать его проще.
- Привлекательный дизайн. Адаптивная верстка — это не только сохранение первоначального облика веб-ресурса, но и аккуратный внешний вид. Сайт одинаково выглядит со всех устройств, а функционал всех элементов сохраняется.
Основные принципы адаптивной верстки
Как и любой другой тип верстки, адаптация под разные устройства имеет свои принципы и правила. Вот самые главные.
Основные разрешения экранов
За основу принимаются 3 размера: 375 px — для смартфонов, 960 px — для планшетов, 1600 px — для ПК и ноутбуков. Показатели могут меняться в зависимости от проекта, но средние данные именно такие.
Сохранение функционала портала
При адаптации нужно сохранить не только дизайн, но и функционал сайта. Если что-то не будет работать, посетитель вряд ли перейдет на десктопную версию. Скорее, он покинет ваш ресурс и продолжит поиск информации.
Размер кликабельных элементов — не менее 44 px в ширину и длину
Пользователь взаимодействует со страницами сайта, перемещаясь по экрану устройства при помощи пальца. Если величина отдельных элементов меньше этих значений, то нажать на них среднестатистическому человеку будет сложно.
Сохранение расположения элементов
Расположение всех блоков на сайте подчинено определенной логике: задача дизайнера — подвести посетителя к определенному действию. Так, если цель портала — продать товар или услугу, то юзер должен выполнить определенное целевое действие, например, оставить свои контакты или оформить заказ. Если в версии для ПК путь пользователя начинается от презентации товара и заканчивается оформлением заказа, менять блоки местами нельзя и при адаптации. Так посетитель сайта просто не выполнит целевого действия, а сайт — лишится четкой структуры.
Сохранение айдентики
Зайдя на страницу с любого устройства, будь то ПК, смартфон или планшет, посетитель должен узнать ваш сайт по фирменному стилю, шрифтам, оттенкам. Иначе он подумает, что запрос привел его в совершенно другое место. Портал определенно должен оставаться узнаваемым и удобным для посетителей.
Количество колонок в версии для смартфона — от 1 до 4
Версия интернет-ресурсов для ПК предусматривает верстку в 12 колонок. Для смартфонов достаточно одной, максимум — четырех. Необходимо помнить о компактном размещении информации. Так, карточки товаров логичней спрятать в горизонтальный скролл, чем заставлять посетителя бесконечно скроллить экран вниз. Помните, что с телефона контент обычно просматривают сверху вниз, а если речь идет о ПК — то слева направо.
Как сделать адаптивный сайт? Пошаговое руководство
- Шаг 1. Создание структуры сайта. Разработайте схему вашего портала, включая расположение отдельных элементов на страницах, структуру разделов и подразделов.
- Шаг 2. Создание HTML-файла. Используя теги, пропишите «скелет» страницы. Обратите внимание на адаптивность и кроссбраузерность кода.
- Шаг 3. Добавление стилей компонентов. Для этого используйте тег <style>, который вписывается в самом начале созданного файла. С помощью команд display: flex и flex-wrap: wrap добавьте гибкий контейнер и укажите значение отступа 0. Пропишите значения ширины и высоты.
- Шаг 4. Формирование ширины минимальных блоков для разных разрешений. Они указываются через медиазапрос @media. Ширина, ориентация, высота — все это атрибуты данного запроса, которые должны указываться через условия not, or, and. Сначала соответствующие параметры прописываются для десктопной версии, а затем — для мобильной.
- Шаг 5. Указание размера элементов. Пропишите команды max-width и max-height. Последний указывается в пикселях, а первый — в процентном соотношении. Аналогичным образом укажите минимальные параметры min-height и min-width. Задав такие значения, вы можете не беспокоится, что какой-то элемент окажется слишком крупным или мелким.
- Шаг 6. Адаптивная верстка изображений. Она осуществляется через команду @media. Указывается только один параметр: max-width. Здесь необходимо выставить показатель в 100%.
- Шаг 7. Тестирование и отладка. Обязательно проверьте, как проект отображается с разных устройств. Речь не только о смартфонах с различной диагональю экранов и ОС. Используйте несколько браузеров, чтобы своевременно найти и устранить недочеты.
Всё, что вы должны знать об адаптивной верстке
Работая над очередным проектом, начинающие дизайнеры и разработчики забывают о незначительных, но очень важных нюансах.
Поддержка не только разных устройств, но и браузеров
Многие считают, что кроссбраузерность — не слишком важный фактор. Однако проверить, насколько ваш портал сохранил юзабилити в разных браузерах, будет не лишним.
Адаптация под конкретные виды устройств
Анализируйте поведение своей целевой аудитории. Посмотрите, какие устройства для посещения вашего сайта пользователи используют чаще всего, и адаптируйте его именно под них. Так вы не только сохраните трафик, но и сэкономите свои силы и время.
Работа над деталями
Адаптивность — единственный путь для сохранения работоспособности сложных элементов на вашем портале. Если основа страницы — крупные фоновые изображения или слайдеры, не ленитесь полностью переработать дизайн, сохранив общую концепцию внешнего вида и юзабилити.
Тестируйте любые изменения
Перед запуском обязательно проверьте работоспособность кнопок, форм и других сложных элементов с разных устройств. Не лишним будет провести и маркетинговые коридорные тестирования, когда контрольная группа пользователей, состоящая из представителей вашей целевой аудитории, оценивает простоту пользования сайтом и возможность выполнить целевое действие. То что нравится и кажется очень удобным вам, может совершенно не подходить для решения коммерческих задач. В конечном итоге вы работаете для клиентов и посетителей: помните об этом.
О том, как сделать адаптивную верстку в конструкторе Таптоп, подробно рассказано в Базе знаний проекта. Справиться с этой задачей можно через меню CSM, без вмешательства в код страницы. Настроить адаптацию под устройства с разным разрешением экрана позволяет опция Breakpoints, которая находится в верхнем меню конструктора.
Помимо 4 основных брейкпоинтов (размер сайта для ПК, планшета, телефона в горизонтальном и портретном режиме отображения), можно установить и дополнительные. В зависимости от выбранных режимов отображения, Таптоп обладает возможностью изменять стилизацию страницы. Продвинутые фронтенд-разработчики всегда могут внести изменения в код своего проекта, ведь у конструктора он открытый.
