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

Размер элемента в пикселях / Размер родительского элемента в пикселях * 100

В нашем случае размер основной колонки будет равен: 725/1000*100=72,5%
Размер правой колонки будет: 275/1000*100=27,5%
Если же в правой колонке у нас есть виджет размером 225 пикселей, то его размер необходимо уже считать относительно ширины правой колонки: 225/275*100=81,818182%

Аналогично рассчитываются размеры для margin и padding, их желательно тоже переводить в проценты. Но без фанатизма. Где-то можно оставлять отступы в 1-3 пикселя в пикселях.

Для того, чтобы картинки при сжатии экрана также масштабировались, надо добавить в стили для сайта следующий код:

img {
max-width:100%;
height:auto;
}

Относительный размер шрифтов

Размер шрифта переводится в пункты точно таким же образом. Базовый размер шрифта — 16 пикселей, т.е. один пункт по умолчанию равен 16 пикселям (1em=16px). Если нужен другой размер шрифта в пунктах, то он рассчитывается по формуле:
Размер шрифта / Размер шрифта родительского элемента (базового)
Для примера, размер шрифта 12 пикселей в пунктах будет:
12px / 16px = 0.75em

Кстати

Кстати, в случае Google инструмент инструменту рознь. Если проанонсированный мной ранее специальный инструмент для проверки «мобильности» говорит, что все нормально и горит зеленым, то Google Page Insights выдает ошибки. А Google Webmaster Tools ориентируется на Page Insights, судя по моим сайтам. В нем и надо проверять.

Сделать резиновый дизайн из фиксированного можно не только с версткой div’ами, но и при верстке таблицами, принцип тот же самый — переводим размеры из пикселей в проценты. Проверил — работает.

Я уже модифицировал несколько сайтов, жду переиндексации и результатов в Google Webmaster Tools, после этого опубликую примеры.

Осталось еще разобраться с расположением кнопок, ссылок в меню и некоторых других блоках, чтобы исправить ошибку «Интерактивные элементы расположены слишком близко». Об этом в следующий раз.

Подписывайтесь, лайки и шары приветствуются!