Адаптация сайта под мобильные устройства: зачем нужна и как сделать
Адаптация сайта под мобильные устройства: зачем нужна и как сделать
23.10.2024
Общение с друзьями, обучение, работа и онлайн-шопинг — эти вопросы всё чаще решаются с помощью смартфона. Если сайт компании плохо отображается на мобильных устройствах, потенциальный клиент может уйти к конкурентам. Так из-за отсутствия адаптированной вёрстки бизнес теряет прибыль. Разбираемся, какой способ адаптации сайта выбрать и как проверить результат.
Ирина Юдина
Автор статьи
Что такое адаптация сайта для мобильных устройств
Со стационарных компьютеров открывается десктопная версия сайта — это часто воспринимается как отправная точка. Раньше достаточно было следить, чтобы страница хорошо выглядела в разных браузерах, но сейчас этого мало. Люди всё больше заходят в интернет с других устройств — смартфонов, планшетов, ноутбуков, умных часов или телевизоров. Все они различаются размерами экранов.
Если не сделать для сайта адаптив, возникнут проблемы. На одних гаджетах десктопная версия будет выглядеть хорошо, а на других картинки сместятся, кнопки скроются за пределами экрана. В итоге потенциальный клиент со смартфоном не сможет найти информацию или оформить заказ и уйдёт к конкурентам. Это намного проще, чем запоминать адрес и потом возвращаться к десктопной версии с ПК. Поэтому, чтобы не терять потенциальных покупателей, нужно адаптировать сайт к мобильным устройствам.
Адаптивный сайт правильно отображается на экране любого гаджета. При этом элементы страницы выстраиваются по порядку, текст удобно читать, картинки хорошо видно, кнопки легко нажимаются.
Если не сделать для сайта адаптив, возникнут проблемы. На одних гаджетах десктопная версия будет выглядеть хорошо, а на других картинки сместятся, кнопки скроются за пределами экрана. В итоге потенциальный клиент со смартфоном не сможет найти информацию или оформить заказ и уйдёт к конкурентам. Это намного проще, чем запоминать адрес и потом возвращаться к десктопной версии с ПК. Поэтому, чтобы не терять потенциальных покупателей, нужно адаптировать сайт к мобильным устройствам.
Адаптивный сайт правильно отображается на экране любого гаджета. При этом элементы страницы выстраиваются по порядку, текст удобно читать, картинки хорошо видно, кнопки легко нажимаются.
Сайт программы для цветочных магазинов Posiflora адаптирован и корректно отображается на устройствах с разным разрешением
Для чего нужно адаптировать сайт
Адаптация сайта под мобильные устройства решает сразу несколько задач бизнеса.
- Повышение продаж. Адаптация для мобильных устройств делает сайт удобным для пользователя. Так выше вероятность, что он оформит заказ, заполнит заявку, совершит другое целевое действие. Любая сложность может стать поводом закрыть страницу.
- Выход в топ в поиске. С 2019 года при поиске в Google выше показываются сайты, которые адаптированы под мобильные устройства. Если страницы отображаются некорректно на смартфонах, позиции в поиске могут снижаться. Так адаптивная вёрстка становится одним из способов обойти конкурентов в выдаче.
- Рост лояльности пользователей. Быстрая загрузка страниц, продуманное расположение кнопок и современный дизайн — признак ответственного отношения к бизнесу, готовности позаботиться о клиенте. Таким образом адаптивная вёрстка укрепляет доверие потенциальных покупателей, а бренд создаёт о себе положительное впечатление.
Получите аудит от Точка Рекламы бесплатно
Зарегистрируйтесь, чтобы получить анализ и советы по развитию вашего сайта, сообщества ВКонтакте, магазина на маркетплейсе или Авито
Как настроить сайт для мобильных устройств
Рассмотрим разные варианты, как адаптировать сайт под мобильные устройства.
- Мобильная версия. Это отдельный сайт, который может целиком или частично повторять версию для компьютера. У него есть свой URL-адрес, который открывается как со смартфона, так и с компьютера.
Слева мобильный сайт ВКонтакте: перед URL-адресом стоит буква «m», а справа — версия для компьютера, открытая на смартфоне
Для мобильной версии контент располагают в один столбик, чтобы его было удобно просматривать на смартфоне. При этом он может отличаться по содержанию от основного сайта: меньше фото и видео или сокращённые статьи. Разработка мобильного сайта стоит дорого и подходит для крупных компаний. Для бизнеса поменьше такое решение может быть слишком затратным.
Основные разрешения экранов для адаптивной вёрстки: 320, 480, 760, 960, 1200 и 1600 пикселей. От сложности сайта и его задач зависит, сколько макетов нужно отрисовать. Если в интерфейсе много элементов, дизайнеру понадобится сделать несколько макетов. Тогда сайт на любом гаджете будет смотреться как задумано.
- «Резиновый» сайт. Для всех устройств используют один макет, но разработчик задаёт ширину блоков в процентах. Так все элементы сайта уменьшаются или увеличиваются в зависимости от ширины экрана. Такой вид адаптации сайта подходит, если нужно разместить немного контента: заголовок, текст и картинки в одну колонку. Когда дизайн сложнее, простого растягивания и сжимания по ширине мало. Предположим, на странице много колонок: при «резиновой» вёрстке они станут очень мелкими и нечитаемыми.
- Адаптивный дизайн. От мобильной версии это решение отличается тем, что не нужно запускать отдельный сайт: адрес и другие характеристики остаются прежними. А от резиновой вёрстки — тем, что создаётся несколько вариантов дизайна, а не единственный, который подстраивается под размер экрана. При входе определяется тип устройства пользователя и выдаётся соответствующий результат. Адаптивная вёрстка позволяет задать более сложные настройки, чем простое изменение ширины элемента — например, превратить горизонтальное меню в выпадающее вертикальное.
- Респонсивная вёрстка. Responsive в данном контексте означает «отзывчивая». Это своеобразное сочетание резиновой и адаптивной вёрстки. Сайт подстраивается под размер экрана за счёт медиазапросов и задания ширины в процентах. Это проще, чем адаптивная вёрстка, но эти сайты дольше загружаются. Также решение не подходит для сайтов со сложным дизайном, кроме того, из-за использования новых конструкций CSS сайт может некорректно отображаться на старых устройствах.
Основные разрешения экранов для адаптивной вёрстки: 320, 480, 760, 960, 1200 и 1600 пикселей. От сложности сайта и его задач зависит, сколько макетов нужно отрисовать. Если в интерфейсе много элементов, дизайнеру понадобится сделать несколько макетов. Тогда сайт на любом гаджете будет смотреться как задумано.
Часто достаточно создать три макета: для компьютера, планшета и смартфона
Как создать адаптивный сайт
Прежде чем приступить к созданию адаптивного дизайна, нужно провести анализ. Важно понять, как пользователи смотрят сайт чаще: с компьютера или с мобильных устройств. Исходя из этого, можно выбрать один из подходов к созданию адаптивного сайта: Mobile First или Desktop First.
Mobile First означает, что мобильная версия сайта создаётся раньше, чем версия для компьютера. В таком случае при разработке нужно учитывать:
Desktop First подходит для создания более сложных и функциональных сайтов, с которыми чаще работают с ПК, например CRM-систем. Сначала разрабатывают версию для компьютера, а затем все элементы уменьшают и переносят на макет с нужным разрешением.
Существует несколько основных принципов адаптивной вёрстки. Рассмотрим их подробнее.
Mobile First означает, что мобильная версия сайта создаётся раньше, чем версия для компьютера. В таком случае при разработке нужно учитывать:
- возможность навигации одной рукой — удобно ли дотягиваться большим пальцем до всех элементов;
- приоритеты в размещении информации — важный контент нужно расположить сверху на самом видном месте.
Desktop First подходит для создания более сложных и функциональных сайтов, с которыми чаще работают с ПК, например CRM-систем. Сначала разрабатывают версию для компьютера, а затем все элементы уменьшают и переносят на макет с нужным разрешением.
Существует несколько основных принципов адаптивной вёрстки. Рассмотрим их подробнее.
- Единый контент, дизайн и функционал. Все макеты или версии сайта оформляют в фирменном стиле с соблюдением цветов и стилей шрифтов. Также, если в версии для компьютера можно заказать товар или использовать фильтры при выборе, эти же функции необходимы в мобильной и планшетной версиях. Кардинальной разницы в контенте быть не должно, но в целом мобильную версию можно оптимизировать, оставив только то, что важно именно для пользователей со смартфонами.
- Иерархия. Последовательность элементов должна совпадать во всех версиях сайта. Заголовки, подзаголовки, текст, картинки и кнопки следуют друг за другом. Если изменить путь пользователя, он может запутаться и покинуть сайт, так и не совершив покупку.
- Компактность. При просмотре сайта со смартфона пользователь прокручивает контент сверху вниз. Это значит, что блоки располагаются вертикально. Так, если на компьютере информация размещается в трёх колонках, на смартфоне останется только одна. Менее важную информацию можно спрятать в горизонтальную прокрутку.
В десктопной версии сайта DNS каталог товаров занимает несколько колонок, а на смартфоне отображается одна
- Крупные кнопки. Размер кликабельных элементов на смартфоне должен быть не меньше 44−48 пикселей, чтобы в них можно было попасть пальцем без усилий.
При адаптации сайта можно ориентироваться на рекомендации Яндекса. Например, специалисты советуют не использовать технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей.
Как проверить сайт на адаптивность к мобильным устройствам
Чтобы оптимизировать сайт для разных устройств, дизайнеры создают несколько макетов, а разработчики используют инструменты адаптивной вёрстки. В результате сайт корректно отображается на компьютерах, ноутбуках, планшетах и смартфонах. Это сложно сделать самостоятельно, поэтому стоит обратиться в веб-студию или к специалистам-фрилансерам.
Перед тем как искать исполнителя и после завершения работы, владельцу бизнеса стоит самостоятельно проверить сайт на адаптивность. Для этого не нужно особых навыков: достаточно простых наблюдений и бесплатных инструментов. Рассмотрим основные способы.
Перед тем как искать исполнителя и после завершения работы, владельцу бизнеса стоит самостоятельно проверить сайт на адаптивность. Для этого не нужно особых навыков: достаточно простых наблюдений и бесплатных инструментов. Рассмотрим основные способы.
- Вручную. Для этого используют панель разработчика в браузере. Чтобы её открыть, нужно нажать F12 или комбинацию клавиш CTRL+Shift+I. Затем выбрать тип устройства или установить любое разрешение экрана. Обратите внимание, как выглядят блоки, меню, куда переместились кнопки.
Так выглядит адаптивный сайт Точка Рекламы в разрешениях для iPad Pro и iPhone 14 Pro Max
- Lighthouse от Google. Бесплатный инструмент для улучшения качества веб-страниц. Достаточно вставить адрес, и сервис проведёт проверку. В результате можно узнать, оптимизирована страница для мобильных устройств или нет.
- Яндекс Вебмастер. Сервис помогает понять, как поиск Яндекса «видит» сайт. Адаптация страницы на мобильных устройствах оценивается по самым важным параметрам, например по отсутствию flash-элементов и java-апплетов и удобству чтения.
Наличие адаптивной вёрстки — важный фактор, от которого зависит и впечатление пользователей, и позиция сайта в поисковиках. Но он далеко не единственный. Таких параметров множество, и аудит Точка Рекламы позволяет проверить ваши страницы по наиболее значимым критериям. Вы получите оценки, и простые рекомендации, что можно исправить. Иногда даже простейшие изменения помогают получать больше от рекламы и привлекать клиентов быстрее и дешевле!
Получите аудит от Точка Рекламы бесплатно
Зарегистрируйтесь, чтобы получить анализ и советы по развитию вашего сайта, сообщества ВКонтакте, магазина на маркетплейсе или Авито
Ещё интересные статьи