Оптимизация сайта под мобильные устройства

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

Давайте разбираться....

Основы

1. На сайте должен быть внедрен метатег viewport - при помощи него мы можем задавать масштаб странице при первой загрузке, указывать максимальное увеличение или совсем отключать увеличение.

Мобильные браузеры по разному отображают сайты, в отличие от настольных компьютеров и ноутбуков, поэтому в safari уже давно введен тег viewport, далее всеми позаимствован как удобное решение:

Пишется он так:

а)

<meta name="viewport" content="width=device-width">

в этом ширина окна будет равна не стандартным 980px, а равняться ширине окна.

б) но ниже вариант, который является самым популярным - он выделяем ширину окна и задает начальный масштаб:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

в) есть еще вариант, когда помимо этого запрещается масштабирование при загрузке и далее еще и пользовательское - то есть сколько бы он не расширял, у него ничего не получиться - это делается, когда шрифт подобран конкретно для мобильных устройств например:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

!!!
 Тег viewport для android устройств имеет свое написание:

<meta name="viewport" content="target-densitydpi=high-dpi" />

Media Queries - медиа запросы

2. Вторым пунктом нужно поговорить о них - медиа запросы - это создание точек по разную ширину экрана мобильных устройств. То есть создаем media queries под каждый популярный стиль под ширину 320px 640px 920px и тд. - обычно делают универсально, задавая правила для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

Чтобы было представление выглядят они так:

@media screen and (max-width: 960px) {
    .class {
        background: red;
    }
}

то есть достигая ширины в 960px фон для блока с классом class станет красным.

Вообще нужно отметить, что Coogle сам подсказывает ошибки, если сайт не оптимизирован под мобильные устройства и другие ошибки сайта.

И выдаст в виде списка и такие предупреждения:

Напомню, что оптимизация сайта под мобильные устройства учитывается в алгоритме Владивосток от Яндекса

Приятные фенечки

Для тех у кого сайт установлен на популярных cms системах - "везунчики" - все можно сделать одним кликом, например:

• для wordpress - просто установите плагин WPtouch и он все сам за вас сделает.

Автоматические онлайн сервисы для создания мобильной версии сайта

Если вы не знаете html, css и тем более php , то специально для вас есть автоматическое создание мобильных версий сайта в онлайн режиме.