Адаптивная верстка (мобильная версия) сайта представляет собой оптимизацию верстки под разрешение(размер) монитора пользователя, для удобства просмотра сайта на экране устройства с которого пользователь просматривает сайт (планшет, смартфон и т.п.). При этом контент сайта не просто сдвигается, как при использовании резиновой верстки. Контент и элементы управления перестраиваются таким образом, чтобы вся информация была читаема без увеличения масштаба на устройстве, добавляються и/или видоизменяются элементы управления (меняется размер и расстояние между элементами с учетом особенностей управленя пальцем на сенсорном экране), такие как - кнопки, ссылки, поля для ввода текста и т.п. Это происходит за счет уплотнения элементов страницы, частичного сокращения содержимого, изменения местоположения некоторых блоков, исключается "тяжеловесная" графика для экономии дорогостоящего трафика мобильного интернета. И всё это должно происходить без потери качества и интереса для пользователя.
Для того, чтоб сделать верстку адаптивный, желательно сначала прорисовать и утвердить дизайн под адаптивную верстку.
Адаптивный веб-дизайн подразумевает использование следующих техник:
Резиновый макет на основе пропорций (fluid grids) — тип макета переменных, частный случай фиксированного типа макета, который позволяет переносить макет на реальный сайт таким, каким он создавался в редакторе HTML.
Резиновые изображения (fluid images), позволяющие менять свои размеры под родительский блок.
Media queries — часть стандарта CSS, позволяющая применять стили на основе информации о разрешении устройства.
Mobile first — использование этого принципа при создании адаптивного сайта предполагает движение в логике «от мобильных устройств — к обычным компьютерам», чтобы технически предусмотреть приоритеты отображения того или иного контента.
При разработке адаптивного сайта должны учитываться не только особенности браузеров, но и различных операционных систем и разрешений экрана. Использование таких технологий, как JavaScript, различных CSS стилей, jQuery-плагинов для адаптации меню и др. являются неотъемлемыми инструментами в работе над созданием адаптивного сайта. В результате мы получаем автоматическое распознавание разрешения экрана воспроизводящего устройства, его типа, управление подключением/отключением различных элементов, анимации, изменение размера шрифтов и ширины блоков. Универсальность веб-сайта для различных устройств является конечной целью. Несомненным преимуществом является то, что адаптивные сайты учитывают возможности отдельных платформ. Кроме того, сайт адаптированный под мобильные устройства — наилучший выбор, с точки зрения алгоритмов Google.
Компания Google официально заявила о том, что с апреля 2015г. будет отдавать предпочтение сайтам адаптированным для просмотра на мобильных устройствах в поисковой выдаче для мобильных устройств. Об этом можно прочитать здесь. Простыми словами, сайт у которого есть мобильная версия (адаптирован для мобильных устройств), будет показываться выше в поиске для пользователей мобильных устройств, чем сайт у которого нет мобильной версии, а по статистике Hotlog - это уже больше 35% пользователей! Проверить насколько адаптирован ваш сайт под мобильные устройства Google предлагает здесь.
Если у Вас уже есть сайт, но Вы хотите его переверстать под адаптивную верстку, тогда стоимость адаптации под мобильные устройства просчитывается индивидуально в зависимости от того на какой CMS и насколько профессионально сделан ваш сайт! Не всегда есть возможность доработать уже существующий сайт, зависит от ряда факторов (особенно если сайт выполнен на самописной либо малоизвестной CMS). Бывают ситуации, когда проще и выгоднее заказать редизайн сайта с обновлением версии движка сайта.