Подгоняем сайт под мобильники и планшеты

13.2.2015 - 2316 просмотров ;)

В среднем по кухне у меня планшеты и телефоны стали достигать почти четверть трафика. Поэтому стало важно что бы эти пользователи не терялись.
Доброжелательный 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 есть сервис где могут вам чего-нибудь подсказать по делу.

Статьи из раздела, Видеочат рулетка