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

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

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

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

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

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

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

Зачем нужен

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

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

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

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

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

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

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

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

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

• навигация;

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

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

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

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

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

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

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

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

Подхода два:

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

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

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

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

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. Горячие клавиши, по типу позвонить, заказать делайте заметными.

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

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

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

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

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

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

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

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