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

pageblock_iconКонтекстная реклама
pageblock_icon11 июня 2021
pageblock_icon20 просмотров
pageblock_iconСредняя сложность
pageblock_icon8 минут
Поделиться

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

Содержание статьи:


Встает вопрос, чему отдать предпочтение – адаптивной верстке или мобильной версии. Поговорим об этом в статье.


Адаптивный дизайн

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

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

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

Адаптивный дизайн в свою очередь – это дизайн, который автоматически подстраивается под кран устройства.


 picture 15-4.png  picture 15-2.png


Зачем нужен

При разработке сайта учитывайте, что он будет отображаться на разных устройствах. Будьте к этому готовыми.

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

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

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


В чем сложность

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

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

Поэтому иногда проще создать новое, чем тратить время на перенос старого.

Юзабилити для мобильных, адаптивность и удобство пользователя – факторы для ранжирования Google и Яндекс. К ним также относят:

  • скорость загрузки страниц на устройствах;

  • навигация;

  • отсутствие мелких элементов, которые не воспринимаются на уменьшенных экранах;

  • адаптивный шрифт:

  • нет элементов за пределами страницы, которые не отображаются на экране.

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


Проверка адаптивности

Возможна в браузере, без подходящих сервисов. В Mozilla – это сочетание клавиш Ctrl + Shift + M, в Google - Ctrl + Shift + I или F12, а потом клик по Toggle Device Toolbar (иконка эмуляции устройства).

Или же проверить адаптивность можно в сервисе Google «Проверка оптимизации для мобильных».

А какой экран учитывают первым при разработке

Подхода два:

  1. Основа – это экран смартфона, а потом верстка меняется по мере увеличения экрана.

  2. Основа – это экран среднестатистического компьютерного монитора, а потом работа идет над отображением элементов на уменьшающимися экранами.

Ранее в большинстве случаев пользовались вторым подходом, теперь же предпочтение отдают первому. Концепция называется Mobile First, логичная изначально, проще реализовать.


 picture 15-1.png  picture 15-3.png


Правила адаптивного дизайна

1. Четкие размеры макетов. Ориентироваться стоит на брейкпоинты, конкретные разрешения экранов, на которых размеры меняются.

Смена экрана будет зависеть от устройства, на котором откроется сайт: уменьшаются или увеличиваются элементы, исчезают или добавляются.

Для смартфонов размер экрана – 320, 375, 425+ пикселей;

Для компьютера – 1280+ пикселей;

Планшеты – 768+ пикселей и нетбуки – 1024.

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

3. Блок-контейнер. В него отправляют группу элементов, которые присутствуют на странице. Нужен для относительного позиционирования объектов, с которыми возникают сложности расположения относительно друг друга.

4. Отсутствуют сдвиги блоков. При таком условии просмотр страниц - пытка для пользователя.

5. Формат. Если изображению нужно минимум детализации – выбираем векторную графику, если детализация на максимум – это дело растровой. Также не забывайте о компрессии на всех медиа.

6. Шрифт. Дизайнерский шрифт это красиво и выделяет среди конкурентов, но приносит проблемы. Часто они платные и увеличивают время загрузки страниц. Ищите компромисс – либо неповторимый шрифт, либо шаблонный и приятный, который сопровождается быстрой загрузкой сайта.


В чем разница между адаптивной версткой и мобильной версией

Разница в количестве. При адаптивной верстке – это один ресурс, который подстраивается под размер экрана.

А при мобильной – это отдельно разработанный сайт, с дизайном, функционалом. Разработка ведется под выбранный размер устройства с возможностью адаптироваться под другие размеры экранов.

Требования для мобильной версии

Изначальные цели разработки:

  • создание условий для просмотра страниц;

  • удобная навигация;

  • беспрепятственное взаимодействие с элементами сайта;

  • увеличение скорости загрузки страниц.

Также, стоит обратить внимание:

  • какое направление используется для редиректа на мобильную версию. Должно быть 302;

  • активация индексации JS;

  • действие viewport, который используется для указания места экрана, где виден скролл страницы.


Что так же стоит учитывать при разработке

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

  2. Размещайте короткие формы. Мобильная аудитория быстрее, поэтому ценит время и вряд ли станет заполнять длинную форму заказа. Оставьте ФИО, адрес почты, мобильный, город и адрес.

  3. Поработайте над скроллингом и увеличением элементов. Такие процессы не должны быть затруднены.

  4. Сделайте номер телефона горячей клавишей. При нажатии на него, пользователя сразу перенаправляет на звонок.

  5. Добавьте автозаполнение. Кто делает заказ повторно, оценит удобство.

  6. Вернуться в меню или на главную возможно с любой страницы сайта.

  7. Минимальный размер шрифта 12 пикселей. Но чтобы сделать текст читаемым, используйте лучше 14 или 16.

  8. Интерактивные элементы располагайте подальше друг от друга, чтобы на них было удобнее нажимать.

  9. Горячие клавиши, по типу позвонить, заказать делайте заметными.


Что же выбрать

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

Итак, мобильная версия – это быстрая загрузка и проработка элементов. Но выглядит хорошо не на всех экранах смартфонов. Функционал будет только базовый, разнообразие полной версии отсутствует.

Адаптивная верстка –поддержка дешевле, контент читаем на экранах различающихся размеров. Если страниц много, то такой формат станет тормозить.

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

Со стороны продвижения, лучше выбирать адаптивную верстку:

  • стили и настройки будут едиными, это упростит устранение ошибок;

  • затраты на обслуживание снизятся;

  • поисковые роботы предпочитают единую версию, которая будет понятна пользователю на всех разрешениях.

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

 
 
 
Скидка на разработку сайта 15%
при оставлении заявки на разработку до 25.03.2021
Поставить лайк
Добавить комментарий
Ваше имя и E-mail не будут опубликованы.
Отправляя данные, вы разрешаете обработку персональных данных и соглашаетесь с Политикой конфиденциальности.
Получить коммерческое предложение в WhatsApp
/blog/kontekstnaya-reklama/adaptivnaya-verstka-ili-mobilnaya-versiya/