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

Осуствие мобильной версии сайта ведет к понижению позиций в поисковой выдаче.

 

Наши услуги:

- Адаптация существующего сайта под мобильные устройства (от 50уе)

- Создание нового мобильного сайта на поддомене (от 50уе)

 

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

Представьте каким Ваш сайт должен быть на мобильных устройствах, а лучше нарисуйте Ваш будущий мобильный сайт (основные элементы страницы, меню, различные кнопки, сайдбар, подвал сайта).
Во-первых, чтобы сайт подстраивался под мобильные устройства, необходимо вставить специальную строку между тэгами <head> и </head>. Без этой строчки работать адаптация не будет.

С помощью девелоперских инструментов мы узнаём, какие размеры нужно установить для тех частей сайта, которые надо адаптировать. В зависимости от шаблона блоки могут называться по разному, но основные это — wrapper, header, container, wrap, content, sidebar, footer.

Браузеры распознают медиа-запросы, где указано, как браузер должен отображать сайт при определенном размере. В основном сайт содержит основной контейнер «wrapper», но может и по другому называться, и если например, ширина этого блока «width: 900px», то в медиа-запросе нужно установить размер в процентах, для данного блока ставим 100%, он должен быть на всю ширину экрана.

Если ширина экрана будет меньше чем 1024рх, то сработает данный запрос, и блок будет адаптироваться к экрану. Основные медиа-запросы (1024 — ноутбуки, планшеты, 768 — планшеты, ipad, некоторые смартфоны, 480 — смартфоны, телефоны, 320 — телефоны, 240 — телефоны с маленьким разрешением).

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

Также и для других блоков прописываем запросы. Если есть сайдбар справа или слева от контента, то тут методом вычисления задаем размеры также в процентах. Например общая ширина родительского блока 900рх, ширина блока с контентом 580рх, а сайдбара 300рх, то считаем по формуле:

580/900*100 = 64% - для контента
300/900*100 = 33% - для сайдбара

Если сайдбар имеет отступ например от левого края родительского блока -  margin-left: 590px; то расстояние также высчитываем по формуле и ставим в процентах. Таким образом контент и сайдбар будут адаптироваться под размеры экрана.

Когда установим размеры блоков под запрос в 1024рх, нужно проверить, при каком размере экрана нужно устанавливать новые запросы с размерами. Например, если при достижении экрана в 768рх блоки начинают наезжать друг на друга, то значит под этот запрос нужно высчитывать новые размеры и так далее до полного сужения браузера.

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

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

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

Чтобы скрипт работал, необходимо подключить библиотеку JQUERY и вставить строку в header.php между <head></head>.


Мы описани для Вас только малую часть того, что придется сделать для адаптации сайта, но общую суть думаю Вы поняли.