Статья дополнена в ноябре 2020 года

Адаптация сайта обязательна для всех типов проектов. Трафик с мобильных устройств постоянно растет. Сейчас, в 2020 году, аналитики отмечают более 53% посещений онлайн-ресурсов со смартфонов и планшетов, и статистика с каждым годом растет. Адаптированная версия необходима, чтобы пользователи не испытывали неудобств при посещении страницы с мобильного устройства.

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

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

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

Адаптивная верстка. Что это такое и зачем она нужна

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

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

Контент, содержание проекта отображается на разных устройствах индивидуально. В зависимости от размера экрана. Упрощенный пример:

на обычных мониторах и ноутбуках – во весь экран;
на планшетах – в две колонки;
на смартфонах – в одну колонку.

Проходит адаптация всех составляющих контента:

кнопок;
шрифтов;
анимации и прочих визуальных составляющих.

Они не обязательно уменьшаются, но также может меняться их вид, положение, особенность отображения.

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

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

Почему так важна адаптация сайта

Адаптив – это не модное направление, не простое желание выделиться на фоне конкурентов. Это острая необходимость. В частности, для коммерческих проектов.

При посещении веб-ресурса потенциальные покупатели предпочитают видеть действительно удобную платформу, с простым и понятным интерфейсом. Они не хотят делать дополнительные, абсолютно ненужные действия, среди которых:

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

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

Если всего этого не будет, аудитория просто покинет ресурс (очень быстро!), так и не совершив целевого действия. Когда человек не может в течение нескольких секунд понять, какие кнопки нужно нажимать и где они находятся, то испытывает как минимум раздражение. Учитывая повальную конкуренцию практически в любой бизнес-сфере, покупатели начинают искать альтернативу. В итоге они уходят к конкурентам, сайт – получает огромное количество отказов. Как результат – недополученная прибыль и падение позиций в поисковой выдаче.

Преимущества адаптивной версии. Таблица

Преимущество	Пояснение
Рост конкурентоспособности	Отсутствие адаптивки – гарантированная потеря примерно 50% потенциальных клиентов. Ведь, как показывают профильные исследования, именно таков объем мобильного трафика. Если проект не адаптирован, он проиграет конкуренцию.
Расширение аудитории	Как уже отмечалось выше, около 50% трафика (и это минимальный показатель), идет с мобильных гаджетов. Хотите расширить аудиторию проекта? Вы знаете, что нужно делать!
Увеличение доходов	Трафик идет с двух направлений – десктопов и «мобилок». Соответственно, растет прибыль. Кроме того, повышаются позиции в поисковой выдаче, что обеспечивает еще больший приток посетителей.
Простота обслуживания	Все страницы находятся по одному адресу, сохраняется целостность сайта. Управление осуществляется из одной админки. Изменение информации, контента в десктопной версии приводит к автоматическим изменениям в адаптивной.
Повышение позиций в поисковой выдаче	При ранжировании в поисковых системах обязательно учитывается наличие адаптивной версии.
Универсальность	Адаптация сайта делает проект более универсальным. Им смогут пользоваться все, независимо от устройства. Доступными остаются абсолютно все элементы, кнопки, функции. Они отображаются корректно, работают без сбоев.

Как понять, нужна ли адаптивная версия

В принципе, сегодня она должна быть по умолчанию. Доля мобильного трафика постоянно растет, он уже лидирует.

Если адаптивки пока еще нет, легко проверить, нужна ли она вам вообще. Для этого нужно провести анализ конкурентов, проверить данные. Если объем посетителей с мобильных устройств уже превысил 10% от общего числа, то создание адаптивной версии назрело. Хотя, повторимся, сегодня она должна быть по умолчанию.

Однако остается несколько случаев, при которых выполнять подобные работы не стоит:

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

Но стоит отметить – сегодня даже такие трудности вполне реально решить, просто адаптация сайта потребует чуть больше времени.

Мобильное приложение VS адаптивный веб-ресурс: что лучше и почему

Сайт для мобильных устройств может быть представлен в трех вариантах:

мобильная версия;
мобильное приложение;
адаптивная версия.

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

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

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

Как правильно проводится адаптация сайта: 5 этапов

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

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

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

1. Планирование и проектирование

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

2. Формирование прототипа

Сначала проводятся обсуждения:

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

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

3. Верстка, тестирование

Это еще не готовая к реализации версия. Её можно считать черновиком, который предварительно тестируется и анализируется. Может быть проработано несколько вариантов – расположения кнопок, структуры, изменения форматов окна. После чего определяется оптимальный вариант.

Также на этом этапе прорабатывается структура html-кода.

4. Визуальное оформление

С десктопной версии переносятся все основные визуальные элементы оформления:

картинки;
фотографии;
иконки;
и другие.

Сохраняется цветовая гамма проекта.

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

