Адаптивный сайт: что это такое и почему он лучше мобильной версии

Аналитика от Statista показывает, что уже к 2022 году затраты на рекламные кампании для смартфонов и планшетов существенно превысят десктопные. 

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

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

Мобильная версия сайта  — это специально созданный, обособленный от основного web-ресурса проект, для которого прорабатываются юзабилити, дизайн, оптимизируется контент. Она представляет собой сокращенный вариант веб-сайта с отдельным адресом.

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

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

• 2 отдельных адреса  — мобильный и десктопный. Это существенно усложняет SEO-продвижение онлайн-ресурса из-за дублирования контента. Кроме того, это вызывает недовольство интернет-пользователей, которые постоянно путаются в ссылках.
• Большие затраты при разработке в сравнении с адаптивной версией. 
• Урезанный функционал. Это может привести к тому, что пользователи просто не получат информацию в нужном объеме, не смогут найти ответы на свои вопросы и попросту откажутся от ваших услуг. 
• Не для всех проектов подходит и не на всех гаджетах отображается корректно. Примером тому служат дисплеи Retina. 
• Сложности с аналитикой. Приходилось устанавливать  счётчик и вручную объединять статистику. Уже позже появилась возможность настраивать прием статистики с нескольких доменов.

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

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

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

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

Наиболее популярные разрешения макетов в пикселях: 320+, 384+, 540+,640+, 768+,992+,1120+,1200+, 1400+,1920+. 

Например, в IT-компании  ITPROFIT мы рисуем 3 макета  — десктоп, планшет, телефон. Соответственно, используем следующие расширения 1920/768/375 px. На этапе дизайна и прорабатываем, и тестируем все вышеперечисленные верстки.

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

Как сделать сайт адаптивным на все экраны?

Сделать адаптивную версию web-сайта качественно самому невозможно, конечно если вы не программист со знанием HTML5, CSS3 и JavaScript. Кроме того, нужно понимать еще и принципы адаптивности.

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

Как правило, для создания адаптивной версии подключается еще и дизайнер с целью продумать, как веб-сайт будет отображаться на тех или иных устройствах. Учитывая, что необходимо переработать дизайн и полностью выполнить верстку, многие владельцы веб-ресурсов прибегают к услуге “Редизайн”. То есть перерабатывают весь дизайн, освежая ресурс. 

Стоимость оптимизации сайта 

• Сайт-визитка: 1000 -1500$
• Корпоративный сайт: 1500 — 2500$
• Интернет-магазин: 2500 — 4000$.

Почему сайт должен быть адаптивным?

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

Адаптивная версия сайта предоставляет множество преимуществ. Вот некоторые из них: 

• Улучшает навигацию. Адаптивная версия веб-ресурса удобна для посетителей, что позволяет превращать их в клиентов компании. 
• Увеличивает прибыль. Напрямую корректность отображения на смартфонах веб-ресурса не связана с количеством трафика, но это один из важных факторов ранжирования. Адаптивные веб-сайты показываются выше, а следовательно  имеют большую посещаемость и конверсионные показатели.
• Простота в обслуживании. Все правки вносятся единожды, а не для каждой вариации. Касается это кода, текстов, Страницы доступны по одному URL-адресу. 
• Высокий рейтинг в поисковой выдаче. Фактор адаптивности учитывается поисковыми системами при ранжировании. 
• Комфортное взаимодействие пользователей с интерфейсами. Доступны все элементы дизайна, функции, контент, что и для десктопной аудитории.

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

Существуют специальные сервисы, которые позволяют выполнить проверку адаптивности проекта. К ним относятся: 

• Google Mobile Friendly.  
• Яндекс.Вебмастер. 

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

Также для проверки адаптивной версии можно использовать и сторонние сервисы:

• RESPONSIVE;
• PR-CY и другие.

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

Как посмотреть адаптивную версию сайта на компьютере

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

Рекомендации для адаптивной версии

При разработке адаптивной версии веб-ресурса следует учитывать следующие рекомендации:

• Для кнопок важно соблюдать следующее правило — они должны быть заметными, привлекать внимание. Стандартный размер кнопки для телефона — 360px/70px. 
• Тексты должны быть читабельными, поэтому публикуют их крупным шрифтом. Для настольной версии чаще всего используется размер шрифта не менее 16px. Для маленьких экранов (768px) — 16px -14px. Хотя для каждого экрана и веб-ресурса подбирается свой идеальный шрифт (16px, 24px, 72px и т.д.). При этом стоит учитывать, что в последнее время Google не рекомендует использовать на смартфоне шрифт меньше 16 px.
• Интерактивные элементы располагаются так, чтобы при их нажатии не затрагивались другие. Если же говорить простым языком, то размер элемента должен соответствовать размеру подушечки пальца. 
• Масштабируемая векторная графика. Используются svg-изображения. Они могут увеличиваться и при этом сохраняют свое качество.
• Карточные интерфейсы или контейнеры для контента.
• Выбор приоритетов и скрытый контент. Скрытые элементы, всплывающие окна позволяют сделать интерфейс удобным и не перегруженным.
• Добавление интерактива. Важно понимать, что многие эффекты усложняют навигацию на сенсорных экранах. Соответственно, их стоит отключать или подменять другими на мобильных и планшетных версиях.
• При работе с анимацией  на смартфонах и  планшетах необходимо учитывать некоторые особенности. Например,  мобильные браузеры не поддерживают элемент Flash из -за возможности распространения через него вредоносного кода.

Почему выбирают адаптивную версию сайта?

• Ресурс подстраивается под любой размер экрана благодаря медиазапросам. При этом интерфейс кардинально не меняется и пользователи не ощущают дискомфорта при взаимодействии с web-ресурсом.
• Отсутствие редиректов. Когда только один URL-адрес — это экономит деньги и время владельца интернет-ресурса: один контент, нет особых проблем с SEO-продвижением. 
• Экономия.  Разработка адаптивной версии сайта для всех устройств не отнимаем много времени.  Благодаря современным технологиям нет потребности переписывать код, необходимо лишь прописать стили в CSS и вставить операторы. 
• Не требуется синхронизация контента, его дублирование в отличие от мобильной версии. Это обеспечивает более высокие позиции в поисковиках.

Не только преимущества  есть у адаптивной верстки, но и недостатки. Но тут стоит отметить, что решаются они довольно легко и оперативно: 

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

Заключение

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