Как сделать адаптивный mobile friendly шаблон

mobile frendly - Как сделать адаптивный mobile friendly шаблон

Итак, Google ужесточил правила и недружественные к мобильным платформам сайты будут теперь ранжироваться ниже. Но, любой шаблон можно минимально привести кmodile friendly версии и не нужно осваивать адаптивную верстку, достаточно правильно настроить шаблон.

Проверить дружественность сайта можно по ссылке:
https://www.google.com/webmasters/tools/mobile-friendly/

Первые шаги к mobile friendly

  • телефоны еще не доросли до ajax и jquery, поэтому ими не следует злоупотреблять;
  • графика и контейнер сайта не должны иметь горизонтальной прокрутки и решается это на css;
  • боковые сайдбары так же будут лишними и отберут массу полезного пространства — убираем ;
test mobile friendly - Как сделать адаптивный mobile friendly шаблон

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

Для контейнера и картинок сайта задаем максимальную ширину в процентах:

.container{
	width: 90%;
	max-width: 90%;
	position: relative;
	/*остальной код*/
}

.posts img{
	max-width: 90%;
	/*остальной код*/
}

где .posts и .container — те классы, которые используются в шаблоне для формирования каркаса, полной и короткой новостей.

Такой трюк позволит использовать на полной версии, например, картинки, шириной по 600px, а на мобильной версии автоматически сжимать их до 90%. Девяносто выбрано наугад. Картинка в этом случае примет отступ по 5% с обеих сторон.

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

Читайте также

Похожие записи

Скрипт идущего времени на jQuery
Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу. Пример:...
Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *