DLE - как сделать modile friendly шаблон

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

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

Загляните с телефона: https://artemmian.ru/mobile. Это моя мобильная версия на движке dle и настраивается она достаточно просто.

Что нужно учесть для mobile friendly на dle





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

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

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

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

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

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

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