Про адаптивные сайты: что это, зачем и как

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

1. Чем отличается адаптивный сайт от мобильной версии сайта?

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

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

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

2. Чем отличается адаптивный сайт от сайта с резиновой вёрсткой?

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

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

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

1. Скорость загрузки
   Всё-таки почти 50% пользователей выходит в Интернет с мобильников. В адатированном варианте убраны лишние блоки, тяжелые картинки, подгружается нужная ширина сайта - пользователь быстрее видит, что сайт есть и это положительно сказывается на конверсии.
2. Удобство
   Да, фиксированный сайт, может, отобразится и нормально, но при попытках взаимодействия с сайтом - создании заказа, открытии контактов телефон начнет увеличивать те области, которые кажутся ему маленькими, при попытке вернуть сайт к нормальному размеру можно случайно нажать на ссылку и попасть на другую страницу. Я думаю, на большинство испытало всё это на себе. Таким образом теряются столь ценные возможные клиенты.
3. Поисковые системы
   Гугл уже давно требует от сайтов быть адаптированными под мобильники. Для этого у него есть тест Mobile Friendly

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

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

Так что теперь Яндекс тоже учитывает адаптивность. Вот тут можно посмотреть требования Яндекса к адаптивным и мобильным сайтам. Проверить насколько всё правильно для Яндекса можно в Яндекс. Вебмастере: Инструменты ⇒ Проверка мобильных страниц

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

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

Проверить сайт на адаптивность можно примитивным способом - просто постепенно сужая окно браузера - можно увидеть как перестраиваются блоки. Это совсем простой и ненадежный способ - косяки вёрстки там можно не увидеть.

Можно использовать эмуляторы - программы, показывающие, как выглядит сайт на разных устройствах. Это достаточно точный инструмент, можно проверить вёрстку процентов на 95.
Например, вот хороший бесплатный инструмент - вводите адрес своего сайта и смотрите как он отображается на разных устройствах: http://quirktools.com/screenfly/

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

5. Как сэкономить при переходе на адаптивную вёрстку?

Если одновременно с адаптивностью вы хотите сделать редизайн, можно попробовать подобрать платный адаптивный html-шаблон. Так вы сэкономите на дизайнере и верстальщике, останется только перетянуть вёрстку на сайте.

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

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

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

Для заказа адаптивного сайта или "превращения" действующего не адаптивного сайта в адаптивный заполните форму ниже и наши специалисты свяжутся с вами.