Мобильная версия или адаптированная верстка: делаем выбор

Доля пользователей сети Интернет, которые для входа используют мобильные гаджеты, растет с каждым годом. Переломный момент произошел в 2018 году, когда количество «мобильных» и «стационарных» пользователей сравнялось, а потом первые пошли на обгон. По статистике на 2022 год мобильными устройствами для просмотра сайтов так или иначе пользуется 70% людей.

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

Поэтому разработчики придумали адаптивный дизайн.

Термины и определения

Адаптивный веб-дизайн (англ. «responsive web design») — вид дизайна, который предполагает корректное, заранее задуманное отображение страниц интернет-ресурсов на различных устройствах, которое в динамическом формате подстраивается под параметры браузера.

Термин впервые озвучен в 2011 году в книге американского веб-дизайнера Итана Маркотта «Отзывчивый веб-дизайн» («Responsive Web Design»).

При формировании адаптивного дизайна важно, чтобы:

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

Особенности адаптивной верстки

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

Кроме того, требуется учитывать и стандартные требования юзабилити:

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

Далее приступают к созданию. Здесь центральным параметром становится решение, какой вариант экрана использовать в качестве эталонного. Раньше предпочитали использовать размер стандартного монитора, который переделывали под меньшие форматы. Теперь преимущественно главным считают размер экрана смартфона, который перерабатывают для больших разрешений стационарных устройств.

Если решили выбрать адаптивную верстку интернет-ресурса, то обратите внимание на следующие детали:

• Относительность координат.
  Каждое устройство характеризуется собственной плотностью пикселей на единицу площади. Поэтому даже при одном разрешении на различных устройствах внешний вид страниц различается. Чтобы этого избежать, вводят относительный показатель для последующего выстраивания отображения. Как правило, проставляют отношение расположения блока к верхней границе экрана или левому верхнему углу.
• Размер блоков.
  Информационные блоки при различных разрешениях характеризуются разным размером, что логично. Величина этого изменения зависит от конкретных настроек отображения, заданных пользователем. Это позволяет избежать того, что элементы расползаются, появляются полосы горизонтальной прокрутки и проч. Стандартными значениями по умолчанию считают: для смартфонов — 320px и выше; для мониторов ПК — 1280px и выше; для планшетов — 768px и выше; для нетбуков — 1024px.
• Формат графики.
  На экране главным параметром при отображении графических элементов становится степень детализации. Поэтому дизайнеры выбирают формат, учитывая минимальный размер. Для маленького экрана предпочитают векторную графику, для большого — растровую. Также не стоит забывать об оптимизации изображений для уменьшения «веса», что важно для скорости мобильного трафика.
• Шрифты.
  Нестандартный шрифт становится отличительной чертой дизайна интернет-ресурса. Заказчики регулярно поднимают этот вопрос. И если платных вариантов для ПК при наличии бюджета разработано достаточно, то с адаптированной модификацией сложнее. Корректные варианты пересчитываются по пальцам, а о детализации и прочем речи не идет. Кроме того, нестандартный шрифт утяжеляет страницы, а это значит, ниже скорость загрузки. Пользователи воспринимают это негативно.
• Относительная ориентированность блоков.
  Для интернет-ресурсов дизайнеры регулярно прибегают к вложенному отображению элементов. Это привлекает внимание и радует посетителей. Адаптированная же верстка, ориентированная на относительность координат, не позволяет вложенности. Просчитывать дорого, да и нет гарантии, что предусмотрели каждый вариант отображения. Логичный вывод: дизайн упрощается.

Особенности мобильной версии

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

Стандартные требования:

• удобная навигация;
• корректность и комфорт при просмотре страниц;
• уменьшение «веса» сайта под стандарты мобильного трафика и проч.

Еще один момент: настройка переадресации и функционала JavaScript. Так как в итоге получаем полноценный, но отдельный сайт, то этот вопрос тщательно прорабатывают заранее.

Если решили создавать полноценную мобильную версию интернет-ресурса, то в фокусе следующие детали:

• Упрощение авторизации и форм.
  Для мобильных устройств нет необходимости в сложной авторизации, хватает подтверждения по SMS. Добавьте к этому неудобство заполнять объемные и длинные формы через телефон и поймете, что стандартные формы придется основательно переработать, к счастью, в сторону облегчения.
• Автозаполнение.
  Формы упростили, но некоторые поля необходимы. Чтобы облегчить пользователям работу на интернет-ресурсе, пользуйтесь функцией автозаполнения при повторном вводе аналогичной информации.
• Нет pop-up-элементам.
  Всплывающие окна раздражают посетителей. Однако на стандартном сайте это лишь небольшая всплывающая область внизу, иногда в центре, но легко закрываемая одним кликом «мыши». На мобильном устройстве эта операция усложняется и засоряет страницы. В итоге — волна раздражения и уход клиентов.
• Навигация доступна везде.
  Зачастую на мобильных устройствах страницы длинные, приходится прокручивать достаточно долго, а пользователи этого не любят. Если зачитавшись интересными сведениями страницу досмотрят, то перейти на другую могут полениться. Поэтому убедитесь, что из любой точки сайта доступен выход на главную или в меню. Это небольшие иконки, жестко закрепленные, как правило, в верхней части экрана.
• Следите за шрифтом.
  Экран мобильного телефона некрупный, поэтому нередки ситуации, когда клиенты с трудом разбирают мелкий шрифт. Не делайте так. Размер шрифта 14-16px, минимальный — 12px.
• Интервалы и размеры кнопок.
  Стремясь сэкономить место, дизайнеры могут уменьшить расстояния между блоками или кнопками. Это ошибочное решение. Функционал «мыши» в смартфоне заменяет палец, который имеет набор физических параметров. Мелкие кнопки или ссылки невозможно нажимать, не вызвав ненужных перемещений по странице или перещелкиваний, особенно если ссылки расположены рядом. Быстро вызовете негатив и потерю клиентов. Аналогично относительно кнопок — следите за размерами.
• Активный номер телефона.
  Изначальная функция смартфона — звонок. Поэтому логично, чтобы на сайте автоматически выделялись номера телефонов с предоставлением мгновенного звонка.

Плюсы и минусы

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

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

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

Стоимость адаптированной верстки также меньше, ведь это не полноценный интернет-ресурс, а только «игра дизайна».

Заключение

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

Точно утверждаем, что тот или иной вариант необходим на 100%. Ведь доля интернет-пользователей растет. Не следуя этим условиям, рискуете проиграть в конкурентной гонке.

Интернет-агентство U-sl+Мирмекс разработает для вашего сайта любой из озвученных вариантов, проведет настройку, поможет организовать длительное функционирование и проведет улучшения по мере необходимости. С нами ваш сайт станет только лучше!