Как адаптировать сайт под мобильные устройства без глупостей

РАЭК и Минцифры по результатам анализа российского веба на 2023 год сообщают следующие данные:

Вдумайтесь в эту цифру и вспомните, под что заточены ваши веб-версуры — под ПК или мобайл. Окей, это локально в России, Минцифры может ошибаться, и другие аргументы недоверия — на них есть отчёт Cloudflare, которая работает с 30% компаний из Fortune 1000 и защищает, по собственным словам, 20% сайтов всего интернета. Её анализ трафика показал, что в глобальном 42% мобильной составляющей, а в российском — 40%. С преобладанием Android (68% в целом и 72% в России, если кому-то интересно).

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

Тем временем, 42% и 93% говорят, что мобильных пользователей преступно игнорировать. В зависимости от бизнеса, региона и других факторов доля таких людей может оказаться близкой к 100%. И вообще непонятно, почему сайты ориентированных на них компаний сделаны для десктопов.

У разработчика сайта есть, как в сказке, три пути:

Кстати, вот «‎дед, который делал сайты»‎ от Copilot. А вот его описание по версии Copilot. Насколько подходит вам?

В общем, дедушка очаровательный, но коммерция его не волнует. А тех, кому сайты зарабатывают, она волнует. Им нужен правильный путь обоснованного выбора. Он начинается с анализа. Придётся, заручившись помощью маркетолога, ответить на вопросы, кто пользуется сайтом, кто должен пользоваться, зачем люди приходят на ресурс, какую работу он для них выполняет, понять поведенческие сценарии и реальные потребности целевой аудитории.

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

Принцип Mobile First или разработки с акцентом на мобильную аудиторию не спасёт, если у вас не мобильная аудитория или мобильная, но не хочет таковой быть, а хочет нормальные каталоги на 27-дюймовых мониторах в офисах. Здесь много вариантов, поэтому сперва лучше понять, что и зачем делают (будут делать) люди с вашим сайтом.

Всё проанализировано, необходим мобильный сайт. Итак, у вас либо есть сайт, либо нет. Это даёт некоторый разброс вариантов:

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

Тут мы хотели нарисовать диаграмму, от простого к сложному, но не нарисовали, потому что нельзя точно определить, какой сценарий сложнее. И по правильности ранжировать не получается. Каждый случай будет рассмотрен индивидуально, а вы просто представьте, что вместо этого абзаца смотрите на красивую инфографику, как из Gartner или отчётов Big 4.

Ответом будет сопоставление потребностей и бюджета. Обычно это оптимизация потребностей под бюджет, реже встречаются обратные варианты.

Другими словами, вы знаете, для кого работаете, вы знакомы с текущим состоянием ресурса, знаете свой бюджет и примерно понимаете, чего хотите. Самое время начать переговоры с исполнителями для получения коммерческих предложений.

Бывают случаи, когда можно обойтись фронтовой разработкой — не трогать сервер. Он действительно может быть современным и подходящим для ваших задач, в том числе мобильного присутствия. Но есть нюанс. Туман войны Раж перемен провоцирует на дополнительные пожелания, потому что делать так делать. В принципе, разумно. Тогда нужно лезть на сервер. И задачи формируются примерно из такого бэклога:

Это не исчерпывающий список, он лишь даёт понимание направлений, в которых могут пойти работы. Каждый случай уникален, потому что в мире очень много возможностей создавать серверы и верстать сайты, огромное количество технологий, которые в сочетании дают множество диагнозов.

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

Итак, вы получили понимание, для кого и зачем делаете сайт. Записали это и передали разработчикам вместе с техническим описанием, если такое имеется. Настала пора разработки. Как пойдёт она, зависит от всей предыдущей подготовки, а также от компетенций тех, кого вы выбрали исполнителями задания.

Более подробно все этапы и ценообразование описаны в специальной статье. А сейчас время живых комментариев. Мы расспросили об особенностях мобилизации сайтов Юлию Соляник, арт-директора Spider Group.

