Что такое адаптив
Перейти к содержимому

Что такое адаптив

  • автор:

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

Адаптивный дизайн — представление контента сайта, который подстраивается под устройства с разным размером экранов. Реализуется с помощью CSS стилей и кода. Блоки сжимаются и растягиваются (резиновая верстка), перестраиваются друг под друга по принципу потока. В случае с адаптивом, когда вы посещаете десктоп данного сайта и его адаптив на других устройствах, вы находитесь на одном и том же домене.

Мобильная версия — тот же адаптив (код, CSS), но на отдельном домене. Это отдельный шаблон и сайт. Если у сайта есть мобильная версия (например, её адрес начинается с буквы m.), то вбивая запрос «ламода», поисковая выдача будет показывать вам ссылку именно на мобильный сайт.

Пример: сайт на десктопе site.ru, мобильный сайт m.site.ru

Плюсы адаптива

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

Плюсы мобильной версии сайта

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

Минусы адаптива

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

Это можно сделать, но при помощи дублей кода. Если таких дублей немного (например, вам на 1 странице в адаптиве необходимо переставить местами пару элементов для удобства использования), то никоим образом это не скажется плохо на сайте.

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

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

Минусы мобильной версии

  • Многие считают, что это устаревшая вещь. Раньше мобильную версию использовали т. к. браузеры не были полностью готовы к адаптиву;
  • Отдельный бюджет на продвижение сайта для мобильных и другие тонкости, которые зависят от разрабов и SЕОшников;
  • Основной сайт с десктопом может внезапно не определить, что вы используете мобильный телефон, т. е. не определится user agent. Это может произойти, если ваш мобильный старой модели;
  • Контент нужно синхронизировать с основным сайтом. Это плюс к бюджету и времени.

Вывод

Используйте то, что отвечает вашим целям и задачам.

Но, на мой взгляд, адаптивная верстка наилучший вариант. Быстрее и дешевле. Здесь нет доп. расходов на синхронизацию контента и продвижение. Если разрабатывается сайт с нуля, то лучше пользоваться принципом «mobile first» — сначала мобильные. И сделать адаптивный дизайн.
Либо при проектировании десктопной версии сразу же думать об удобстве и на мобильном.

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

Мобильная версия подойдёт, если хочется больше проработать удобство использования с мобильного. При наличии бюджета на продвижение и ведения 2 сайтов.

Трафик просмотра сайтов с мобильного перевалил за 50%. Поэтому их владельцам нужно позаботиться об оптимизации ресурса под все устройства.

Адаптивная вёрстка

Что такое адаптивная вёрстка и адаптивный дизайн сайта

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

Хотите освоить сквозную аналитику?
Посетите регулярный мастер-класс по аналитике от Roistat.

Для этого дизайнер готовит несколько макетов будущего сайта под разные типы и модели мобильных и стационарных устройств. Страницу со сложным дизайном могут отрисовать шесть и более раз. У простых дизайнов могут быть всего два макета — вертикальный и горизонтальный.

Разработчик при вёрстке задаёт макетам нужные размеры и разрешение экрана.

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

Адаптивная вёрстка: пример дизайна под стационарные устройства сайта Профи

Адаптивная вёрстка: пример дизайна под мобильные устройства сайта Профи

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

Иногда наоборот — в дизайне под мобильные устройства только уменьшают иконки и более компактно размещают элементы сайта.

В некоторых случаях сайту нужна только одна версия страницы. Например, под смартфоны, если трафик на страницу идёт только с Instagram.

Зачем бизнесу адаптивная вёрстка сайта

Аудитория мобильных устройств растёт. По данным Statista, доля мобильного интернет-трафика составляет более 55% от общего веб-трафика . Чтобы не терять потенциальных клиентов, пользователям смартфонов должно быть комфортно читать текст на сайте, оставлять заявку на покупку, отправлять товары в корзину.

Чем адаптивная вёрстка отличается от респонсив-дизайна и мобильной версии сайта

Респонсив-дизайн (от responsive, отзывчивый) — способ автоматически подстраивать интерфейс сайта под размеры и разрешение экрана. Дизайнеру не нужно готовить несколько макетов страниц, сайт с респонсивным дизайном растягивает или сжимает один макет с помощью программного модуля.

Разработка сайта упрощается и удешевляется. Но при этом страницы с респонсив-дизайном весят больше, им требуется больше времени на загрузку. При адаптивной вёрстке необходимо загрузить один готовый оптимизированный дизайн страницы. При респонсив-дизайне — макет максимального размера и разрешения нужно сжать под устройство пользователя.

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

