По данным Exploding Topics за октябрь 2023 года, более 55 % людей по всему миру выходят в интернет с мобильных устройств. По прогнозам, доля мобильного трафика будет расти и дальше. Поэтому сейчас веб-разработчикам целесообразнее фокусироваться на мобильной версии продукта и уже за ней дорабатывать десктопную версию. Тенденция не новая: например, прошло уже четыре года, как Google ввел SEO-алгоритм Mobile-First — то есть, сайты должны быть удобными в первую очередь для мобильников, а уже потом для компьютеров.
Есть три пути создания качественного веб-продукта для мобильных устройств:
сделать сайт с адаптивной версткой;
создать отдельную мобильную версию сайта;
разработать полноценное мобильное приложение.
Так и что выбрать? Чтобы разобраться, перечислю преимущества и недостатки для каждого из вариантов.
Если вам нужна разработка сайта или мобильного приложения — не тратьте время на поиск исполнителя, разместите заказ на Workspace. На нашей площадке зарегистрировано более 17 000 digital-агентств и десятки тысяч самостоятельных исполнителей. Опубликуйте задачу, собирайте отклики и выберите подходящего подрядчика. Workspace — тендерная площадка № 1 в сфере digital.
Читайте также:
Методы SEO-продвижения в Яндекс и Google в 2023 году — «белое», «серое» и «черное»
Адаптивная верстка или адаптивный дизайн — это способность сайта корректно отображаться на устройствах с разными разрешениями экранов.
Например, сайт Workspace тоже поддерживает адаптивность. Так смотрится его дизайн с компьютера и мобильника
Перечислю преимущества и недостатки сайтов с адаптивным дизайном.
Простота в разработке.
Сейчас адаптивность по умолчанию поддерживают все популярные CMS и даже конструкторы сайтов, которые не требуют навыков программирования. То есть, любой человек может за пару дней освоить конструктор Tilda и своими силами сделать простенький одностраничник с адаптивным дизайном. Даже Google рекомендует делать адаптивные сайты, потому что это проще, чем создание отдельной мобильной версии.
Пример адаптивного сайта, сделанного на Tilda
Экономия.
Сайт создается сразу и для смартфонов, и для компьютеров. Разработка отдельного мобильного сайта включает в себя больше трудочасов, нежели работа с адаптивной версией. Разработка мобильного приложения стоит дороже всего.
Универсальность.
Адаптивный сайт создается таким образом, чтобы корректно работать на любом устройстве. Мобильные версии сайта и мобильные приложения рассчитаны только на использование со смартфонов.
Медленная загрузка страницы.
Мобильная версия сайта будет содержать меньше контента, чем адаптивный дизайн и загружаться быстрее. Мобильные приложения будут работать еще быстрее: основная часть контента хранится в памяти смартфона.
Сайты со сложным интерфейсом невозможно адаптировать.
Для таких сайтов, как «ВКонтакте», нужно создавать отдельный интерфейс под мобильные устройства — перетаскиванием блоков и изменением размера шрифтов тут не отделаться. Любой многофункциональный сайт со сложным интерфейсом требует наличия отдельной мобильной версии или приложения.
Хорошая адаптивность тоже требует проработки.
Адаптивность бывает разной по качеству исполнения. Например, кто-то просто задает отступы у полей, отчего блоки вроде как и помещаются в любые экраны, но смотрятся некрасиво в определенных разрешениях. Такую верстку называют «резиновой».
Баг «резиновой» верстки: при изменении ширины экрана части меню наехали друг на друга
Вы можете сами изучить, как реализована адаптивная верстка на разных сайтах. Для этого откройте с компьютера любой сайт и попробуйте поиграться с шириной окна браузера.
У сайтов с качественной адаптивной версткой контент будет менять внешний вид и местоположение в зависимости от изменения ширины экрана. Такая функция достигается с помощью внедрения «брейкпоинтов» — диапазонов ширины экрана, под которые подстраивается контент. Чем лучше проработана адаптивная верстка, тем больше будет вариаций адаптивного дизайна под различные диапазоны. Здесь речь идет не только о смартфонах с разными диагоналями, но и больших экранах с разрешением 4K (3840 на 2160 пикселей).
Теперь перечислю преимущества и недостатки мобильной версии сайта.
Читайте также:
Когда нужно обновлять старый сайт, а когда — вообще не трогать
Мобильная версия сайта — это отдельный сайт, предназначенный специально для смартфонов и планшетов. Его размещают на поддомене основного домена. Как правило, это выглядит так: если адрес основного сайта — site.com, то у его мобильной будет адрес m.site.com. Как правило, мобильная версия сайта лишена большого количества функций в угоду скорости и хорошему юзабилити для устройств с маленькими экранами.
Пользователи смартфонов отправляются на мобильный сайт автоматически. При переходе на сайт браузер пользователя отправляет HTTP-запрос, в котором есть строка с данными user-agent — идентификатором браузера и операционной системы его устройства.
Так выглядит мобильная версия «ВКонтакте», если открыть ее с компьютера по адресу m.vk.com
А так выглядит десктопная версия — в ней гораздо больше функций и у нее более сложный интерфейс
Расскажу о преимуществах и недостатках мобильной версии сайта.
Скорость.
Мобильные версии сайтов в разы легче, чем сайты с адаптивной версткой.
Возможность тонкой настройки юзабилити.
Мобильные сайты разрабатываются полностью с нуля, благодаря чему его функционал и дизайн будет лучше проработан, чем у сайта с адаптивным дизайном.
Возможность включить полную версию сайта с мобильного устройства.
Эта функция зависит от разработчиков, но в большинстве случаев на мобильном сайте есть кнопка для перехода на десктопную версию. Ее добавляют для ситуаций, когда на сайте нужно осуществить какое-то действие со смартфона «через костыль». Помню, как я загружал песни в свои аудиозаписи во «ВКонтакте» со смартфона и для этого мне приходилось переключаться на десктопную версию сайта.
Кнопка для перехода на десктопную версию сайта
Экономия трафика.
Мобильные сайты легковесны и будут «съедать» немного килобайт у людей с мобильным тарифом, в котором нет безлимитного интернета.
Дороже в разработке, чем адаптивная версия сайта.
На разработку адаптивной верстки уходит гораздо меньше времени, чем на создание отдельной мобильной версии сайта. Создание мобильной версии сайта включает в себя отдельные работы по прототипированию, программированию, тестированию и SEO. Еще для мобильной версии сайта понадобятся дополнительные серверные мощности. Такие вложения должны быть оправданы.
Сложности, связанные с SEO.
Для поисковых систем мобильная версия сайта — отдельный сайт. При разработке сайта нужно будет провести ряд дополнительных манипуляций, чтобы мобильная и десктопная версия сайта подкрепляли друг друга в поисковой выдаче. И то, эти работы не дадут такой же положительный эффект, как разработка единого сайта с адаптивным дизайном, который принимает и десктопный и мобильный трафик.
Какие SEO-работы нужно будет проделать при разработке мобильной версии сайта:
Определить канонические страницы с помощью HTML-атрибутов rel=canonical и rel=alternate. Эти атрибуты нужны, чтобы указать поисковым роботам, какие страницы дублируются. Если этого не сделать, роботы могут воспринимать одну страницу как ненужную копию другой и пессимизировать ее в выдаче, что негативно повлияет на позиции сайта в целом. Такими атрибутами нужно будет «обвесить» весь сайт.
Создать файлы robots.txt и sitemap.xml для мобильной версии сайта. Robots.txt содержит разрешения для обхода сайта поисковыми роботами, а sitemap.xml содержит
Читайте также:
Как подобрать подрядчика для SEO-продвижения и контролировать его работу
Приложения на Android и iOS обладают своими преимуществами и недостатками, о которых расскажу ниже.
Возможность внедрить практически любой функционал.
Изобретательность разработчиков ограничивают только характеристики производительности смартфонов владельцев и возможности их операционных систем. Можно хоть вставить онлайн-игру внутрь приложения магазина: главное, чтобы она решала бизнес-задачи.
Например, приложение «Яндекс Go» давно рекламирует другие продукты экосистемы «Яндекс», повышая общую прибыль компании
Скорость работы.
Основная часть файлов мобильного приложения будет загружена на смартфон пользователя, за счет чего можно достичь более быстрой работы приложения. Быстродействие сервера будет зависеть от его мощности и архитектуры — тут как у сайтов.
Отправка push-уведомлений.
Приложения могут отправлять push-уведомления, за счет чего у бизнеса появляется еще один канал для связи с клиентом. Например, с помощью push-уведомления можно реактивировать старого клиента, отправив ему скидку или промокод. Но есть проблема: большое количество пользователей отключает push-уведомления.
Удержание клиента.
Грамотно спроектированное приложение будет лучше удерживать пользователя, чем сайт. Если человек удосужился скачать на свое устройство ваше приложение, он уже к вам достаточно лоялен. Клиента нужно удерживать и дальше, внедряя программы лояльности, предлагая участие в закрытых скидках, высылая ему полезный контент и так далее.
Бесполезность для десктопных устройств и смарт-устройств.
Мобильные приложения не нужны ни компьютерам, ни умным телевизорам.
Дорогая стоимость разработки.
Нативная разработка на Android и iOS обойдется дороже, чем создание мобильной версии сайта. Разработка мобильного приложения должна быть оправдана достижением конкретных бизнес-задач.
Пользователям нужно установить приложение.
Людям будет лень искать и скачивать какое-то приложение в аппсторе. Чтобы это произошло, их нужно будет дополнительно мотивировать: например, дарить промокод за установку. Если у вашего бизнеса большая аудитория, а приложение будет качественным продуктом, расширяющим возможности сайта на смартфонах, тогда его будут качать сами по себе. Но активировать аудиторию маркетинговой акцией все же стоит.
Своя специфика в продвижении продукта.
Есть свои инструменты для продвижения мобильных приложений: например, ASO. Чтобы успешно зарелизить мобильное приложение и выполнить план по аудитории, нужно будет привлекать специалистов, которые специализируются на мобильном продвижении. На рынке больше специалистов, которые занимаются продвижением сайтов: приложения появились позже и их меньше. Поэтому найти специалистов на продвижение мобильного приложения труднее.
Сайт с адаптивной версткой создать проще всего, но качественный адаптив тоже потребует хорошей проработки.
Мобильная версия сайта потребуется, если у десктопной версии сайта сложный интерфейс, который не получится «переложить» на экраны мобильных устройств без отсечения лишних функций.
Мобильные приложения работают быстрее всего и лучше удерживают пользователей, но их разработка обходится дороже всего, а еще нужно мотивировать клиентов скачать приложение.
Подпишитесь на ежемесячную рассылку Workspace
Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.
Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.