5. Детальное тестирование

Последний этап – комплексное тестирование готового проекта. Профильные специалисты проверяют:

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

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

Различные типы адаптированных макетов

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

В случае если на страницах много блоков, то они перемещаются друг за другом вниз. Этот вариант идеален для интернет-магазинов, хотя и для других сайтов также подходит.

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

Помимо настройки непосредственно самого макета, верстальщики обязательно использует медиазапросы или скрипты. Они необходимы для того, чтобы придать элементам нужные css-свойства, активируемые при изменении размера экрана. Вот несколько примеров:

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

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

Основные принципы, которым должен соответствовать адаптированный проект

Адаптация сайта – процесс относительно сложный. Важно учесть множество деталей, требований. Ниже приведены основные принципы, которые нужно соблюсти.

Отсутствие горизонтальной прокрутки содержимого.
Выпадающее меню, оптимизированное под разные устройства.
Оптимальный масштаб всех интерактивных блоков.
Необходимое для удобного пользования расстояние между кликабельными элементами, в том числе – ссылками. Это важно для работы с площадкой пальцами.
Плавная перестройка блоков, элементов при изменении разрешения экрана.
Оптимальная длина строк – от 45 до 80 символов в строке – и правильный межстрочный интервал для удобного чтения;
Гибкость картинок.
Упрощенная навигация.
Легковесные страницы, обеспечивающие быструю загрузку, но не снижающие функциональность и производительность веб-площадки.
Сегментирование наполнения – не основные, не важные функции и материалы скрыты.

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

Адаптация сайта и 7 ошибок, которые допускаются чаще всего

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

1. Незаметные активные элементы и мелкий шрифт

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

Нельзя делать слишком мелкими:

интерактивные блоки;
кнопки;
призывы к действию;
формы для заполнения;
и т.д.

И помнить – даже если шрифт хорошо видим на экране монитора персонального компьютера, он может оказаться нечитабельным на экране девайса – минимальный размер 12px.

2. Блоки с прокруткой

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

Выход – либо изначально предусмотреть демонстрацию в полную высоту, либо раскрывать блок по клику.

3. Запуск сценария при наведении/касании

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

4. Не сворачивающееся меню

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

с прокруткой;
просмотром материалов;
использование функций;
и прочими операциями.

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

5. Проблемы с загрузкой страниц

Длительная загрузка – плохо. Страницы должны открываться максимально быстро. Показатель напрямую зависит от размера страницы, ее наполнения, «тяжести» элементов. Важно устраивать все детали, правильно распределить контент по отдельным вкладкам, что позволит снизить вес наполнения.

Кроме того, на скорость открытия оказывают непосредственное воздействие:

картинки;
скрипты;
файлы CSS.

Чтобы уменьшить вес элементов, применяются специализированные, профильные инструменты и сервисы.

6. Отсутствие предварительного анализа ЦА

Даже если изучение целевой аудитории проводилось перед разработкой десктоп-сайта, это не повод игнорировать анализ ЦА, которая будет пользоваться адаптивкой. Поскольку требования, потребности пользователей в первом и втором случае будут существенно отличаться.

Такие аналитические исследования необходимы, чтобы понять:

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

7. Отсутствие тестирования

После завершения разработки, следует провести как можно более глубокое тестирование. Это позволит оценить качество проекта.

При тестировании:

проверяется общая функциональность;
выявляются ошибки;
проверяются основные маршруты посетителей;
и так далее.

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

Что дает адаптация сайта: 3 важных момента

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

1. Простота навигации

У пользователей не возникает трудностей с навигацией по веб-площадке. Присутствует только вертикальная прокрутка, а горизонтальная обязательно исключается.

Среди прочих составляющих простой навигации:

понятная и удобная система поиска;
кнопка «Домой»;
кнопка «Вверх» или «В начало страницы»;
кнопка «Назад».

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

2. Удобство чтения

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

3. Простота выполнения целевых действий

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

просмотра материалов;
просмотра карточек товаров;
добавления товаров в корзину;
оформление заказа;
подписки;
оплаты;
и так далее.

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

Как проверяется адаптация сайта

Мы уже отмечали выше, что создание адаптивки позволяет повысить даже результаты поисковой выдачи основного сайта. Это связано с введением поисковой системой Google принципа Mobile First. Суть его состоит в том, что при ранжировании обязательно учитывается наличие адаптированной версии.

Определить, правильно ли выполнена адаптация сайта можно даже фактически вручную:

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

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

Google Mobile Friendly;
I love adaptive;
средства от Bing;
и другие.

Пользоваться подобными сервисами обычно просто. Достаточно зайти на них и ввести в строку адрес веб-площадки.

Подводя итог

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

Адаптация сайта под разные разрешения

Content

Адаптивная верстка. Что это такое и зачем она нужна