Мобильной версией называют отдельный сайт компании, сделанный для мобильных устройств. У такого сайта есть свой URL, например, у ВКонтакте есть https://m.vk.com/. При этом открыть мобильную версию можно как со смартфона, так и с ПК.

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

Производство мобильных версий дорогое. Дизайнерам и разработчикам нужно отрисовать и сверстать ещё один сайт. Отдельный URL для мобильных девайсов может путать пользователей — нужно помнить, какой адрес вводить, чтобы посмотреть контент сайта со смартфона.

4 сервиса для проверки адаптивности онлайн

1. Google Mobile-Friendly Test — бесплатный инструмент, который проверяет адаптивность сайта на мобильных устройствах. Google показывает, как выглядит мобильная версия страницы, и сообщает об ошибках в вёрстке, если они есть:

2. Яндекс.Вебмастер, «Проверка мобильных страниц» — проверяет мобильную версию сайта владельца по 6 критериям:

  • наличие тега viewport;
  • отсутствие горизонтальной прокрутки;
  • отсутствие flash-элементов;
  • отсутствие java-апплетов;
  • отсутствие silverlight-плагинов;
  • удобство чтения текста с мобильных устройств.

3. I love adaptive — покажет, как сайт отображается на разных популярных устройствах, в том числе на новых мобильных девайсах системы ios и Android. Дополнительно можно задать собственный кастомизированный размер страницы для проверки.

4. Browserling — сервис проверки кроссбраузерности и кроссплатформенности сайта.В бесплатной версии сервиса можно проверить только Internet Explorer 11, для разрешения 1024×768 на Windows 7, тест будет ограничен 3 минутами. В платной версии — от $19 в месяц — можно выбрать разные версии ОС от Windows и Android и 6 браузеров.

Также рассказали в блоге, как проверить юзабилити сайта.

Адаптивная вёрстка: что нужно запомнить

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

2. Для респонсив-дизайна не нужно готовить несколько макетов сайта. Программный модуль растягивает или сжимает страницы под размеры устройства. Мобильная версия — отдельный сайт компании, сделанный для мобильных устройств.

3. Проверить адаптивность сайта можно с помощью сервисов: Google Mobile-Friendly Test, Яндекс.Вебмастер, I love adaptive, Mattkersley, Browserling.

Что такое адаптивный сайт?

icon

Создание сайтов

icon

Игорь Кобылянский

icon

3264

icon

1

По статистике, в Украине количество пользователей мобильными устройствами в период 2015-2016 гг. выросло на 22% и на данный момент составляет 15 миллионов человек, 65% из которых – молодые люди до 35 лет – одна из самых платежеспособных групп населения. Около 10 миллионов человек ежедневно пользуются мобильными гаджетами и мобильным Интернетом. Это означает, что четвертая часть всего населения страны посещают веб-ресурсы различного характера и готовы к покупке. Но смогут ли они купить товар, услугу или прочитать ваш пост в блоге, если страница неправильно или неудобно отображается на их устройстве? Очевидно, что нет. Именно поэтому так важна адаптивность сайта. Не путайте адаптивный сайт с мобильной модификацией – это принципиально разные понятия. А что их отличает и что собой представляет responsive website в целом, расскажет эта статья.

Статистика пользователей мобильных устройств в Украине

Что такое адаптивный сайт (веб-дизайн)

Как выглядит адаптивный сайт

Для начала разберем что же такое гибкий сайт (адаптивный web-дизайн). Это дизайн страниц, который обеспечивает корректное и удобное для мобильного юзера представление сайта. Адаптивный web-сайт автоматически подгоняется под размеры окна браузера. Цель веб-дизайна, гибкого под электронные гаджеты – универсальность представления сайта. Это означает, что нет необходимости настраивать сайт под отдельный вид гаджета, адаптивный веб-ресурс правильно отображается на любых мобильных девайсах, лэптопах и даже на телевизоре. При этом серфинг ресурса будет равносильно удобен на любом устройстве и пользователю не нужно увеличивать выбранные блоки, чтобы не кликнуть не на ту кнопку.

Как протестировать адаптивный веб-дизайн?

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

