Уже много сказано о том, что Гугл начал ранжировать сайты при выдаче для мобильных телефонов, ориентируясь не только на качество информации на сайте, но и в зависимости от того, оптимизирован ли дизайн сайта для мобильных устройств.
Дизайн сайта, адаптированный для просмотра на мобильных устройствах назвали адаптивным дизайном.
Есть мнение, что и Яндекс в ближайшее время начнет поступать подобным образом. Поэтому вопрос о том, нужно ли адаптировать дизайн своего сайта или блога для мобильных устройств, имеет однозначный ответ: «Нужно». Ведь количество мобильных устройств, с помощью которых пользователи просматривают сайты, с каждым днем увеличивается.
Конечно, есть немало сайтов, для которых этот вопрос или вовсе не стоит, или стоит не так остро. Такие сайты, как правило, имеют основной трафик не с поисковых систем. Поэтому на различные выбрыки поисковиков им глубоко наплевать.
Я изучил несколько подобных сайтов, посещаемость которых составляет тысячи и даже десятки тысяч посетителей в сутки. Их владельцы вовсе не торопятся адаптировать дизайн своих сайтов, потому что, как было сказано выше, основной трафик на эти сайты идет не из поисковых систем.
Большинству же сайтов и блогов, имеющих основной трафик из поисковиков, волей-неволей приходится считаться с тем, что нового придумывают поисковые системы. Вот и теперь либо придется делать адаптивным тот дизайн сайта, который есть, или же искать подходящий адаптивный шаблон.
Лично я потерял до 20% трафика на некоторых своих сайтах после того, как Гугл начал учитывать, оптимизирован ли сайт для мобильных устройств. Поэтому начал чесать затылок, раздумывая, как мне решить этот вопрос, не изменяя коренным образом дизайн своих сайтов.
Сам Гугль дает некоторые подсказки, что и как нужно сделать, чтобы адаптировать дизайн сайта. Но этих подсказок явно недостаточно для того, чтобы полностью решить проблему.
Так, первое, что рекомендует Гугль, это прописать в хедере сайта метатег <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>. Однако само по себе это никакого эффекта не дает. Об этом чуть ниже.
Еще Гугль говорил практически одно и то же для всех моих сайтов: мелкий шрифт; ссылки близко друг к другу; область просмотра шире экрана…
Увеличил размер шрифта, раздвинул ссылки… Осталась область просмотра шире экрана. А привязывается Гугл к ширине экрана 320 пикселов. Это нужно учитывать при адаптации дизайна сайта. Как это реализовать на практике? Оказалось, что не так уж сложно.
Однако, прежде чем рассказать, как я решил этот вопрос, давайте определимся, какие критерии влияют на то, будет ли считать Гугл дизайн вашего сайта адаптированным для мобильных устройств.
Первое — размер шрифта. Здесь не совсем понятно, какой размер шрифта Гугл считает оптимальным для мобильных устройств. Когда я занимался адаптацией своих сайтов, то даже размер шрифта в 14 пикселов Гугл посчитал слишком мелким. Сделал 16 пикселов — получил одобрение.
В то же время я скачал несколько бесплатных шаблонов для Вордпресс, которые анонсировались, как адаптивные. Честно сказать, я был немного ошеломлен. В некоторых из них соотношение размеров шрифтов меня просто поразило: размер заголовка 48 пикселов, а размер шрифта в тексте — 12 пиеселов. Поставил такой шаблон на один из своих сайтов. Проверил в Гугле — говорит: все класс, адаптирован!
Пересмотрел примерно два десятка адаптивных шаблонов и разочаровался — ни один из них без предварительной модификации ставить на свой сайт нельзя. По-прежнему авторы шаблонов грешат обилием заголовков первого и второго уровня на странице — ставят их там, где надо, и там, где не надо. Это первое.
Второе — это неуравновешенность шрифтов. Лично мне абсолютно не нравится такой вид: заголовок размером 48 пикселов или больше при размере шрифта в основном содержимом 12 или 14 пикселов.
Повозившись немного с парочкой таких шаблонов, я снова вернулся к своим сайтам и занялся адаптацией того дизайна, который был на них.
Первый вывод, который я сделал: адаптивный дизайн не должен содержать блоков фиксированной ширины, которая превышает 320 пикселов.
Прежде всего, размер основного блока должен быть определен в процентах, то есть, он должен быть резиновым.
Однако здесь есть нюанс. Мои сайты имели фиксированную ширину в 1000 пикселов или 960 пикселов. И я не хотел, чтобы при просмотре их на более широких экранах содержимое излишне расползалось. Этот вопрос решается очень просто.
В свойствах блока можно задать два значения ширины — одно в процентах, другое — в пикселах. При этом в пикселах записывается максимальная ширина блока — max-width. А значение width — в процентах. В моем случае это выглядит так:
.content {width: 100%; max-width: 960px;}
Это означает, что на любом экране, имеющем ширину больше 960 пикселов, мой сайт будет иметь фиксированную ширину. На всех экранах, шириной менее этого значения, страницы моего сайта будут стремиться занять всю ширину экрана.
При этом с хедером и футером проблем не возникает. Только при этом нужно обратить внимание, если в хедере есть картинка шириной на всю страницу, которой задан фиксированный размер, этот размер нужно изменить на относительный. То есть выразить его опять же в процентах. Это для того, чтобы картинка подстраивалась под ширину экрана тоже.
То же самое касается и картинок в тексте — их ширина должна быть не более 300 пикселов или же должна прописываться их относительная ширина.
Теперь самое главное — собственно контент и сайдбар. Этот вопрос проще всего решается, если сайдбар имеет ширину не более 320 пикселов. Поэтому и адаптировать проще дизайн с двумя колонками. Хотя при желании и в 320 пикселов можно впихнуть две колонки.
Я пошел простым путем — уменьшил ширину сайдбара до 320 пикселов. А колонке с контентом задал два размера — один в 100%, другой — мксимальный в пикселах, чтобы мой сайт смотрелся, как положено, на полноразмерных экранах.
Пример можно посмотреть здесь zdravie.pp.ua Мне нравится этот шаблон — очень легкий, простой в работе. Поэтому не хотелось от него отказываться. Можете посмотреть, как он выглядит на различных устройствах вот здесь http://cybercrab.com/screencheck/
Можно заметить, что как только ширина экрана становится меньше 960 пикселов, сайдбар съезжает вниз под контент. Может быть, это не очень красиво выглядит на экранах шириной около 800 пикселов. Однако на более узких смотрится вполне прилично.
Уверен, что специалисты могут обвинить меня в примитивизме. Пусть так. Главное — цель достигнута, мои сайты признаны Гуглом адаптированными для мобильных устройств и вполне работоспособны на всех устройствах.
Поэтому каждый, кто хочет самостоятельно адаптировать дизайн своего сайта или блога, может воспользоваться моим примером и сделать это своими силами.
Если возникнут вопросы, с радостью отвечу. Нужна помощь? Постараюсь помочь.
P.S. А вот для данного сайта, на котором вы сейчас это все читаете, я взял адаптивный шаблон уже готовый. Правда, немного с шрифтами поработал, чтобы было так, как мне нравится.