В среднем по кухне у меня планшеты и телефоны стали достигать почти четверть трафика. Поэтому стало важно что бы эти пользователи не терялись.
Доброжелательный Google стал присылать мне телеги о том что мол я виновен в том что мобильные пользователи на твоем сайте просто теряются и уходят.
Сначала я думал что добавить META viewport — вполне достаточно. Однако пристально взглянув в мобилок на сайт я понял что работы тут намного больше.
1. Итак, по пунктам, что я применял:
Проще всего конечно поставить хороший CSS Framework и успокоиться. Из них я обожаю Imperavi Kube. В этом случае все элементы сайта начнут прыгать по ширине так что смотреть их на телефоне становиться более менее удобно.
2. Добавить в шаблон
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Подгонять шрифты и блоки так что бы выглядело красиво. Я некоторым блокам даже стал присваивать значения исходя из ширины экрана. Это сделано чисто на JavaScript:
$("h1, #range").css("font-size", ($('body').width() / 16) + "px");
4. И проверять на телефонах и планшетах. Проверять и проверять.
И кстати у Google есть сервис где могут вам чего-нибудь подсказать по делу.