Зачем нужен адаптивный дизайн сайта?

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

  • Разработка и поддержка адаптивного сайта обходится быстро, несложно и недорого;
  • Все страницы сайта в случае гибкой версии доступны по одному URL адресу, что изначально избавляет от ряда проблем в SEO-продвижении, сложному, двойному наполнению и удобству для пользователей.
  • Адаптированный под мобильные устройства гаджеты при загрузки смотрится красиво, сохраняет свой дизайн и структуру.

Но стоит понимать, что адаптивный сайт имеет и свои недостатки:

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

Однако отсутствие responsive website влияет на поведенческие факторы мобильных юзеров. Посетителям попросту будет неудобно пользоваться сайтом со смартфона и в 98% случаев он закроет страницу.

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

3. Он продвигаем

Неадаптивные ресурсы значительно хуже ранжируются в результатах поисковой выдачи Google при поиске с мобильного гаджета. В середине 2015 года компания Google ввела новый фильтр «Mobile-friendly», который отвечает за ранжирование сайтов при поиске с мобильного устройства. Адаптация сайта очень важна для SEO-продвижения сайта. Если он дружелюбен для Гугл и грамотно оптимизирован, то обязательно попадет в ТОП и привлечет максимальное количество клиентов и повысит доходы компании. К тому же, Google уже начал отдавать приоритет сайтам с адаптивной версией. Поэтому если у вас ее нет, обязательно закажите, так как вы рискуете потерять часть мобильного трафика.

4. Он повышает лояльность аудитории

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

Отличие адаптивной версии сайта от мобильной

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

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

Как проверить сайт на адаптивность?

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

Типы адаптивного дизайна

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

1. Резиновый макет. Самый распространенный и простой вариант адаптировать дизайн сайта. Он подразумевает сжатие блоков по ширине до размера мобильного гаджета. А те блоки, которые невозможно сжать, настраиваются друг под другом;

Резиновый дизайн

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

Перенос блоков

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

Переключение макетов

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

Минимальная адаптивность

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

Выводы

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

photo

Автор — Игорь Кобылянский

Адаптивный дизайн, респонсив и мобильная версия: зачем это нужно и в чём различия

В телефоне современного человека умещаются банк, супермаркет, почта и библиотека. Всё это — благодаря адаптивному дизайну.

Иллюстрация: Анастасия Телесницкая для Skillbox Media

Дарья Тамилина

Дарья Тамилина

Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

Что такое адаптивный дизайн?

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

Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?

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

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

Чем различается дизайн сайта для разных экранов?

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

На экране ПК пользователь, не перелистывая, видит много информации: заголовки, тексты, картинки, иконки, кнопки. На смартфоне видно меньше элементов — всё рассчитано на скроллинг.

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

Можно пример адаптивного дизайна?

Пожалуйста, вот сайт сети аптек:

А функциональность адаптивных сайтов различается на разных устройствах?

Обычно все версии идентичны. Люди привыкли делать со смартфонов всё то же самое, что и с компьютера: от покупок в интернет-магазинах до рабочей коммуникации. С какого бы устройства человек ни зашёл на сайт, он не должен быть ограничен.

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

Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?

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

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

Значит, все современные сайты используют адаптивный дизайн?

Почти. Адаптивный дизайн — самый распространённый способ «подогнать» интерфейс под разные экраны. Но не единственный. Ещё есть респонсивный дизайн и мобильные версии сайтов.

Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?

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

Должно быть, это удобнее, чем рисовать несколько макетов?

Да, эта технология проще и дешевле. Но есть и минусы.

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

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

Как выглядят респонсивные сайты?

Вот, например. С ПК видно по три изображения по горизонтали, а меню наверху развёрнуто. В телефоне меню скрыто, и мы видим одну картинку на всю ширину экрана:

Понятно. А что такое мобильные версии сайтов?

Мобильной версией называют отдельный мобильный сайт со своим адресом. Это ещё одна альтернатива адаптивному дизайну. Дизайн и функциональность мобильных версий могут кардинально отличаться от дизайна и функциональности десктопного сайта. А ещё пользователь может сам выбирать, в какую версию зайти: при желании можно открыть мобильный сайт с ПК или десктопный — со смартфона. Известный пример — мобильная версия «ВКонтакте» с отдельным адресом m.vk.com.

Мобильные версии часто используют?

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

Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?

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

Кто создаёт адаптивные сайты?

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

Больше интересного про дизайн — в нашем телеграм-канале. Подписывайтесь!

Читайте также:

  • Что такое интерфейс
  • 8 базовых навыков дизайнера
  • Логические ошибки в интерфейсах

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *