РАЭК и Минцифры по результатам анализа российского веба на 2023 год сообщают следующие данные:
- Пользователи интернета в России — 101,4 млн чел. = 83% населения
- Заходят в Сеть ежедневно — 98,3 млн чел. = 81% населения
- 93% трафика — мобильный
Вдумайтесь в эту цифру и вспомните, под что заточены ваши веб-версуры — под ПК или мобайл. Окей, это локально в России, Минцифры может ошибаться, и другие аргументы недоверия — на них есть отчёт Cloudflare, которая работает с 30% компаний из Fortune 1000 и защищает, по собственным словам, 20% сайтов всего интернета. Её анализ трафика показал, что в глобальном 42% мобильной составляющей, а в российском — 40%. С преобладанием Android (68% в целом и 72% в России, если кому-то интересно).
Расхождение в оценке трафика может быть обусловлено и методикой сбора данных, и региональными особенностями, такими как большие территории некоторых стран, на которых трудно пробросить кабели. Это говорит нам о том, что свой трафик надо анализировать локально, в каждом регионе, на который выходит ваш бизнес.
Тем временем, 42% и 93% говорят, что пользователей смартфонов преступно игнорировать. В зависимости от бизнеса, региона и других факторов доля таких людей может оказаться близкой к 100%. И вообще непонятно, почему бизнес целится в десктопы.
Мобайл фёрст, спаси
У разработчика есть, как в сказке, три пути:
- Делаем сначала мобайл, потому что вон же аргументы в начале статьи
- Делаем сначала десктоп, потому что… да потому что дед мой так делал
- Сначала думаем, потом делаем
Кстати, вот «дед, который делал сайты» от Copilot. А вот его описание по версии Copilot. Насколько подходит вам?
Этот дедушка, сидя за своим стареньким компьютером, создавал виртуальные миры. Он вдохновлялся прошлыми временами, когда веб-страницы были простыми и честными, без лишних флеш-анимаций и сложных скриптов. Дедушка не заботился о модных трендах или коммерческой выгоде. Он добавлял на страницы свои рисунки, стихи, загадки и даже немного магии. Они были как маленькие уютные домики в большом виртуальном лесу.
Иногда дедушка смотрел на свои работы и улыбался. Он знал, что его сайты не сравнятся с современными мегапорталами и социальными сетями. Но это были его сайты, его маленькие частицы великой вселенной интернета.
И так дедушка продолжал творить, несмотря на время и технологические изменения. Его душа была связана с веб-пространством, и он надеялся, что кто-то где-то случайно наткнётся на его страницы и улыбнется, как он сам.
В общем, дедушка очаровательный, но коммерция его не волнует. А тех, кто зарабатывают, она волнует. Им нужен правильный путь обоснованного выбора. Он начинается с анализа. Придётся, заручившись помощью маркетолога, ответить на вопросы, кто пользуется сайтом, кто должен пользоваться, зачем люди приходят на ресурс, какую работу он для них выполняет, понять поведенческие сценарии и реальные потребности целевой аудитории.
Если ресурс уже есть, помогут данные о том, с каких устройств люди приходят сейчас. Но их лучше наложить на информацию абзацем выше, иначе велик риск подстроиться не под тех, кто нужен, а просто под случайное большинство.
Принцип Mobile First или разработки с акцентом на мобильную аудиторию не спасёт, если у вас немобильная аудитория или мобильная, но не хочет таковой быть, а хочет нормальные каталоги на 27-дюймовых мониторах. Здесь много вариантов, поэтому сперва лучше понять, что и зачем делают (будут делать) люди с вашей адаптивной конструкцией.
Давай по-новой, Миша
Всё проанализировано, необходима адаптация. У вас либо есть сайт, либо нет. Это даёт некоторый разброс вариантов:
- Мобилизуем исходный десктопный ресурс
- Переделываем плохую адаптивную реализацию
- Делаем отдельную мобильную версию в дополнение к старой
- Делаем всё с нуля, по-человечески
На сцену выходит наш антагонист — легаси. Когда старый код давно устарел и сто раз переписывался десятком разных людей, он враг всего живого. Но есть шанс, что у вас нормальное веб-представительство, просто его надо актуализировать под другой тип потребления. Или вообще нет наследия, и можно работать с мыслями о настоящем и будущем, а не о прошлом.
Тут мы хотели нарисовать диаграмму, от простого к сложному, но не нарисовали, потому что нельзя точно определить, какой сценарий сложнее. И по правильности ранжировать не получается. Каждый случай будет рассмотрен индивидуально, а вы просто представьте, что вместо этого абзаца смотрите на красивую инфографику, как из Gartner или отчётов Big 4.
Ответом будет сопоставление потребностей и бюджета. Обычно это оптимизация потребностей под бюджет, реже встречаются обратные варианты.
Другими словами, вы знаете, для кого работаете, вы знакомы с текущим состоянием ресурса, знаете свой бюджет и примерно понимаете, чего хотите. Самое время начать переговоры с исполнителями для получения коммерческих предложений.
Что можно сделать, как адаптировать
Бывают случаи, когда можно обойтись фронтовой разработкой — не трогать сервер. Он действительно может быть современным и подходящим для ваших задач, в том числе присутствия на смартфонах. Но есть нюанс. Туман войны Раж перемен провоцирует на дополнительные пожелания, потому что делать так делать. В принципе, разумно. Тогда нужно лезть на сервер. И задачи формируются примерно из такого бэклога:
- Адаптивный дизайн: автоматическая адаптация к разным размерам экранов с сохранением функциональности
- Контент для мобильных устройств: упрощение навигации и структуры, сокращение текстовых блоков
- Адаптивные шрифты: они должны хорошо читаться на маленьких экранах и не быть огромными, можно ввести систему изменения размера шрифта
- Оптимизация мультимедиа: сокращение размеров изображений, видео и анимации для ускорения загрузки страниц, использование дружественных мобильным браузерам файловых форматов, таких как JPEG и WebP
- Ускорение загрузки страниц: минимум HTTP-запросов, сжатие и кэширование, объединение CSS и JavaScript, отключение автозапуска анимаций и видео
- Аспекты UI: все элементы управления, такие как кнопки, ссылки, слайдеры и особенно интерактив, вроде карт, должны быть достаточно большими для работы с пальцами и не вызывать боль; лучше поменять концепцию, чем бесить людей
- Тестирование: проверка на самых распространённых у ЦА устройствах, операционных системах и браузерах
Это не исчерпывающий список, он лишь даёт понимание направлений, в которых могут пойти работы. Каждый случай уникален, потому что в мире очень много возможностей создавать серверы и верстать сайты, огромное количество технологий, которые в сочетании дают множество диагнозов.
Какой именно диагноз у конкретного ресурса, можно сказать после его изучения. Им занимаются разработчики, к которым вы пришли, пользуясь предоставленной вами информацией.
Итак, вы получили понимание, для кого и зачем делаете сайт. Записали это и передали разработчикам вместе с техническим описанием, если такое имеется. Настала пора разработки. Как пойдёт она, зависит от всей предыдущей подготовки, а также от компетенций тех, кого вы выбрали исполнителями задания.
Более подробно все этапы и ценообразование описаны в специальной статье. А сейчас время живых комментариев. Мы расспросили об особенностях мобилизации Юлию Соляник, арт-директора Spider Group.
У Юлии обширный опыт преобразования того, что есть, в то, что нужно, с переработкой интерфейсов, пользовательских сценариев, десятками тысяч экранов и миллионами деталей, которые из бессмысленных стали рабочими. Дизайн именно её команды программируют программисты и используют пользователи (что не умаляет заслуг всех участников процесса, без которых реализовать проект невозможно).
Про главное
Когда ты делаешь адаптацию, важно понимать, что у тебя всё тот же сайт. То есть, там кардинально улучшить всё, сильно приблизить опыт к приложению не выйдет.
Если приоритет у компании на мобильных пользователях, по любым причинам, нет приложения, а большая часть людей заходит с личных гаджетов, тогда однозначно делать Mobile First, сразу делать адаптивный интерфейс, исходя из того, что будет навигационно и визуально идеально смотреться именно на мобильных устройствах, а потом уже делать десктоп на каком-то этапе, адаптировать как бы в обратную сторону. Это идеальный вариант.
Про детали
Что касается деталей, нужно сначала продумывать навигационную архитектуру, то есть все меню, расположение страниц. Трудно идеально адаптировать навигацию для мобильных гаджетов. Это тот же самый сайт, только свёрстанный иначе.
Допустим, если на большой странице у тебя древовидная структура, каталог с глубокой вложенностью и на телефоне, и на десктопе — спокойно проваливаешься в третью, десятую, двадцатую вложенность. И это нормально. В приложении 10 раз проваливаться куда-то глубоко, а потом возвращаться обратно неудобно. Ты должен следить за тем, как человек может перемещаться, как будет заполнять формы, должен исключить длинные анкеты и другие вещи, неудобные со смартфона. Для всего этого есть другие варианты.
Если пытаешься приблизить адаптив к приложению, нужно с большой осторожностью применять всякие таб-бары, нав-бары, потому что это и работать будет не так хорошо, и выглядеть будет не так хорошо, как в приложении. Мы заложники браузеров. У нас рендеринг, гайдлайны — всё проходит через браузер, как сквозь мутную призму, которая снизит скорость и докинет артефактов, вроде стандартной навигации, которую в принципе нельзя убрать, можно только временно сдвинуть, но всё равно придётся учитывать.
Где тонко, там и порвётся. К тому, что у тебя куча разных смартфонов и версий операционных систем, добавляется куча браузеров и их версий. Ты должен понимать, что будешь адаптировать весь дизайн под совершенно другие разрешения.
Есть разные элементы, на которые в десктопе ты даже не обратишь внимание. Картинки, области для кликов, каталоги, таблицы. Вот таблицы ты не можешь нормально показывать. Допустим, каталог техники — бытовой, компьютерной. Любые большие табличные данные, особенно со сравнениями по характеристикам. Здесь нужно изгаляться и делать совершенно по-другому, потому что есть строгие ограничения по горизонтали и вертикали, гораздо строже, чем на десктопе.
То же самое вообще со всеми интерактивными элементами, полями и так далее. Когда тыкаешь курсором, это работает, а когда пальцем, то он не попадает в твои жалкие 12 пикселей.
Придётся учитывать жесты. Хрестоматийный пример: у тебя есть карта с адресом офиса или доставки. У неё будет свой пинч (жест двумя пальцами для изменения размера — прим. ред.). Если попадёшь, будешь скроллить карту, а если нет, то весь браузер. Мало кто попадает. И это нельзя исправить, изменить, так работает браузер. Даже если ты напишешь свой браузер, это не исправить, потому что у операционных систем свои правила. Можно лишь находить удачные альтернативы.
Адаптация — это не просто перестроение в сетке макета, одно другим заменить, растянуть и так далее. Это работа со всеми отдельными элементами под другую логику взаимодействия. Какой-то контент ты можешь показывать в виде листалки, карусели карточек, что-то ты на десктопе в три колонки поместил, а на мобилке нет никаких трёх колонок, и человек не будет по экрану скроллить, угадывая, что за его пределами.
Почему сайт не приложение
Можно сайт сделать, как приложение. Точнее, можно постараться. Надёргать удобные элементы интерфейса, повторить привычный паттерн поведения. Если повезёт, это будет работать почти так же, как в приложении. Но будут нюансы.
Это может просто не получиться, потому что сайт и приложение — два совершенно разных продукта. Проще из сайта сделать приложение, то же PWA (Progressive Web App — прим. ред.), потому что ты в самом деле можешь просто повторить логику сайта. Но повторить приложение на сайте — это надо иметь подходящие задачи и очень подходящий сайт.
Как надо
Добавлять нормальную вёрстку в готовый сайт — очень неблагодарное занятие. Когда у нас ребята верстают, они берут сразу минимум два макета, десктоп и мобильный.
Может не быть отдельных макетов под промежуточное звено, вроде планшетного, потому что относительно редкий сценарий. Но адаптация со всеми разрешениями должна быть обязательно, потому что всё сразу закладывается в вёрстку: размеры шрифтов и размеры блоков, что куда переезжает, ведь это всё единый код, это грузится целиком и верстается сразу.
Это не две разные вёрстки, типа на телефон подгружается этот кусочек, на десктоп — тот. Всё сразу, единое. Для примера, размеры картинок. У тебя есть картинки для ПК и есть для мобилки, надо постараться сделать так, чтобы десктопные с 5000 пикселей по стороне не грузили телефоны. Уже должно быть определение, с чего ты зашёл, у сайта должны быть оба варианта. А это верхушка айсберга.
В любой непонятной ситуации начни с Mobile First. Ты всё равно туда придёшь, и лучше, если там не будет большой засады.
Далее: Разработка приложения для магазина. Этапы, цены, опыт Spider Group
В Spider Group на вас работает более чем двадцатилетний опыт в разработке приложений, вебе, серверных проектах, дополненной реальности, искусственном интеллекте и интернете вещей.
