Адаптивная вёрстка

Возможность использования ресурса с мобильного устройства – уже давно must have для любого публичного приложения/сайта (в данной статье я сосредоточился именно на приложениях для потребителей).

Вариантов решения тут может быть несколько:

создаём отдельную мобильную версию;
прибегаем к адаптивной верстке;
вводим запрет на использование мобильных телефонов при интернет-сёрфинге и работаем дальше в том же духе, ничего не меняя. Шутка :)

Из-за чего весь сыр-бор... Почему возник вопрос?

Текущая ситуация в мире так или иначе влияет на рынок 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-отдел) должны:

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

В завершение поделюсь ссылками на статьи, которые также могут заинтересовать:

О PWA:

Об адаптиве и мобильной версии:

Адаптивная вёрстка

Из-за чего весь сыр-бор... Почему возник вопрос?

Адаптация под мобильные устройства или отдельная мобильная версия – что выбрать?

Вместо вывода: мои наблюдения

Report Page