5 способов сделать контент адаптивным

Проверяем, как выглядят страницы сайта на мобильных устройствах:

Инструмент Google. Видно только смартфон.

Другой инструмент. Видно что угодно.

1. Размер элементов

HTML-элементы измеряются в пикселях и процентах. Если «width» — ширина — указана в пикселях, а элемент шире экрана (в случае с телефонами), пользователю придется скроллить горизонтально.

Эту величину можно указать в процентах. Если установить 50%, браузер покажет элемент в половину от ширины экрана.

Исключение: пиксельное измерение величины не мешает адаптивности, если использовать медиазапросы. О них дальше.

2. Форма элементов

Страницы могут менять не только размер, но и форму при просмотре с мобильных устройств — это возможно благодаря медиазапросам. В CSS они выглядят так:

@media screen and (max-width: 1020px) {    
    #container, #header, #content, #footer {        
        float: none;        
        width: auto;    
    }    
    p { 
        font-size: 2em;
    }
}

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

3. Поп-апы — зло

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

Решение 1. Поп-апов нет.

Решение 2. Окно с 1-2 полями, легко закрывается.

Решение 3. Окно появляется, если пользователь сам его вызвал.

4. Боковая панель

Десктопная боковая панель отвлекает внимание в мобильной версии. Бывает, что элементы подгружаются не одновременно — тогда пользователь раздражается и уходит.

Решение 1. Сделать адаптивную боковую панель.

Решение 2. Убрать панель с помощью медиазапросов.

Копирайтерам: Меньше букв для мобильной версии. Делайте тексты ёмкими, не нужно лонгридов.

5. Приоритет в мобильном поиске

Google отдает приоритет сайтам, заточенным под мобильные устройства.

Нужно выбрать:

1. Адаптивная версия — дорого, хорошо для поисковой оптимизации
2. Мобильная версия — дешевле, хуже индексируется
3. Динамический показ — дешевле, хуже индексируется

Проверять показатели сайта здесь и тут.