Итак, Google ужесточил правила и недружественные к мобильным платформам сайты будут теперь ранжироваться ниже. Но, любой шаблон можно минимально привести кmodile friendly версии и не нужно осваивать адаптивную верстку, достаточно правильно настроить шаблон.
Проверить дружественность сайта можно по ссылке:
https://www.google.com/webmasters/tools/mobile-friendly/
Первые шаги к mobile friendly
- телефоны еще не доросли до ajax и jquery, поэтому ими не следует злоупотреблять;
- графика и контейнер сайта не должны иметь горизонтальной прокрутки и решается это на css;
- боковые сайдбары так же будут лишними и отберут массу полезного пространства – убираем ;
Вот, какая идеальная конструкция для mobile friendly шаблонов. Одна центральная часть и все. Стрелками я указал, какие параметры нужно поправить, чтобы исчезла горизонтальная прокрутка.
Для контейнера и картинок сайта задаем максимальную ширину в процентах:
.container{
width: 90%;
max-width: 90%;
position: relative;
/*остальной код*/
}
.posts img{
max-width: 90%;
/*остальной код*/
}где .posts и .container – те классы, которые используются в шаблоне для формирования каркаса, полной и короткой новостей.
Такой трюк позволит использовать на полной версии, например, картинки, шириной по 600px, а на мобильной версии автоматически сжимать их до 90%. Девяносто выбрано наугад. Картинка в этом случае примет отступ по 5% с обеих сторон.
Разумеется, для остальных стилей так же нужно задать правильные размеры и исключительно в процентах.
Комментарии