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

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

Гаджеты бывают разные

На данный момент из 82 миллионов российских пользователей по крайней мере 50 миллионов время от времени используют мобильные устройства для выхода в сеть. Смартфоны, планшеты, smart-tv и даже часы на различных операционных системах имеют разные разрешения и по-разному выводят сайты, создавая различные неудобства для пользователя. 

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

Мобильные устройства с функцией touch screen «заточены» под использование пальца как основного метода ввода. Совершенно очевидно, что для таких устройств недостаточно обычных кнопок, здесь нужны крупные кнопки «под палец».

Отображение сайта через инновационные ЖК-мониторы с высоким разрешением QUAD HD или с технологией Retina также может выявить недостатки. Сайт может выглядеть слишком маленьким и занимать от 30% общей площади развернутого окна браузера. 

Как же создать сайт отлично выглядящий на всех этих устройствах?

Что такое Smart-сайт?

Термин smart сайт возник, когда появились и другие smart-things, типа smart watch, smart tv, интеллектуальные ассистенты в смартфонах и т.д.

Он подразумевает под собой user-friendly отзывчивый дизайн, общение с посетителем (например определение города посетителя), предугадывание его действий и предложение решения.

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

От правильного выбора одного из этих способов зависит эффективность метода. Рассмотрим самые популярные решения. 

Мобильная версия сайта

Для сайтов с большим количеством контента и информационных блоков целесообразно заказать отдельную мобильную версию -  менее загруженную для маленького разрешения, чем полная версия сайта. Упрощение информационных блоков и удобная навигация - это основные задачи мобильной версии. Макеты мобильной версии разрабатываются отдельно от основных макетов сайта и требуют отдельной верстки с интеграцией. Такие макеты имеют общую цветовую гамму и стилистику с основной версией сайта для узнаваемости бренда. Еще одна задача мобильной версии сайта - быстрота загрузки на мобильном устройстве, она намеренно более «легкая».

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

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

"Резиновая" вёрстка сайта

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

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