Пятница, 13 — прекрасный день, чтобы опубликовать очередной пост по теме mobile optimized. Сегодня я расскажу как исправить ошибки, о которых шла речь в прошлом посте: «ширина контента не соответствует области просмотра» и «маленький размер шрифта».

Резиновый дизайн вместо фиксированного

Для исправления неправильной ширины контента надо из сайта с фиксированной шириной сделать сайт с резиновой шириной, то есть сделать сайта «сжимаемым». Сжиматься он должен вплоть до 300-320 пикселей по ширине.

Как это сделать? В теории достаточно просто, необходимо везде пиксели заменить на проценты для блоков и элементов, а для шрифтов пиксели заменить на относительные пункты (em вместо px). На практике это преобразование может быть катастрофически сложным и дл кого-то проще будет заменить тему на адаптивную, если речь идет о распространенных CMS вроде Joomla и WordPress.

Резиновый дизайн не обязательно должен заполнять все пространство на десктопах и ноутбуках, для этого в стилях есть параметр max-width, где пиксели будут уместны. Например, для этого блога внешний контейнер имел ширину 1000px и его стиль определялся так:

#page{
	width:1000px;
	margin:0px auto;
}

Переписываем этот стиль так:

#page{
	max-width:1000px;
	width:100%;
	margin:0px auto;
}

На больших экранах ничего не поменялось, а на маленьких блог должен сжиматься в 100% экрана, какой-бы она не была. Должен, но не будет, потому что внутренние блоки имеют фиксированные размеры и горизонтальный скроллинг на узких экранах никуда не денется. Ширину внутренних блоков необходимо также переводить в проценты, при этом помнить, что проценты надо считать относительно родительского блока. Например, ширина блога была 1000px, ширина основной колонки — 725px, ширина правой колонки (сайдбара) — 275px. Размер в процентах вычисляется по формуле:

 Продолжаю серию статей по адаптации сайтов для мобильных «mobile optimized». Уже набиты первые шишки, но намечаются и некоторые успехи. Сегодня остановлюсь подробней на тех ошибках, которые указывает Google, и на правильной настройке области просмотра — базовой настройке. Сразу отмечу, что простого способа настроить сайт для мобильных мне найти не удалось. Так что если у вас какая-то стандартная CMS и вы безболезненно можете заменить тему на адаптивную — вы счастливый человек…

Пара ремарок

Во-первых. Ошибки по мобильной версии в Google Webmaster Tools после их исправления на сайте меняются по мере переиндексации страниц сайта, поэтому для работы и тестирования лучше использовать специальный инструмент Google, ошибки там соответствуют ошибкам в Google Webmaster Tools.

Во-вторых. Я выяснил, что Google не требует именно адаптивной версии, когда при уменьшении экрана блоки на сайте перестраиваются для более удобного просмотра. Достаточно реализации «резинового» дизайна и использования относительных шрифтов. Этими изменениями можно «закрыть» ошибки Google, чтобы сайта считался оптимизированным для мобильных.

Ошибки оптимизации для мобильных

Ошибки, которые указывает Google при оптимизации для мобильных:

Судя по всему Google всерьез решил взяться за сайты, не оптимизированные для мобильных устройств. С начала этого года я получил уже с десяток сообщений о неоптимизированных для мобильного просмотра сайтов. Google пишет, что некоторое количество страниц вашего сайта не оптимизированы для просмотра на мобильных устройствах и в результатах поиска для смартфонов они будут ранжироваться соответствующим образом. Плохо будут ранжироваться, другими словами.

 Теория гласит, что скорость отклика сервера, как и скорость загрузки страницы, влияет на индексацию и позиции сайта. Пользователь на быстро загружаемых сайтах чувствует себя счастливым и удовлетворенным, а показателями этого счастья служат различные поведенческие факторы. В конце прошлого года мне удалось на практике проверить эти утверждения.

Предыстория

Некий сайт лежал на сервере и работал. Сайт — информационный каталог, в Гугле на сегодня больше 2000 страниц. Реализован на Joomla с несколькими «тяжелыми» компонентами. В меру оптимизирован, но без фанатизма. Сервер был выделенным, но медленным. Серверная часть была оптимизирована, без фанатизма. «Узким горлышком» сервера был процессор, поэтому статика выдавалась достаточно быстро, а вот скрипты работали долго, что усугублялось тяжелыми компонентами Джумлы и большим количеством SQL-запросов, характерными для этой CMS.

Вот обнаружил пост о правильном сопровождении процесса тестирования сайтов и посадочных страниц с точки зрения SEO и индексации сайта поисковыми системами. Посту год, но он вполне актуален и сегодня.

Какое бывает тестирование сайтов и лендингов?

Ниже 3 варианта тестирования сайтов и посадочных страниц и набор действий по SEO для каждого варианта.

Тестирование сайта