Мы часто говорим о важности правильного подхода к разработке и в продвижении. Это экономит бюджет клиента в долгосроке а и позволяет быстрее добиться результата. Продуктовый подход, SEO-friendly, теперь затронем mobile first. Расскажу, почему в 2025 году без мобайл ферст уже никуда и есть ли еще жизнь для десктопных сайтов.
СодержаниеЧто такое mobile first?
Если дословно - "мобила первая". Разработка и дизайн сайта начинается с мобильной версии, а не с десктопной, как делают большинство студий. Делается это в случае, когда в нише бизнеса клиента преобладает трафик с мобильных устройств и он сильно доминирует над классической компьютерной версией.
Во главе угла просто здравый смысл и логика - если ваши цифры намного больше у мобильных устройств, чем с ПК, вот и наглядный ответ.
Просто зайдите в Яндекс Метрику и посмотрите на показатели: Отчеты > Технологии > Устройства. Только отфильтруйте отчет по "Переходы из поисковых систем", иначе нарветесь на учет статистики с ботами, которые заполонили рунет (они как раз эмулируются с мобильников).
Зачем все усложнять какой-то mobile first разработкой?
Это правда, сделать макет для десктопа, следом очень быстро наклепать мобильную версию (как остаточное явление) и вывести сайт в релиз порой быстрее и дешевле, но есть пара нюансов. Накину базу:
- Объемы трафика с мобильных устройств давно превысили десктопные.
- Разработать настоящий адаптивный дизайн под разные разрешения сложнее, а потому это всегда дороже.
- Сайты без адекватной мобильной версии приносят меньше конверсий или низко ранжируются в поиске.
Отсюда вывод — выпуская сайт только с проработанной десктопной версии: ПК и ноутбуков, вы лишаете себя львиной доли трафика с мобильных гаджетов. Поисковики при ранжировании уже лет как 10 ориентируются на состояние мобильной версии, а реклама, ведущая на неудобный сайт, будет просто сливать бюджет впустую.
Если у вас крутой сайт, но он криво выглядит на смартфоне — будет дебаф и по SEO, и при запуске Директа. При этом лепить из десктопной версии мобильную — не совсем правильно в техническом плане, лучше наоборот. Сначала сделать версию для смартфонов, а затем подготовить сайт для больших экранов — иными словами, мобайл ферст.
Согласно данным Яндекс.Радара, за последний год доля мобильного трафика в России достигла 70%. На каждого пользователя с десктопа приходится минимум двое со смартфонов
В чем отличия разработки и SEO?
Сухих отличий в продвижении сайта между мобайл и десктоп версий нет, а вот при разработке различий много. Мобайл версия ориентирована под небольшие экраны и разрешения — для просмотра со смартфонов и планшетов. Поместить полновесную страницу, которая хорошо смотрится на мониторе 24+дюймов, на экран смартфона сложно. Пользоваться таким чудом — еще труднее.
Неважно, разрабатываются две отдельные версии: мобайл и десктоп, или же создается адаптивный дизайн. Технически правильно сначала разработать легкую, продуманную мобильную версию сайта, а затем расширить ее, чем создать подробную, тяжелую страницу под десктоп и потом всячески ее ужимать, придумывая куда засунуть нужный блок, потому что изначально он был спроектирован под ПК версию.
Если разрабатывать мобильную версию как основу сайта, а затем делать десктоп — меньше вероятность наделать грубых ошибок. Чем академичнее подход в разработке, тем меньше проблем будет и при дальнейшем продвижении проекта. Иными словами, нормально делать — нормально будет, а потому начинать нужно с mobile first.
Советуем почитать:
Каким должен быть сайт mobile first
Если брать продуктовый подход, то принципы хорошего сайта для десктопа и мобильных будут идентичны. Просто десктопная версия будет как младший брат — она получает меньше трафика, соответственно, к ней спроса поменьше.
Приведу ключевые моменты проектирования, которые нужно учесть в mobile first, а затем перенести в десктопную версию.
1. Хорошая компоновка блоков
Сайт на смартфоне не должен выглядеть куцо и уступать в чем-то десктопной версии
Ключевое в mobile first — фокус на содержании страницы и взаимодействии. Большую часть суток мобильные пользователи находятся в хронической спешке или в дороге, поэтому все основные элементы страницы должны быть сразу на видном месте и удобно расположены. В отличие от десктопной версии сайта, в мобилках лучше избежать лишнего визуала и сконцентрироваться на функциональности. Лучше лаконично, но быстро и понятно, чем красиво и неудобно.
На сайтах, ориентированных под десктопы, значительную часть экрана занимают хедер, футер, сайдбар, различные меню, блоки перелинковки и т.д., которые не относятся к основному контенту. В mobile first эти элементы лучше скрыть в выпадающие плашки и максимум пространства на экране отдать под контент. Обязательно оставьте конверсионные элементы и важные кнопки на видном месте, но сделайте их меньше, чем для десктопной версии.
Еще раз сделаем акцент на удобстве - активные элементы нужно адаптировать под пользовательский опыт, не мельчить, добавить пространство между элементами и спроектировать навигацию с пониманием того, что пользователь взаимодействует пальцем, а не курсором.
Наглядный пример: мобильная версия Яндекс.Музыки, которая больше похожа на приложение, чем сайт. Большие компании тратят кучу денег на мобильный UX — результат показателен.
Лучше UX — больше пользователей — больше платных подписок
2. Адаптивная верстка без багов
Страница должна корректно отображаться на любом экране, девайсе, ОС и разрешении
В mobile first крайне важно наличие респонсивного или адаптивного дизайна — когда макет сайта подстраивается под размер окна браузера и разрешение экрана. Необходимо, чтобы верстка работала без багов: блоки корректно подтягивались под нужное разрешение, а картинки и поля — не плыли по странице. При этом еще нужно сохранить хороший уровень UI/UX-дизайна на каждом устройстве.
С технической стороны один и тот же макет трудно сильно сжать или растянуть без потери качества, поэтому создается несколько вариантов под популярные разрешения: 320 px, 480 px, 768 px, 960 px, 1200 px, 1600 px. Далее при загрузке страницы сервер узнает разрешение пользователя и предлагает ему ближайший подходящий макет.
Чем меньше макетов проработано, тем больше вероятность появления артефактов с версткой и проблем с UX. Поэтому в идеале стоит прорабатывать макет страницы под каждое разрешение: это дороже, но сайт будет работать лучше и принесет больше конверсий. Золотая середина — это 3–4 интервалов разрешений, меньше делать не стоит.
Под кирпичные Nokia разрабатывать макет, конечно, не стоит, но желательно охватить разрешения от 320 px и выше + с разным соотношением сторон: 16:9, 5:3 и 3:2
3. Отсутствие портянок и огромных текстов
Контент должен быть кратким, но осмысленным. Иными словами, SEO-friendly
Mobile first — всегда про скорость и комфорт, поэтому контент на странице должен учитывать специфику мобильных устройств. Особенно в коммерческих тематиках. Важно, чтобы контент был отжат от лишнего и содержал только основную ценность — решал поисковый интент конечного юзера. Поэтому на странице не должно быть видимых объемных портянок и SEO текстов. Это не значит, что мобильная версия должна содержать урезанный контент, а скорее оптимизированный.
Для mobile first лучше всего подходят небольшие блоки с форматированным текстом: списки, буллиты, блоки внимания и плашки, выделяющие тезисы жирным или курсивом. Это облегчает сканирование информации со страницы и положительно влияет на адаптивность. Условный список с тезисами легче подстроить под небольшое разрешение, чем портянку текста, которую придется долго скролить.
Короткие блоки контента должны выводить всю нужную информацию и не тормозить пользователя. Важно, чтобы сделать заказ с мобильной версии можно было быстрее, чем с десктопа. Буквально на ходу
Советуем почитать:
4. Быстрая загрузка сайта
Скорость загрузки со смартфона важнее, чем скорость загрузки с компьютера
Если страница грузится дольше 5 секунд, сайт теряет больше половины пользователей. При этом стоит помнить, что на смартфонах не всегда есть стабильный интернет, поэтому у мобайл версии больше требований к скорости загрузки и быстродействию. Не спроста поисковые системы продвигали (и продвигают) оптимизацию скорости работы сайтов именно на мобильных устройств - вспомним многолетную поддержку Турбостраниц (но проект уже закрыт) от Яндекса, показатели Core Web Vitals от Гугл.
Чтобы снизить процент отказов, необходимо трепетно оптимизировать все элементы сайта: от картинок для кода. Рекомендации всем известные, просто для mobile first это стоит чуть ли не во главе угла.
- Сжимайте изображения, чтобы снизить вес страницы.
- Настройте кэширование и подключите CDN для более быстрой загрузки.
- Избавьте код от лишних CSS и JavaScript, чтобы ускорить рендеринг страниц.
- Вынесите статические скрипты и стили во внешние файлы, чтобы браузер не загружал их каждый раз.
Скорость загрузки сайта сама по себе не влияет на ранжирование в выдаче, просто старайтесь исправлять явные ошибки и хотя бы не доводить сайт до долгой загрузки - чтобы на страницах не было картинок по 1-5 мегабайт, не было зависонов сервера от медленного хостинга или перегрузки CMS от наличия неиспользуемых скриптов.
Как правильно, скорость загрузки на мобильных устройствах хромает у подавляющего большинства сайтов. Вот оценка загрузки главной Яндекса (старой версии, ныне - dzen) с эмуляцией смартфона в сети 4G. Прямо беда в цифрах
5. Правильно проработанная цепочка конверсии
Важно, чтобы пользователь мог легко и быстро выполнить целевое действие со смартфона
На небольшом экране сложно разместить много СТА-элементов. С другой стороны, внимание пользователя не расплывается по всему сайту, а сконцентрировано на небольшом участке страницы. Чтобы мобильный трафик приносил конверсии, важно правильно разместить СТА-элементы и лид-формы: сделать их доступными в любой момент, разместить на видном месте, но не сделать их навязчивыми.
- Тяжелое меню лучше наоборот скрыть в «гамбургер», чтобы освободить место для контента.
- Второстепенный контент важно минимизировать: скрыть часть блоков, чтобы они не оттеняли внимание с лид-формы или СТА-элементов.
- Кнопки должны быть удобными и заметными, а расстояние между ними достаточным, чтобы пользователь не мисскликнул.
- Поля и лид-формы для мобильной версии стоит отдельно проработать. Важно, чтобы было удобно заполнять данные, а сами формы не были слишком длинными.
- Смартфоны умеют звонить. Круто, если на сайте будет автонабор номера и форма с быстрым звонком.
Пользователю должно быть удобно выполнить целевое действие: позвонить, сделать заказ, оставить контакты. В мобильной версии лучше не растягивать форму доп полями, а сконцентрироваться на 1 действии
Получается, десктопная версия и не нужна?
Мобайл версия первична в 2025 году для бизнеса с мобильной аудитории, но десктопная версия на ПК - это все равно золотой стандарт и не нужно обесценивать важность полноразмерных устройств. Наоборот, больший экран и разрешение — повод прокачать грамотный адаптивный дизайн и расширить его всякими крутыми штуками.
Мы еще выскажем непопулярное мнение, основанное на нашем наблюдении - у мобильной версии конверсия в продажу/заявку бывает даже значительно, чем с ПК устройств.
Это связанно с тем, что часть пользователей находясь в дороге или суматохе не всегда сконцентрированы на покупку/заявку/обращение/звонок. Да, они гуглят, изучают и запоминают продукт и сайт, но совершают целевые действия, когда находятся в более спокойном состоянии - приходят домой, на работу, в обеденное время или в перерыве за чашечкой кофе или чая.
Советуем почитать:
Кратко: что делать, чтобы сайт хорошо конвертировал в 2025 году
- Если вы планируете разработку сайта в 2025 году — однозначно подумайте начать с mobile first.
- У вас уже есть сайт и нужно сделать хорошее SEO / рекламу — проведите чекап мобильной версии и обновите хотя бы ее.
- У вас старый сайт, где мобильной версии нет или она такая, что лучше б ее и не было, рекомендую задуматься о полном рестарте / редизайне. Скорее всего, сайт просто заброшен.
Подскажем, как правильно действовать в каждом случае, чтобы улучшить ваш проект и приумножить конверсию трафика в лиды. Пишите — проконсультируем по вашему кейсу.
Есть вопросы по вашему проекту? Напишите нам!