У Юлии обширный опыт преобразования того, что есть, в то, что нужно, с переработкой интерфейсов, пользовательских сценариев, десятками тысяч экранов и миллионами деталей, которые из бессмысленных стали рабочими. Дизайн именно её команды программируют программисты и используют пользователи (что не умаляет заслуг всех участников процесса, без которых реализовать проект невозможно).

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

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

Что касается деталей, нужно сначала продумывать навигационную архитектуру, то есть все меню, расположение страниц. Трудно идеально адаптировать навигацию для мобильных гаджетов. Это тот же самый сайт, только свёрстанный иначе.

Допустим, если на большом сайте у тебя древовидная структура, каталог с глубокой вложенностью и на телефоне, и на десктопе — спокойно проваливаешься в третью, десятую, двадцатую вложенность. И это нормально. В мобильном приложении 10 раз проваливаться куда-то глубоко, а потом возвращаться обратно неудобно. Ты должен следить за тем, как человек может перемещаться, как будет заполнять формы, должен исключить длинные анкеты и другие вещи, неудобные со смартфона. Для всего этого есть другие варианты.

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

Где тонко, там и порвётся. К тому, что у тебя куча разных смартфонов и версий операционных систем, добавляется куча браузеров и их версий. Ты должен понимать, что будешь адаптировать весь дизайн под совершенно другие разрешения.

Есть разные элементы, на которые в десктопе ты даже не обратишь внимание. Картинки, области для кликов, каталоги, таблицы. Вот таблицы ты не можешь нормально показывать. Допустим, каталог техники — бытовой, компьютерной. Любые большие табличные данные, особенно со сравнениями по характеристикам. Здесь нужно изгаляться и делать совершенно по-другому, потому что есть строгие ограничения по горизонтали и вертикали, гораздо строже, чем на десктопе.

То же самое вообще со всеми интерактивными элементами, полями и так далее. Когда тыкаешь курсором, это работает, а когда пальцем, то он не попадает в твои жалкие 12 пикселей.

Придётся учитывать жесты. Хрестоматийный пример: у тебя есть карта с адресом офиса или доставки. У неё будет свой пинч (жест двумя пальцами для изменения размера — прим. ред.). Если попадёшь, будешь скроллить карту, а если нет, то весь браузер. Мало кто попадает. И это нельзя исправить, изменить, так работает браузер. Даже если ты напишешь свой браузер, это не исправить, потому что у операционных систем свои правила. Можно лишь находить удачные альтернативы.

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

Можно сайт сделать, как мобильное приложение. Точнее, можно постараться. Надёргать удобные элементы интерфейса, повторить привычный паттерн поведения. Если повезёт, это будет работать почти так же, как в приложении. Но будут нюансы.

Это может просто не получиться, потому что сайт и приложение — два совершенно разных продукта. Проще из сайта сделать приложение, то же PWA (Progressive Web App — прим. ред.), потому что ты в самом деле можешь просто повторить логику сайта. Но повторить приложение на сайте — это надо иметь подходящие задачи и очень подходящий сайт.

Добавлять нормальную вёрстку в готовый сайт — очень неблагодарное занятие. Когда у нас ребята верстают, они берут сразу минимум два макета, десктоп и мобильный.

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

Это не две разные вёрстки, типа на телефон подгружается этот кусочек, на десктоп — тот. Всё сразу, единое. Для примера, размеры картинок. У тебя есть картинки для ПК и есть для мобилки, надо постараться сделать так, чтобы десктопные с 5000 пикселей по стороне не грузили телефоны. Уже должно быть определение, с чего ты зашёл, у сайта должны быть оба варианта. А это верхушка айсберга.

В любой непонятной ситуации начни с Mobile First. Ты всё равно туда придёшь, и лучше, если там не будет большой засады.

Далее: Разработка мобильных приложений для бизнеса: цена вопроса, этапы

В Spider Group на вас работает более чем двадцатилетний опыт в разработке мобильных приложений, веб-разработке, серверных проектах, дополненной реальности, искусственном интеллекте и интернете вещей.