Перестаньте использовать контрольные точки устройств

Автор: Adam Silver    Источник: medium.com
08.05.2017
720
0
img

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

Когда интернет только появился, мы использовали ширину 640 пикселей. Через несколько лет, когда на рынке появились большие мониторы, мы начали использовать ширину 960 пикселей и забыли о людях с меньшими мониторами.

Прошло еще несколько лет. Появился мобильный интернет. А если точнее, появилась возможность открывать сайты на телефонах, у которых были маленькие экраны. Появилось миллион новых браузеров и миллион новых устройств. Затем появились медиа запросы.

Мы решили использовать для мобильных ширину 320 пикселей. Почему? Потому что у многих из нас есть iPhone, а его ширина в портретном положении 320 пикселей. За ним следует ландшафтное положение. Потом планшеты. Потом настольные устройства. Потом супер большие thunder мониторы, или как их там называют. Потом телевизоры. Потом наручные часы и т.д.

Веб – это не принтер. Веб – это веб, мы не знаем, какого размера экран у пользователя. Мы не можем это контролировать. А если бы и могли, то все ровно не было б смысла подстраиваться из-за скорости появления новых устройств.

Но есть кое-что, что мы знаем. Мы знаем свой бренд и свой дизайн. И, что еще важнее, мы знаем свой контент. Контент – это не просто абзацы текста. Это то, что держит или то, что содержится в чем-то.

Мы всегда должны начинать с контента. Без контента дизайн не имеет смысла. Дизайн помогает пользователям потреблять контент. Мы не используем контент, чтобы пользователи насладились дизайном. Как выразился Фрэнк Чимеро (Frank Chimero) на The Web’s Grain, это как раз самое худшее, что мы можем сделать.

Как разрабатывать дизайн, зная контент?

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

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

Мы должны позволить контенту вести нас. Контрольные точки нужно ставить тогда и если контент этого требует. Нужно называть их контрольными точками контента или как называет их Фрэнк Чимеро – точками повторной сборки.

Рассмотрим для примера форму подписки на сайте MaintainableCSS. Учитывая контент, на маленьком экране кнопка располагается под текстовым полем. А когда появляется место, они стают рядом.

Медиа запросы используют точку 36em. Почему? Потому что именно в этот момент появляется возможность для перестройки контента. На экранах большого размера нет смысла растягивать кнопку и текстовое поле на всю ширину. Потому это исправляется.

И это относится только к форме подписки. Нет такого правила, которое бы гласило, что 36em – это «большой экран». Контрольная точка отражает потребности конкретного модуля.

Технически это все те же медиа запросы. Разница в подходе. Дизайн поддерживает контент, а не наоборот.

Именно из-за этого CSS фреймворки вызывают проблемы, излишне ограничивая контент и пытаясь встроить его в определенную сетку. Как фреймворк узнает о том, какой у нас контент? Никак.

Термин «mobile first» заставляет нас принимать решения, исходя из размеров устройств. Но веб – это не набор устройств. Веб – это безграничный континуум. Это самое крутое предложение, которое я когда-либо писал.

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

Позвольте контенту вести вас. Если и когда он сломается, пересоберите его в нужной для контента контрольной точке.

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

ПОХОЖИЕ СТАТЬИ: