В 2022 году нужно начинать с мобильной версии сайта

Как часто вы и ваши знакомые в реальной жизни заходите в интернет со смартфона? Наверное, часто. И это подтверждается исследованиями. 

По мнению экспертов, уже в 2020 году доля мобильного трафика перевалила за 80%. Это значит, ваш сайт должен быть в первую очередь мобильным. Давайте разберемся, что это такое и нужно ли начинать разработку именно с мобильной версии сайта. Тем более Google уже несколько лет отдает в поиске предпочтение мобильным ресурсам, подходящим под требования Mobile First.

Что такое мобильные сайты

Исходя из названия, можно понять, что такие сайты предназначены для мобильных устройств. Обычно скорость мобильного соединения меньше, чем у десктопа, да и оперативки меньше, поэтому сайт должен быть «легким». Для этого минимизируют подгрузку элементов с большим весом, а также медленно подгружаемые скрипты и части сайта.

Поэтому к мобильным сайтам имеются свои требования по дизайну и верстке. Если посмотреть мобильного сайта, он будет обладать меньшим количеством украшательств. Можно некоторые «лишние» декоративные элементы просто отключить для экранов с меньшей диагональю. Это позволит не перегружать и так небольшой экран пользователя, давая ему только самое необходимое. 

Сайт должен подстраиваться под разные экраны и одинаково хорошо смотреться и на 5, и на 7 дюймах. Отдельно проверяют работу и внешний вид сайта на устройствах Apple и Android. Часто бывает, что если на «яблоке» всё хорошо, то на «роботе» криво-косо и наоборот. 

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

Проблемы могут возникнуть и из-за слишком мелкого шрифта. Это затрудняет использование сайта. Клиенты могут просто уходить с ресурса, чтобы не вчитываться в мелкие буквы. Обязательно нужно проверять, как шрифт будет смотреться на мобильном устройстве.

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

Вот небольшой чек-лист для проверки ресурса на мобилопригодность:

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

Также вы можете проверить страницу в сервисе Google. Здесь вы точно увидите, есть ли проблемы на вашем сайте.

Способов реализации мобильных сайтов на практике несколько. Обычно вебмастера рассматривают один из трех методов.

• Адаптивная (резиновая) верстка. Суть метода заключается в плавной подстройке верстки под размер устройства. Это одно из самых простых и распространенных решений. При этом часть таких сайтов грузится не слишком быстро, могут возникать проблемы на сложных площадках с тяжелым функционалом.
• Мобильный сайт. Это отдельный сайт, который обычно делается на поддомене с буквой «m». Делается копия основного сайта, подгружаемая на устройствах с небольшим экраном. Реализация зависит от особенностей ресурса. Где-то переключение происходит автоматически, где-то пользователь может сам выбрать мобильную или полную версию сайта.
• Динамический сайт (RESS). В этом случае делается несколько вариантов сайта, и в зависимости от размера экрана подгружается нужный. Это самый дорогой и сложный вариант. Для малого и микробизнеса такое решение не подойдет, ибо незачем.

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

AMP и Turbo-страницы

Существует еще две технологии для создания мобильных сайтов. Точнее, речь о показе контента на страницах. Сейчас поисковики предлагают технологии AMP и «Турбо». Оба способа предназначены для ускоренного показа мобильных страниц. Только один требует работы программиста, а второй метод доступен с минимальными техническими знаниями.

Технология AMP представлена компанией Google. Для ее использования нужно делать разметку кода страниц. Для большей части микробизнеса этот способ не годится. Это лишние телодвижения и лишние деньги, выплаченные разработчикам.

Предлагаемые Яндексом «Турбо-страницы» намного проще. Для них можно использовать RSS-ленту, которая передает данные с сайта на сервер.

 RSS-лента — настроенная сводка с сайта, позволяющая передавать информацию агрегаторам. В нашем случае под агрегатором подразумевается сервис по генерации «турбо-страниц». 

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

Подключить «турбо-страницы» можно через «Яндекс.Вебмастер». Технические особенности подключения зависят от особенностей вашего сайта, но это намного проще, чем гугловский AMP, а еще существует много готовых решений для различных CMS.

Почему нужно сначала делать мобильную версию

Давайте посмотрим, почему надо делать сначала мобильную версию сайта. Лучше всего это продемонстрирует статистика. Начнем с сайта, продающего внутригородские грузоперевозки. На него заходит 78,8% пользователей с мобильного. Я не могу показывать статистику конверсий, но она гласит, что заказывают «ГАЗели» только с мобилок.

Другой вариант — рассчитанный на женскую аудиторию сайт. Здесь доля мобильных устройств еще выше — 87,4%. С компьютеров заглядывает всего 1,8% пользователей. Получается, если вы хотите сделать сайт для салона красоты, продвигать ноготочки или бровки, полный сайт вам вообще не понадобится.

Ну, а что же на сайте, предлагающем строительные услуги? Может, уж там-то народ заходит с компьютеров и активно юзает полную версию? Нет. Здесь тоже получается 70,7% мобильных пользователей.

Получается, что ваши клиенты будут приходить на сайт в основном с мобильных устройств. Значит, вам нужно обеспечить им хороший пользовательский опыт. Чтобы они еще раз пришли на ваш ресурс и сделали заказ или оставили заявку. 

Вот для этого и необходимо разрабатывать в первую очередь мобильную версию сайта. Уделите этому основное внимание, и тогда ваш ресурс будет приводить клиентов. Ну, а если у вас останется бюджет, тогда уже можно будет допилить и полную версию.Но тут есть нюанс. По статистике, онлайн-покупки в 2021 году на 49% делаются с полной версии сайта, еще 49% — мобильные сайты. Потерявшиеся 2% — это пылесосы и прочая техника, подключенная к интернету. Особенно высока доля десктопных продаж в b2b. Если вы оказываете услуги бизнесу, возможно, вам пригодятся обе версии.

Примеры мобильных сайтов

Давайте посмотрим на удачные примеры мобильных сайтов и начнем с грузоперевозок. На скриншоте реальный ресурс. На первом экране есть небольшая картинка и цена, а также суть предложения. Тут же в один клик можно добавить «товар» в корзину и заказать его. Все просто, ничего лишнего. Грузится сайт моментально.

Посмотрим на пример из другой ниши. Возьмем доставку пищи. На скриншоте удачный пример главной страницы сайта по доставке пиццы. Дизайн, с одной стороны, упрощен, но при этом есть красочные элементы, привлекающие внимание. Сразу доступны CTA-элементы (кнопки для заказа и корзина), по ним удобно кликать.

Что-то похожее должно быть и у вас. В 2022 году мобильные сайты станут еще востребованнее, практически полностью отжав коммерческий трафик у десктопа. Значит, вам нужно начинать работу именно с версии для смартфонов. Но не забудьте посмотреть на статистику в вашей нише. В некоторых случаях продажи лучше идут с компьютеров, хоть с мобильных заходов и больше.

То есть часто люди изучают информацию с телефона, а покупать заходят с ПК. Это важно учитывать.

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

И самое главное: что бы вам ни говорил дизайнер или верстальщик, сначала делаем мобильную версию. Только потом десктоп. Если бабла хватит.

The following two tabs change content below.

• Bio
• Latest Posts

Роман Тарасов

Копирайтер-маркетолог. Эксперт в сфере интернет-маркетинга, автоперевозок.

Latest posts by Роман Тарасов (see all)

• Яндекс. Директ новые правила модерации - 30.06.2022
• В 2022 году нужно начинать с мобильной версии сайта - 30.12.2021
• Что такое Tone of Voice и зачем его требуют от автора - 03.10.2021