876
Маркетинг Читать 8 минут

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

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

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

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

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

Респонсивный и адаптивный дизайн


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

Респонсив


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

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

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

Адаптив


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

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

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

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

Bootstrap


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

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

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

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

Отдельный поддомен


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

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

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

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

Десктопная версия:
сравнение десктопной и мобильной версии сайта: десктоп
Мобильная версия:
сравнение десктопной и мобильной версии сайта: мобильная версия
Персональная демонстрация
Оставьте заявку и мы проведем для вас персональную демонстрацию сервиса, предоставим пробный период и предложим комфортные условия для старта использования инструмента

Выводы


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

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

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.

Оцените статью по 5-бальной шкале

5 из 5 на основе 3 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

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

Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm