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

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


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

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

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

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

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


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


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

Для контейнера и картинок сайта задаем максимальную ширину в процентах:
.container{
	width: 90%;
	max-width: 90%;
	position: relative;
	/*остальной код*/
}

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


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

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

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


Понравилась статья "DLE - как сделать modile friendly шаблон" из раздела Веб разработка » Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 2600   Дата: 11-мая-2015, 05:59

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика