Смартфоны сейчас – это наше всё! Карманный доступ ко всей информации мира. А еще это шопинг не вставая с дивана, способ заказа услуг, удаленной работы, общения и связи. И если у тебя на сайте мобильная версия тормозит или ее вообще нет, то это может привести к серьезным потерям для бизнеса.
Конечно, ты следишь за трендами и уже привык к принципу “mobile-first”. Но иногда нужно создать адаптивную версию для уже существующего сайта. Как это сделать быстро и удобно сейчас обсудим.
Актуальность проблемы
Оптимизация сайта для мобильных устройств становится все более важной, поскольку количество заходов на сайты с мобильных устройств превышает количество заходов с ПК.
Наличие удобной мобильной версии является ключевым фактором привлечения пользователей. Ведь никто не захочет тратить время на сайты, которые невозможно удобно просмотреть на смартфоне. Долгая загрузка также может отпугнуть пользователей и отразиться на репутации сайта.
Кроме того, адаптивность сайта важна для ранжирования в поисковой выдаче. Как это работает? С июля 2019 года Google начал использовать индексацию по принципу mobile-first. Если твой сайт не имеет мобильной версии, то он может не появляться в поисковой выдаче вовсе, что приведет к серьезным потерям трафика и потенциальных клиентов. Поэтому не стоит пренебрегать адаптацией сайта под мобильные устройства, если ты хочешь, чтобы твои сайты приносили результаты, а бизнес заказчиков развивался успешно и продуктивно.
Важность мобильной версии заключается не только в привлечении пользователей, но также в улучшении репутации сайта, увеличении конверсии и привлечении большего количества посетителей. А это и есть основные задачи интернет-ресурсов любой компании.
Проверить оптимизацию страницы под мобильные устройства можно бесплатно на специальном Mobile-friendly test от Google.
Респонсив (отзывчивость) и адаптив – в чем разница?
Естественно, стоит сразу делать нормально и проектировать сайт под смартфоны и планшеты изначально. Сегодня в большинстве сфер именно так и делают. Существуют респонсивный (отзывчивый) и адаптивный дизайн.
Респонсивный (отзывчивый) дизайн
Отзывчивый дизайн основан на использовании гибкой сетки, которая позволяет макету адаптироваться к параметрам экрана и менять дизайн соответственно. Все, что нужно сделать – это изменить заданные стили при изменении размера экрана.
Респонсивный дизайн может стать решением в том случае, когда сайт в основном предназначен и разрабатывался для посещений с десктопа, но теперь требует обновления под мобильные устройства. Чаще всего это нужно не столько для пользователя, сколько для оптимизации поисковой выдачи.
Также респонсив может быть использован для создания новых сайтов, заточенных под десктоп, но при ограниченном бюджете на адаптацию. Такой дизайн подходит для сайтов, где основным контентом являются тексты и фото.
Считается, что респонсивный дизайн более доступный и простой в исполнении. Это так. Но вопрос в том, что он не решает проблему адаптации под мобильные устройства на 100%. Загрузка будет дольше по сравнению с адаптивным дизайном. А ее скорость действительно важна.
Адаптив
Адаптивный дизайн – это когда сайт создается так, чтобы он максимально удобно отображался на любом устройстве. Это значит, что сайт "адаптируется" к разным размерам экранов, чтобы пользователи могли удобно просматривать контент на своих мобильных телефонах, планшетах или на компьютере.
В чем отличие от респонсивного дизайна? Респонсив - подстройка сайта под размер экрана. Адаптив - создание сразу нескольких вариантов дизайна под разные размеры экранов (десктоп, смартфон, планшет).
Адаптивный дизайн подходит для любых ресурсов – от простых лендингов до приложений, платформ и е-коммерса. Особенно стоит обратить внимание на ресурсы раздела электронной коммерции – сайты с адаптивным дизайном загружаются в разы быстрее, чем сайты с респонсивом. Это для магазинов и сервисов жизненно важно. Вопрос касается как более высокой строки в выдаче, так и удобства посетителя.
Про основы создания современных сайтов ты можешь узнать на бесплатном онлайн-курсе «Веб-дизайнер: взрывной старт».
Стоит отметить, что верстка сайта – это важный момент, от которого многое зависит. Если грамотно настроить адаптивный дизайн, то сайт сам подстроится под нужное устройство пользователя, учитывая скорость соединения и геолокацию посетителя. Это позволяет грамотно настроить рекламу и сделать сайт еще более удобным для пользователей.
Bootstrap
Вернемся к изначальной теме статьи. Допустим, у тебя есть готовый сайт, который нужно адаптировать. Переделывать все вручную довольно сложно. Для этого можно использовать шаблоны и CSS-фреймворки, например, Bootstrap, Responsivegridsystem, Skeleton.
Bootstrap – самый распространенный выбор. Это простое, удобное, быстрое и популярное решение для любых сайтов, на любой системе управления (CMS).
Bootstrap обладает множеством полезных функций, позволяющих создать красивую и аккуратную многоколоночную вёрстку без больших затрат времени. Ты можешь легко подстраивать размеры колонок под размеры экрана, настраивать шрифты, отступы, размеры и параметры элементов. Делать автоматический адаптив таким способом – это очень удобно, ты просто задаешь фреймворку задачу, а он сам внедряет все необходимые изменения.
В фреймворке Bootstrap есть готовые шаблоны HTML и CSS, JavaScript-расширения, блоки навигации, всякие кнопки и сетки. Можно настроить собственную разметку, если твой сайт содержит HTML5. Там есть инструкции, даже не нужно ничего предварительно изучать для этого. Можно использовать медиа-запросы для задания нужных параметров элементов.
Отдельный поддомен
Это про выбор отдельного адреса сайта десктопной и для мобильной версии. Обычно так делают крупные сайты, типа порталов, бирж, соцсетей и подобных ресурсов. Как пример возьмем Amazon. Там столько всего, что просто учесть все в дизайне при переделке нереально. Проще перенести на вторую платформу.
Десктопная версия:
Мобильная версия:
Такие сайты переделать довольно трудно, будет проще скопировать ресурсы и сделать новую версию. Если говорить о стоимости работы – создать отдельный адрес и новую версию обычно выходит дешевле, чем внедрять адаптивный дизайн в существующий сайт такого объема.
Главный недостаток – ты получаешь не один, а два сайта. Их нужно каждый по-отдельности продвигать, править, настраивать и наполнять. Это удваивает расходы владельца. Но зачастую для бизнеса это все равно имеет смысл.
Чтобы создать субдомен, нужно полностью скопировать сайт и создать его версию для мобайла. И если пользователь зайдет на главный сайт со смартфона, то его автоматически перенаправят на эту новую мобильную версию.
Рекомендуется исключить конкуренцию версий друг с другом и связать поддомен с главным доменом. Разница в названии может быть в добавленной букве "m" или "mob" для удобства.
Однако, остается немаловажным вопрос дублирования контента и как это повлияет на ранжирование в поисковых системах. По мнению Google, копирование контента не запрещено, но есть тонкости. Чтобы избежать проблем, лучше прописать специальные атрибуты "rel=canonical" для десктопной версии и "rel=alternate" для мобильной.
Итого
В качестве вывода можно сказать, что в большинстве случаев лучше использовать адаптивный дизайн. Если у тебя сайт на WordPress или что-то подобное, можешь использовать для адаптации CSS-фреймворки – это быстро и удобно. При невозможности такого подхода (когда сайт слишком большой) нужно будет создать отдельный поддомен.
Если ты пока не в курсе таких тонкостей, не отчаивайся! Мы знаем как помочь. У нас есть онлайн-курсы, где ты сможешь научиться всем этим вещам. Мы предлагаем образовательные программы, в рамках которых ты научишься применять знания в условиях фриланса и достойно зарабатывать. Так что присоединяйся к нашему сообществу! Уже открыт набор на новый поток онлайн-курса «UX/UI легенда», где мы как раз учим создавать современные и удобные адаптивные сайты.
