Всем привет! Меня зовут Айрат, я frontend-разработчик IT-компании SimbirSoft. Поговорим о такой теме, как адаптивная верстка.
ДИСКЛЕЙМЕР: адаптив для сайта как явление на языке мемов уже смело можно назвать «баяном», впервые в России он появился в 2012 году (10 лет назад, Карл!). Даже React – самая популярная на данный момент библиотека для UI-разработки вышла только год спустя. И, наверное, вы подумали: «Да что тут читать? Даже у сайта булочной есть адаптив под мобильные устройства». Справедливое замечание... Мы тоже так думали, но не тут-то было. Представьте наше удивление, когда за последние полгода чуть ли не каждый второй клиент обязательным требованием выставляет наличие адаптивной верстки для сайта. Удивляет нас это потому, что адаптив – опция «из коробки» для каждого нашего проекта, на которой мы даже не акцентируем внимание. Всем же понятно, что он должен быть. Оказывается, нет…
В этой статье попробуем разобраться, чем отличаются различные подходы в разработке приложений и сайтов с точки зрения визуализации интерфейса, чтобы помочь вам сделать выбор в пользу той или иной технологии в зависимости от ваших задач.
Я из того поколения, для которого ГАДЖЕТЫ («гад же ты» – Примечание для тех, кто родился после 2000-х) было оскорблением, а не устройством. Сейчас я тоже люблю рано утром выйти в Интернет, подышать свежим онлайном.
Общее количество пользователей гаджетов растет, что, разумеется, оказывает влияние на работу компаний по веб-разработке. По данным SimilarWeb, доля трафика с мобильных устройств лидирует, отрыв от компьютеров значительный – 65,5% против 32,2% (по данным за ноябрь 2022 года). Прогноз Ericsson также показывает рост мобильного трафика. Всё это говорит о том, что возможность использования ресурса с мобильного устройства – уже давно must have для любого публичного приложения/сайта (в данной статье я сосредоточился именно на приложениях для потребителей).
Вариантов решения тут может быть несколько:
создаем отдельную мобильную версию
прибегаем к адаптивной верстке
вводим запрет на использование мобильных телефонов при интернет-серфинге и работаем дальше в том же духе, ничего не меняя. Шутка:)
Во многих сервисных IT-компаниях, как наша, адаптив – неотъемлемая часть процесса разработки. Но некоторые небольшие или молодые аутсорсеры делают его в рамках отдельной услуги. Это право каждого – рассудит всех клиент, который проголосует рублем.
Из-за чего весь сыр-бор... Почему возник вопрос?
Текущая ситуация в мире так или иначе влияет на рынок IT-решений, вынуждает подстраиваться под меняющиеся потребности, ограничения и возможности, требует своевременных и взвешенных решений от разработчиков.
На сайте Apple висит баннер со следующей информацией: «Вот уже более 10 лет App Store выступает в качестве надежной и безопасной площадки для поиска и скачивания приложений... …Это источник инноваций, которые дарят вам радость и открывают новые возможности». Охотно верится, но, как мы сейчас уже понимаем, наряду с открытием новых возможностей может быть и закрытие уже имеющихся.
Компания, которая ранее успешно находила клиентов с помощью мобильного приложения, в одночасье может лишиться этого. Поскольку ее приложение, создаваемое неимоверными усилиями сотрудников, пройдя сотни тестов, борьбу с дизайнерами и аналитиками, ночные релизы и хотфиксы, просто исчезло из магазина или стало недоступным для какой-либо страны. К сожалению, таких кейсов в последнее время мы видим достаточно много.
Чтобы картина стала более полной, вот вам интересное наблюдение. Рассмотрим 2 кейса.
Случай первый
Одна социальная сеть была заблокирована у нас задолго до 2022 года. Но, как это обычно бывает, блокировка есть, но пользоваться никто не запрещает. К слову, у неё есть и десктопная, и адаптивная версия, а также мобильное приложение, которое система при входе на сайт со смартфона предлагает скачать.
Однако, пройдя по ссылке, вы будете разочарованы, ведь такой страницы не существует! Официальный сайт говорит о том, что приложение существует, а по факту его нет: оказывается, в вашей локализации оно недоступно. Особо «хитрые» персоны, которые жаждут заполучить приложение, а использование веб-версии в мобильном браузере противоречит их натуре, включают VPN и пытаются поменять страну в магазине приложений. Но и тут их встречает сюрприз – это можно делать не чаще одного раза в год!
Вопрос: стоит ли ради одного-двух приложений, недоступных в текущей локализации, отказываться от всех остальных? Еще более фанатично настроенные персонажи могут, конечно, попытаться создать для скачивания фейковый аккаунт… Но вы, наверное, уже устали от налета конспирологии в этом кейсе. Я это к чему: может будет удобнее просто пользоваться адаптивной версткой, чем проворачивать подобные схемы?
Случай второй
Теперь рассмотрим отечественные продукты. Ситуация с ними в чем-то даже сложнее. Я рассмотрю на примере одного приложения, которым пользуюсь почти каждый день. В какой-то момент оно стало недоступно в аппсторах для некоторых операционных систем, причем как десктопная, так и мобильная версии. Причины этому были разные – от банального исчезновения продукта из магазина до отзыва лицензии разработчика у производителя.
Если изобретать пути решения подобной проблемы, первое, что приходит в голову – установка не через аппсторы, а из файла. Потребуется отключить ограничение на установку приложений из недоверенных источников (если такая функция присутствует), но это может привести к неприятным последствиям в ключе безопасности. Да и нет гарантий, что оно будет работать. В этом случае остается 2 пути: смена ОС на «более дружественную» либо использование веб-версии. Какой из вариантов проще, решать вам.
Важный момент – это приложение снова появилось в аппсторах. Магазин вернул и его, и лицензию. С одной стороны, я вздохнул с облегчением… С другой стороны – гарантий возврата не было, как и с некоторыми другими приложениями. Именно поэтому адаптивная верстка сегодня приобретает второе дыхание. Это довольно экономичное и удобное решение. Однако у нее есть как плюсы, так и минусы.
Адаптация под мобильные устройства или отдельная мобильная версия – что выбрать?
Суть отличий не нова, но все-таки:
В случае наличия отдельной мобильной версии сервер перенаправляет на нее пользователей смартфонов. А это значит, что она размещается на отдельном URL-адресе, например, m.magicsite.ru или mobile.magicsite.ru.
Адаптивная верстка отличается внесением изменений на уровне CSS и HTML. Решается дополнительной работой опытного верстальщика, который под каждый браузер подберет идеальное, ну или почти идеальное, решение. В этом случае URL-адрес сайта не меняется, контент тоже.
Что следует учесть:
Производство отдельной мобильной версии сайта будет намного дороже, чем адаптация основной.
Поскольку мобильная версия представляет собой отдельный сайт, потребуются дополнительные ресурсы для подготовки контента, управления, обслуживания и SEO-продвижения.
Мобильная версия адаптирована только под конкретные мобильные устройства.
На предыдущих проектах я сталкивался с кодом, где адаптивная вёрстка представляла собой использование двух шаблонов на одной странице – для десктопного и мобильного отображения. Появление или исчезновение той или иной части кода подвязано к ширине экрана устройства пользователя посредством активации медиа запросов: ненужный код скрывается с помощью css-стиля display: none. При этом не удается избежать следующих проблем:
Любое дублирование контента, заголовков, описаний на странице создает проблемы с поисковыми системами. Google игнорирует содержание скрытых блоков, а Яндекс, напротив, принимает во внимание весь контент страницы. Понятно, что такой подход далек от идеального.
Разработчику приходится дублировать код, а значит и сайт будет загружаться медленнее. Это тоже неверный подход к технологии RESS.
Однако, кроме боязни не потерять приложение в аппсторе, адаптив – это единая версия сайта, которая лишена проблем, возникающих из-за использования нескольких URL (мобильного и основного). Легче проводится и SEO-продвижение сайта.
Адаптивная версия подойдет вам, если:
– Вам нужно подобрать общий вариант для большинства устройств.
– У вас есть один домен и нет желания проводить SEO для мобильной версии отдельно.
Мобильная версия имеет преимущества в скорости загрузки. Очевидными плюсами являются удобный дизайн и возможность выбора основной и мобильной версии.
Однако наряду с урезанным функционалом, мобильная версия – это отдельный сайт, поэтому его разработка и поддержка требует дополнительного времени и денег. Однако следует иметь ввиду, что и из-за широкого диапазона диагоналей устройств, верстка обычно рассчитана только на самые ходовые варианты.
Мобильная версия подойдет вам, если:
– Вы хотите дополнить дизайнерские решения, адаптированные именно под мобильные устройства.
– Ваш SEO-специалист просит выделить ему дополнительную нагрузку.
Еще одним решением является PWA (Progressive Web Application) – прогрессивная технология запуска веб-страницы в качестве приложения.
Назовем основные преимущества PWA:
Минимизация затрат на разработку, потому что используется одна и та же версия под Android и iOS.
Создание PWA из готового сайта будет быстрее, чем разработка приложения.
PWA-приложения занимают меньше места в смартфоне.
Посредством PWA можно работать с нативными возможностями смартфона: камера, GPS и т.п.
-
PWA достаточно просто устанавливается на мобильное устройство.
Недостатки PWA:
Достаточно меньший трафик. Например, любители «яблочной» продукции могут скачать приложения только с App Store. Поэтому этим трафиком придется пренебречь. Загружать PWA в Google Play и App Store можно, но пройти там модерацию значительно сложнее.
PWA поддерживает не полный перечень нативных функций устройства. Поскольку PWA запускаются в браузере, они не имеют прямого доступа ко всем возможностям платформы в отличие от собственного приложения, созданного с использованием SDK. Например, не получится использовать Touch ID, Face ID, Bluetooth и ряд других опций.
Увеличивается расход заряда батареи устройства. PWA не позволяет полностью контролировать этот момент, поскольку эту роль берет на себя браузер.
PWA подойдет вам, если:
– Если необходимо разработать кроссплатформенное приложение под мобильные устройства при ограниченном бюджете.
– У вас планируются частые обновления, изменения контента, разделов, объявлений или имеется чат обсуждения.
– У вас мало времени, но при этом основной сайт уже готов.
Вместо вывода: мои наблюдения
В этой статье я лишь хотел поделиться своими наблюдениями, почему адаптивной верстке сейчас уделяется такое пристальное внимание. Хотя, казалось, что тут уже давно нет ничего экстраординарного.
Подводя итог, отмечу, что сегодняшние концептуальные решения в области разработки IT-продуктов позволяют в любых обстоятельствах успешно закрывать потребности бизнеса и потребителей. Но для этого и заказчик, и его подрядчик (или внутренний IT-отдел) должны:
ясно понимать, с чем придется столкнуться в период работы приложения;
учесть все нюансы и конъюнктуру рынка, спрогнозировать его возможные изменения, а их мы с вами наблюдаем почти каждый день;
обязательно учесть специфику потребителя, включая его переменчивое настроение.
В завершение поделюсь ссылками на статьи, которые также могут заинтересовать:
Hidden text
О PWA:
Об адаптиве и мобильной версии:
Больше кейсов и полезных материалов в наших каналах: