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

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

Кейс: время отклика сайта и SEO

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

0

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

Предыстория

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

Как подружить SEO и тестирование сайтов и посадочных страниц

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

1

A/B testing & SEOВот обнаружил пост о правильном сопровождении процесса тестирования сайтов и посадочных страниц с точки зрения SEO и индексации сайта поисковыми системами. Посту год, но он вполне актуален и сегодня.
Сейчас, в эпоху моды на входящий маркетинг, тема тестирования и оптимизации конверсии посадочных страниц или лендингов не сходит с главных страниц профильных сайтов и изданий, а количество заголовков, где встречается фраза «A/B тестирование» исчисляется тысячами. Какое бывает тестирование посадочных страниц и сайтов и как учесть старое доброе SEO во время тестов?

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

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

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

Во время тестирования сайта весь сайт или его отдельные разделы существуют в двух экземплярах: текущая и новая версия. Часть аудитории перенаправляется на новую версию и делается сравнение в поведении аудитории. С точки зрения SEO существует два сайта с дублирующим контентом. Поскольку время на тестирование нужно немало, то значительный объем новой версии сайта окажется проиндексированным поисковыми системами. Что нужно сделать:
  1. Запретить индексацию новой версии, лучше всего в robots.txt, чтобы страницы тестового сайта не попали в индексы поисковых систем
  2. Если для перенаправления пользователей используется серверный редирект, то следует использовать 302-й — он временный.
  3. После окончания тестирования настроить перенаправления на основную версию, чтобы даже случайные заходы на тестовую версию не ушли в никуда.
Главная > Записи с тегом "вебмастеринг"