Человек-Хэмингуэй

Краткое руководство по прохождению Mobile Friendly Test
1. Шрифт 18px
2. Адаптивная ширина (можно через медиаквери или растягивающийся див, как на старых сайтах)
3. мета тег viewport в заголовке

Без п. 3 - пп. 1 и 2 Гуглем не засчитываются

Что сделал я - использовал обычный дизайн сайта (не этого), просто в CSS дописал такие строчки:

@media screen and (min-width: 800px) {
#wrapper { width:800px; }
#sidebar { width: 170px; }
#content { width: 600px; }
.thumb { width: 260px; margin-right:20px;}
.thumb img { width: 260px;}
}

@media screen and (min-width: 1024px) {
#wrapper { width:1024px; }
#sidebar { width: 200px; }
#content { width: 790px; }
.thumb { width: 250px; margin-right:10px;}
.thumb img { width: 250px;}

}

@media screen and (min-width: 1152px) {
#wrapper { width:1152px; }
#sidebar { width: 220px; }

#content { width:900px; }
.thumbspack { font-size:16px;}
.thumb { width: 280px;}
.thumb img { width: 280px;}

}

@media screen and (max-width: 799px){
#wrapper { width:320px; }
#content { float:none; }
#sidebar { float:none; }
.button { width: auto; }
.button:hover { width: auto; }

.thumb {
display:block;
float:none;
margin-right:auto;
margin-left:auto;
}
}

Первые три @media screen - это для экранов от 800, от 1024 и от 1152, последний - вариант для экранов, которые не набрали и 800px.

Смысл этих штук - адаптировать размеры и поведение главных блоков дизайна (контент, сайдбар, общий враппер) под соответствующие разрешения. Туда же вписал хаки для отдельных элементов, которые “плохо” вели себя на подходящих размерах.

Google сказал, что теперь сайт Mobile Friendly.

ЗЫ:Самое важное! Самое маленькое разрешение должно быть адаптировано под ширину 320 пикселов - ибо, как написано в мобайл-тесте у Гугля, таково “аппаратно-независимое” разрешение у iPhone 5. И именно под него он показывает картинку в тесте. У меня до этого момента стояло 350 пикселов в минимальной ширине (последний media screen), и часть слов при этом обрезалась (а тупой робот Гугля все равно воспринимал как Mobile Friendly). Я поправил на 320 - и картинка стала нормальной.

---

Рубрика webdesign
Wednesday, May 20th, 2015 - 2:06 pm