Адаптация сайта под мобильные устройства

Приветствую Вас дорогие друзья! Очень долго ничего не писал, был занят адаптацией сразу нескольких сайтов. Вот теперь в этой статье я поделюсь с Вами, что это такое, зачем и какая у меня получилась адаптация. Принимаю заказы на адаптацию сайтов с системой управления WordPress, а также и лендинги, визитки сайтов. Стоимость адаптации 5000 р, срок выполнения от 3-х до 10- дней.
На сегодняшний день 10-15% из 100 сайтов имеют адаптацию, и судя по статистике 30-40% трафика приходится на мобильный трафик, и эта цифра постоянно увеличивается. Практически каждый сейчас пользуется интернетом на смартфонах, планшетах.

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

В поисковой системе Google 21 апреля 2015 года был запущен новый алгоритм ранжирования сайтов с приоритетом на  адаптивный дизайн для мобильных устройств.

На сегодняшний день очень актуальной является тема адаптивного дизайна, и Google нас оповестил о важности адаптивного сайта, прислав веб-мастерам вот такое письмо:

Сайт https://blogorazvitie.ru/ не оптимизирован для мобильных устройств

Веб-мастеру сайта https://blogorazvitie.ru/

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

Если с телефона в поиске Google найти свой сайт и если он адаптирован, то под ним будет написано — для мобильных. Вскоре Google начнет понижать позиции не мобильных сайтов в выдаче. Я думаю, что и Яндекс от Google не отстанет, тем более, что у Яндекса происходят еженедельные «Апдейты».

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

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

Также это можно сделать и через кабинет вебмастера Google, выбрав страницу с ошибкой и нажав — проверить текущую версию.

Или просто потяните за край браузера и посмотрите будет ли Ваш  сайт сужаться равномерно с размером браузера.

Как видно на скриншоте сайт без адаптации, снизу появился скролл, на мобильных устройствах такой сайт удобством не блещет.

Адаптация сайта под мобильные устройства

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

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

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без этой строчки работать адаптация не будет.

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

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

@media screen and (max-width: 1024px) {
   #wrapper: 100%;
}

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

Для изображений, видео и фреймов прописываете вот такие медиа-запросы:

img {max-width:100%;height: auto;}
embed, object, iframe {width: 100%;}

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

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

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

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

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

@media screen and (max-width: 480px) {
  #content {max-width: 100%; float: none;}
  #sidebar {margin-left: 0; width: 480px; max-width: 100%;}
}

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

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

За функционал кнопок отвечает небольшой скрипт.

Для начала нужно скрыть основную навигацию на маленьких экранах, за навигацию обычно отвечает блок «navi», пишем в медиа-запросе такую конструкцию:

@media screen and (max-width: 480px) {
  #navi {display: none;}
}

Для вывода меню используйте код, который ставите в то место где хотите видеть кнопку.

<a href="#" id="touch-menu">Меню</a> - Ссылка кнопки меню, ставите туда где хотите видеть кнопку

Стили для кнопки меню:

#touch-menu {
 background: linear-gradient(to bottom, #fff, #BCB8B6);
 float: left;
 width: 70px;
 height: 12px;
 text-align: center;
}

#nav a:hover {
 background: linear-gradient(to bottom, #BCB8B6, #fff);
 color: #101010;
 border-bottom: 3px solid #0000FF;
}

#touch-menu:hover {
 background: linear-gradient(to bottom, #BCB8B6, #fff);
 color: #101010;
 border-bottom: 3px solid #0000FF;
}
#touch-menu {display: none;} - скрываем на больших экранах

@media screen and (max-width: 480px) {
  #touch-menu {display: block;}
}

Я Вам дал свои стили, которые можете переделать под свой дизайн.

А вот это сам скрипт, он будет показывать меню при клике по кнопке:

<script type="text/javascript">
	$(document).ready(function(){
	var touch = $('#touch-menu');
	var menu = $('#navi');
	$(touch).on('click', function(e){
	e.preventDefault();
	menu.slideToggle();
	});
$(window).resize(function(){
var wid = $(window).width();
if(wid > 768 && menu.is(':hidden')) {
		menu.removeAttr('style');
}
});
});
</script>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

На данный момент эта версия рабочая.

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

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

Сайт Александра Крутицких.

Сайт Александра Крутицких.

Сайт Инны  Фельдман.

Для того чтобы посмотреть как они отображаются на разных мобильных устройствах, и как работает навигация сайтов, воспользуйтесь сервисом: www.responsinator.com

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

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

• Адаптация только главной страницы сайта — 5000 рублей (очень странно конечно, почему только главной)
• Адаптация WordPress сайта — от 7000 до 30000 рублей
• Полная адаптация сайта — от 10 — 15 тысяч до 50 тысяч рублей (как Вам такие цены?)

Вот такие цены я нашел в интернете.

Я Вам предлагаю сделать мобильную адаптацию всего за 5000 рублей.

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

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

До новых встреч!!!