Как сделать адаптивный 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% с обеих сторон.

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

Новости от партнеров

Комментарии

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

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