Большинство людей сегодня сидит в интернете со смартфона. Число пользователей мобильных устройств неуклонно растет, что прямо влияет на работу маркетологов и веб-разработчиков.
Все это ведет к простому выводу: пора задуматься о том, чтоб адаптировать свои сайты под все устройства. Выхода два: либо мы прибегаем к адаптивной верстке, либо создаем для сайта отдельную мобильную версию.
Что выбрать и в чем здесь нюансы? Разбираемся.
Аналитика от Statista по мировому рынку мобильной и десктопной рекламы показывает, что к 2022 году расходы на рекламу для планшетов и смартфонов превысят расходы на десктопную рекламу.
Уже сейчас почти половина всего трафика приходится на мобильные устройства
С тех пор как график опубликовали, появилось еще больше доказательств того, что мобильный трафик важен. Это связано с тем, что доходы от рекламы и цены за тысячу показов (CPM) изменились из-за пандемии.
Как показано ниже, доходы от мобильной рекламы оказались более устойчивы к событиям 2020 года, чем доходы от рекламы, просмотренной на планшетах, настольных компьютерах и ноутбуках. Эти данные я взял из исследования eMarketer об изменении доходов и CPM за неделю карантина в сравнении с предыдущей.
Неудивительно, что доходы от рекламы на коммерческом телевидении резко выросли во время самоизоляции
Интересно, что это не предел.
Прогноз Ericsson Mobility Report по мобильному трафику говорит, что он увеличится на 25 % к 2025 году. По их мнению, это должно произойти за счет увеличения просмотров видео и потоковой передачи данных на мобильных устройствах.
Последствия очевидны. Если вы не можете охватить аудиторию, использующую мобильные устройства, вы проигрываете конкурентам, которые делают это
Но все это, конечно, совсем не значит, что надо сосредоточиться на одних смартфонах.
Исследование от Statcounter по трафику с компьютеров, планшетов и смартфонов показывает, что трафик делится примерно поровну: десктопы не слишком уступают мобильным устройствам. Аудитория, для которой компьютер – рабочий инструмент, предпочтет компьютеры телефонам.
На графике показана доля рынка компьютеров, мобильных устройств и планшетов в мире
Статистика ясно показывает, что игнорировать мобильные устройства никак нельзя, будь это создание сайта или построение стратегии продвижения в онлайне.
Основных вариантов адаптации сайта два, их я уже упомянул выше:
Отдельная мобильная версия сайта. На нее сервер перенаправляет тех пользователей, которые используют смартфоны. Обычно она размещается под отдельным URL-адресом: например – m.yoursite.ru или mobile.yoursite.ru.
Адаптивная верстка. Здесь нужно будет внести изменения в CSS и HTML. Для этого обращаются к программисту или верстальщику. URL-адрес сайта не меняется, контент тоже.
Выбор между мобильной и адаптивной версткой будет иметь последствия для:
Пользовательского опыта. Юзабилити сайта зависит от многих факторов, но мобильную версию с самого начала делают удобной именно для просмотра со смартфона.
SEO. Мобильная версия оптимизируется и продвигается отдельно от основного сайта.
Стоимости. Разработка мобильной версии дороже, чем адаптация сайта.
Создания, обслуживания и управления контентом. Часто для мобильной версии сайта пишут контент отдельно. Например, чтобы повысить скорость загрузки страниц.
Посмотрим на плюсы и минусы каждого варианта. Выскажу субъективное мнение, а выводы делайте сами.
Например, хорошие варианты мобильных сайтов – Etsy и BuzzFeed. Крупные картинки, читабельный шрифт, не слишком много контента на одном экране
Мобильная версия сайта изначально пишется под смартфоны и планшеты. Посетители основного сайта будут перенаправлены на нее, если система идентифицирует, что юзер зашел с мобильного устройства.
Как правило, в мобильной версии у пользователей нет доступа ко всему контенту – отражается только часть. Например, flash-анимация не воспроизводится на многих устройствах, и поэтому ее заменяют текстом или изображением в формате PNG или JPG. В итоге возникает необходимость контролировать сразу два сайта, и в этом случае объем работы контент-менеджеров и разработчиков, соответственно, удваивается.
Контент и функции в мобильной версии подбирают так, чтобы обеспечить оптимальное взаимодействие. Чтобы сделать это правильно, ответьте себе на несколько вопросов:
Какие блоки в десктопной версии служат больше для декорации? Часто это опросники, слайдеры, украшения сайдбаров. Их лучше безжалостно убрать, чтобы не всплыли какие-нибудь баги и чтобы все графические элементы нормально прогружались. Скажем, вместо анимированного меню разместите статическое. Оно, конечно, выглядит не так эффектно, зато страница в итоге загружается быстрее. Еще один хороший пример – 3D-модели товаров, которые отлично смотрятся в десктопе, но смартфоны их уже не тянут.
Что важно оставить? Обычно – форму обратной связи, кнопки соцсетей и подписки, рекламу.
На что посетители почти не реагируют? Ответить на вопрос помогут карты поведения пользователей на сайте. Например, отслеживание можно включить в «Яндекс.Метрике» и Google Analytics. Элементы, которые активны меньше других, тоже можно спрятать.
Для активации понадобится скопировать и установить код счетчика на сайт
Важно разобраться в поведении посетителей, чтобы оптимизировать контент для мобильной версии сайта.
Читайте также: Что такое гибрид сайта и мобильного приложения PWA и SPA
Сайт адаптируется к устройству, с которого заходит пользователь. И с компьютера, и телефона содержание сайта будет одним и тем же, так как загружается один HTML-код, который по-разному отображается на десктопе и смартфоне.
Картинки и текстовые блоки масштабируются под любой тип экрана. Например, контент будет отображаться тремя столбцами для ноутбука, двумя – для планшета, одним – для смартфона.
Пример адаптивного дизайна на сайте Wildberries
Надо понимать, что не все поддается адаптации: некоторые функции не могут быть отображены в мобильных устройствах. Есть элементы, которые не поддерживаются многими мобильными браузерами:
Flash. Flash-содержимое считается потенциально опасным из-за мошенников, которые могут распространять через него вредоносный код. Именно поэтому на «Странице общей информации Adobe Flash Player EOL» сейчас висит новость о том, что Adobe прекращает поддержку плеера 31 декабря 2020 года. Ему на смену пришел HTML5 – язык разметки с поддержкой тегов отображения визуального содержимого. Упомянуть о flash-контенте стоит хотя бы потому, что его до сих пор используют на многих сайтах (например, в играх во «ВКонтакте»).
Java-апплеты. Апплет – это Java-программа, которая запускается в веб-браузере. Но в Android Java работает не на JVM (Java virtual machine), а на Dalvik VM. Приложения на Java могут быть написаны для Android, но они преобразуются во время компиляции в Dalvik. Dalvik – это регистровая виртуальная машина для выполнения программ, которая необходима для работы операционной системы Android. Если коротко – Java-апплеты не поддерживаются как на Android, так и на iPhone.
Silverlight-плагины. Это плагины для запуска приложений с элементами векторной графики, анимации, видео и аудио. Не поддерживаются в мобильных телефонах. На справочной странице Google Search Console о типичных ошибках при разработке мобильных устройств рекомендуется использовать стандартные теги HTML5 для анимации и видео.
Причем в мобильной выдаче «Яндекс.Видео» ролики, которые не поддерживают HTML5, а работают только с Flash, вовсе не показываются, потому что большинство современных мобильных браузеров не могут их воспроизвести.
Придется решать, каким функциям каждой страницы уделить приоритетное внимание и где их разместить на небольших экранах. Наличие адаптивного сайта не освобождает от необходимости рассмотреть юзабилити с точки зрения пользователей ПК и смартфона.
Например, частая ошибка – расположение двух кнопок слишком близко друг к другу. Стоит промахнуться в несколько пикселей, и вы попадаете совсем в другое меню. Хорошо демонстрирует неудачное решение панель для выбора мест в кинотеатре на мобильной версии сайта «Афиша».
Плохое качество хорошо запоминается. Сейчас это неудобство уже исправили – изображение можно увеличить
Адаптивный сайт важно протестировать на всех типах экранов, чтобы избежать негативного пользовательского опыта.
Один из главных плюсов адаптивных сайтов в том, что они освобождают менеджеров по SEO от многих хлопот. Например, от беспокойства о влиянии редиректа на продвижение. Если страница долго загружается или содержит контент, кардинально отличающийся от основной версии сайта, это плохо сказывается на ранжировании.
В случае с мобильной версией надо:
Сообщить о родственности мобильного и основного сайтов «Яндексу» и Google, прописав атрибуты rel=alternate и rel=canonical. Атрибут rel=canonical устраняет дубли, объединяя одинаковые страницы, и этим улучшает ранжирование сайта. Благодаря атрибуту rel=alternate роботы поисковых систем могут идентифицировать мобильную версию сайта и показывать посетителям релевантный контент. «Яндексу» хватит rel=alternate, для Google нужны оба. Их важно прописать в теге <head> каждой страницы основного сайта со ссылкой на соответствующую страницу мобильной версии.
Разместить мобильную версию на поддомене основного сайта. Благодаря этому робот сможет корректно определить, что у yoursite.ru есть мобильная версия m.yoursite.ru.
Создать отдельный файл robots.txt, который должен быть доступен по адресу m.yoursite.ru/robots.txt. В файле запретить обход служебных страниц, указать на адрес Sitemap (его тоже надо создать отдельно для мобильного поддомена).
Установить редирект на мобильную версию в зависимости от User agent устройства пользователя. Если посетитель случайно зайдет со смартфона на основной сайт, то моментально будет перенаправлен на m.yoursite.ru. Так надо сделать для каждой страницы сайта. Например, редирект с yoursite/products.ru должен указывать на m.yoursite/products.ru, а не просто на главную страницу – m.yoursite.ru.
В общем, дел немало, и это только начало. Но если этим не заниматься, мобильную версию придется продвигать отдельно, так как для поисковой системы это два разных сайта. А если на основном сайте выпустили классную статью, ее публикация на мобильной версии может привести к пессимизации, потому что поисковик воспримет это как воровство контента. Поэтому лучший выход – делегировать задачу опытному разработчику, которого можно найти в каталоге программистов от Workspace.
В «Рекомендациях по индексированию с приоритетом мобильного контента» указано, что с 1 июля 2019 года оно включено по умолчанию. Это называется Mobile-First Index.
Это значит, что на данный момент мобильная версия каждой страницы воспринимается Google как первая страница для индексации. До этого в приоритете был десктоп. Google уверяет, что это изменение никак не влияет на рейтинг в поисковой выдаче для пользователей ПК, так как не существует отдельного индекса для мобильных версий и все страницы в поисковике собраны в единый индекс. Это влияет только на мобильную выдачу.
Все в том же Google Search Console на справочной странице про адаптивный дизайн говорится, что поисковая система не отдает предпочтения конкретному виду оптимизации сайта, но лучше все-таки делать адаптив, потому что таким образом ускоряется загрузка и снижается количество ошибок.
Кстати, в статье от техподдержки «Яндекса» «Как сделать сайт действительно удобным для мобильных устройств» говорится о том, что поисковые роботы воспринимают все виды адаптации с одинаковым приоритетом. В общем, все то же самое.
Выбор – за веб-мастерами.
Несомненные достоинства мобильной версии:
Скорость. Можно существенно облегчить сайт, что благоприятно скажется на скорости загрузки страниц.
Юзабилити. Так как дизайн рисуется отдельно от основного сайта, можно максимально удобно расположить блоки, адаптировав их расположение под мобильные устройства.
Возможность выбора. Посетители могут выбирать, просматривать мобильную версию или запустить браузерную. Например, если статья на десктопной версии сайта содержит больше информации, можно разместить в футере ссылку на нее. И наоборот, чтобы была простая возможность вернуться к мобильной версии.
Экономия трафика. Это серьезный плюс для аудитории, которая сидит в интернете с мобильных устройств.
Мобильный контент. Контент можно подбирать без оглядки на основной сайт в поисках тонкой грани между коротко и скудно. Хотя это и противоречит рекомендации Консорциума всемирной паутины (W3C) о публикации одинакового контента для всех устройств.
Недостатки тоже есть, и их немало:
Урезанный функционал. Упрощение может сыграть злую шутку и не закрыть все потребности посетителя. Например, ему захочется перед покупкой рассмотреть 3D-модель товара, а мобильная версия не сможет вытянуть эту опцию.
Большие расходы. Разработка и поддержка отдельной версии сайта требует дополнительных расходов времени и денег.
Подходит не всем. Есть основной сайт, есть его мобильная версия. Но еще есть телевизоры, планшеты, дисплеи Retina – как быть с ними? На других экранах сайт может отображаться некорректно. Чаще всего так и бывает.
Главные преимущества адаптивных сайтов:
Собственно, адаптивность. Такой сайт подстраивается под любой размер экрана при помощи метатега viewport. Он содержит все необходимые инструкции для браузера по масштабированию для разных устройств.
Отсутствие редиректов. Когда URL-адрес один для пользователей любых устройств, это значительно экономит время и деньги владельца сайта: контент один для всех, нет дополнительных забот для SEO-специалистов.
Экономия времени и средств. Быстрая и удобная разработка. Благодаря современным технологиям и фреймворкам – например, BootStrap или Foundation – нет нужды переписывать весь код сайта, достаточно прописать стили в CSS и вставить необходимые операторы.
Но и недостатки тоже есть:
Медленная загрузка страницы. Стили и скрипты, которые не используются в мобильной версии, все равно будут загружаться и влиять на скорость. Поэтому для интернет-магазинов с большим ассортиментом товаров мобильная версия сайта предпочтительнее. Хотя с нормальным 4G-соединением эта проблема не слишком заметна. Каналы шириной 40–60 Мбит/с зачастую работают лучше, чем домашний интернет.
Отсутствие выбора. С адаптивного сайта пользователь не сможет перейти на полную версию в отличие от мобильного варианта, где выбор есть.
Остальные проблемы связаны по большей части с ошибками разработчиков или непродуманными плагинами, чем с недостатками технологии. Например, иногда элементы дизайна, которые отлично смотрятся на экранах мобильных телефонов, нелепо выглядят на десктопе. Впрочем, это можно устранить на этапе тестирования.
Есть еще вариант адаптивного дизайна – RESS (Responsive Design + Server Side), или динамический показ.
Динамический показ – это когда со стороны сервера приходит HTML-код, адаптированный под конкретное устройство. То есть для ноутбука, смартфона или планшета загружается разный HTML и CSS, при этом сохраняется один URL-адрес. Казалось бы, идеально. Но нет.
Придется обновлять информацию на сервере каждый раз, когда добавляются новые девайсы. Либо пользоваться платными сервисами для определения устройства. Опять же, для разных устройств необходимо верстать индивидуальные макеты, но сложно учесть все, поэтому на моделях с непопулярными диагоналями экранов сайт может в итоге работать с ошибками.
Уходят и время, и деньги, поэтому такое решение подходит далеко не всем проектам.
Читайте также: Как увеличить скорость загрузки сайта и от чего она зависит
Читая эту статью, вы получаете определенный опыт. Текст равномерно распределен, информация разбита на разделы, изображения размещены надлежащим образом, а реклама не мешает вам читать материал.
Но представьте на минуту другой блог. С черным фоном и мигающими изображениями, где при прокрутке каждый раз появляется новое всплывающее окно. Так, что вы даже не можете прочитать, на что нажали.
Это все – пользовательский опыт (UX – user experience). UX – это то, как вы относитесь к тому или иному интерфейсу. И его тоже надо учитывать, когда вы выбираете, как именно адаптировать ваш сайт.
Не только Google – весь мир движется к принципу Mobile-First.
Посетителям, которые заходят на сайт с мобильного, неважно, перенаправляет их система на мобильную версию или просто автоматически реагирует, чтобы оптимально отобразить контент на устройстве. Но они обязательно заметят, что что-то не так, если увидят, что многого не хватает.
На пользовательский опыт влияют ваши решения. Важно подробно обсудить влияние этих решений с разработчиками, и протестировать сайт на широком спектре устройств и дисплеев.
Когда я смотрю на вопрос с разных позиций, мне кажется очевидным, что адаптивная верстка – лучший выбор. Инвестирование в адаптацию сайта поможет сохранить существующий рейтинг, SEO и ключевые слова как минимум. Но, конечно же, решение зависит от поставленных перед разработчиком задач.
При помощи калькулятора для расчета стоимости digital-услуг на сайте Workspace вы узнаете примерную стоимость выполнения работ, и сможете уточнить все детали со специалистом, выбрав его в разделе с вакансиями и резюме IT-специалистов.
Подпишитесь на ежемесячную рассылку Workspace
Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.
Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.
