Как быстро адаптировать сайт под мобильные устройства

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

Потому что адаптивность относится к первостепенным факторам ранжирования — с июля 2019 года в Google работает индексация по принципу mobile-first. И если нет мобильной версии, то сайт вовсе может не отображаться в поиске. Читай также про другие SEO-ошибки, которые мешают сайту попасть в топ-10: 6 самых распространенных ошибок на сайте.

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

Как узнать, оптимизирована ли страница под мобильные устройства – проверь тут.

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

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

Для кого подойдет такое решение:

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

• для создания новых сайтов, заточенных под десктоп и при недостаточном бюджете для адаптива;

• для тех ресурсов, где тексты и фото являются основным контентом.

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

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

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

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

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

Еще один способ адаптировать сайт под мобильную версию — применение шаблонов и CSS-фреймворков. Это одно из самых простых, а потому и самых распространенных решений для сайтов на WordPress и подобных CMS.

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

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

Сейчас нас интересует адаптивная многоколоночная верстка Bootstrap и ее преимущества:

• просто достичь красивых колонок и аккуратности;

• можно скрывать колонки и задавать их размеры в зависимости от размеров экрана;

• легкая настройка отступов, шрифтов и прочих мелочей;

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

Bootstrap является удобным фреймворком, который включает в себя HTML и CSS-шаблоны, кнопки, формы, сетку, блоки навигации и JavaScript-расширения. Его можно применить, если сайт содержит HTML5. В этом случае можно настроить собственную разметку. Что нужно делать: подключить файлы фреймворка и добавить разметку, можно через медиа-запросы задать нужные размеры элементов.

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

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

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

Возникает вопрос о дублировании контента — как это скажется на ранжировании. По версии Google такое копирование не является чем-то противоправным, но есть нюансы. Лучше во избежание аффилиации все же прописать атрибуты rel="canonical" для десктопной версии и rel="alternate" для мобильной, это стандартная схема.

Десктопная версия:

Мобильная версия:

Адаптивный дизайн – оптимальное решение в большинстве случаев. Для готовых сайтов на WordPress и подобных можно использовать CSS-фреймворки для адаптации. Если адаптив невозможен, придется переносить сайт на отдельный поддомен, что целесообразно только в случаях действительно больших платформ, где адаптив трудно реализовать.

Если все вышеперечисленное тебе показалось сложным — прокачай свои скилы на онлайн-курсах и коучингах WAYUP. Есть бесплатные и платные программы, в рамках которых изучаются описанные инструменты, адаптивный дизайн и верстка, а еще как применить эти знания в условиях фриланса и повысить свой доход. Про такой формат обучения с точки зрения экспертов читайте в статье «‎Онлайн-образование: SEO-исследование ниши [+Мнение экспертов]».