3 шага к оптимизированному для мобильных сайту

Опубликовано в : 10-04-2015 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг

1

Исправление всех ошибок по мобильной версии На графике количество ошибок с просмотром сайта на мобильных на сегодняшний день для этого блога. Как видно, мне удалось избавиться от всех ошибок без замены темы WordPress на адаптивную, а также избавиться от ошибок на архиве блога, который представляет собой просто набор html-файлов, сгенерированных когда-то движком Movable Type.

Итак, три шага по оптимизации сайта для просмотра на мобильных.

1. Настраиваем область просмотра meta viewport

Самый первый и самый простой шаг — настроить область просмотра. Для этого в шаблон сайта надо добавить мета-тег meta viewport. Без дальнейших шагов, такое добавление мало чем поможет: в Google Webmaster Tools вместо одних ошибок начнут появляться другие, а при просмотре на мобильных сайт будет показываться с горизонтальным скроллингом.

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

Опубликовано в : 13-03-2015 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг

0

Архив блога в инструменте Page Speed Insights Пятница, 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. Размер в процентах вычисляется по формуле:

Настраиваем область просмотра для мобильных

Опубликовано в : 04-03-2015 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг

1

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

Пара ремарок

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

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

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

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

Адаптация сайтов для мобильных

Опубликовано в : 24-02-2015 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг

0

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

GTM и отслеживание 404-й ошибки

Опубликовано в : 18-12-2014 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг

0

Два года назад я писал, как отслеживать 404-е ошибки в Google Analytics c помощью виртуальных просмотров страниц (PageViews) и как все прикрутить к WordPress. За два года Google интенсивно внедряет Universal Analytics и появился такой удобный инструмент, как Google Tag Manager (GTM), а значит обработку 404-х ошибок стоит пересмотреть.
Воспользуемся преимуществом GTM делать необходимые изменения через веб-интерфейс, изменений в коде сайта делать не потребуется. Единственное условие — наличие шаблона страницы для ошибки 404 с кодом GTM.
Поскольку URL страницы нам заранее неизвестен, никаких редиректов при этом нет, то ловить ошибку будем по title страницы, хотя можно и по другим элементам. В моем случае title страницы с ошибкой начинается с фразы «Nothing found», эту фразу я и буду считать показателем случившейся 404-й ошибки:
title страницы 404-й ошибки

1. Первым шагом надо сделать макрос, который будет содержать title страницы, такого макроса по умолчанию нет:

Главная > Архив рубрики "Вебмастеринг"