Ещё год-два назад я вряд ли мог бы внятно объяснить разницу между «мобильной версией» и «адаптивным дизайном». Но работа в агентстве быстро стирает такие границы. Прошлым летом ко мне обратился клиент из статусной ниши с проблемой: его сайт, который с монитора iMac выглядел как глянцевая картинка из журнала, на обычном Android-телефоне превращался в нечитаемую головоломку с горизонтальной прокруткой. Нужно было найти простое объяснение и решение.
Как выяснилось, очень часто ответ кроется в одной строчке кода - @media.
Медиазапросы
На тот момент, в июле 2015 года, это был уже не новый, но всё ещё не повсеместно понятный инструмент. Технически, он просто говорит браузеру: «Если экран меньше такой-то ширины, примени вот эти стили вместо тех».
Например:
@media screen and (max-width: 768px) { /* стили для планшета */ }
или
@media screen and (max-width: 480px) { /* стили для телефона */ }
Это значит: «Если ширина экрана меньше 768 пикселей, примени вот эти правила». С их помощью можно менять шрифты, перестраивать колонки в одну, скрывать лишние декоративные элементы - чтобы на маленьком экране оставалась только суть.
Но пока я разбирался с синтаксисом, чтобы объяснить клиенту, меня посетила мысль. В 2015 году Google официально объявил о «Mobilegeddon» - обновлении, которое ставило мобильную адаптацию в приоритет для ранжирования. И это было не просто техно-нововведение. Это был сигнал. Сигнал о том, что:
Удобство человека в метро с телефоном - важнее красоты вёрстки на широком экране.
Я представил, как потенциальный клиент, стоя в пробке или в метро, ищет на телефоне услугу. Он заходит на красивый, но негибкий сайт. Шрифт мелкий, кнопка «Заказать» уплывает за край. И он просто закрывает вкладку. Уходит к конкуренту, чей сайт «подстроился». Все усилия по подбору запросов разбивались о простой факт - людям было неудобно.
В тот момент медиазапросы перестали для меня быть частью вёрстки, и стали метафорой того, как цифровой продукт должен проявлять эмпатию. Это тот самый момент, когда код перестаёт быть просто кодом и становится жестом вежливости. Как если бы хозяин, заметив, что гостю неудобно, тут же подал другой стул.
С тех пор мой подход к аудиту любого проекта изменился
Я обязательно открываю инструменты разработчика (F12) и начинаю «сжимать» окно, имитируя разные экраны. Смотрю не столько на то, ломается ли вёрстка, а на то, удобно ли остаётся. Потому что если неудобно - все хитроумные схемы по наращиванию трафика теряют смысл. Трафик будет приходить и сразу уходить.
Это был небольшой, но важный поворот в мышлении. От чисто технической оптимизации - к целостному взгляду на пользовательский опыт. Я начал задавать себе и коллегам другой вопрос: «А что видит и чувствует человек на телефоне «прямо сейчас»?». Не «как там индексируется», а «как там нажимается».
Путь маркетолога как раз включает в себя е моменты, когда ты начинаешь видеть за инструментами вроде @media - живых людей, а за технической задачей - их настоящие потребности и контекст, в котором они находятся здесь и сейчас.
