Точки перелома — Примеры

Пример 1 — Отметки ширин, где ломается содержимое

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

Заметки при сужении
  на ~940px  боковая панель сжимает основной текст ниже 45 символов
  на ~620px  сетка карточек в три колонки даёт строки в два слова

Решение

940px и 620px, выбраны по содержимому, а не по названиям устройств

Широкое   >= 940   содержимое и боковая панель рядом
Среднее   620-939  боковая панель уходит под содержимое
Узкое     < 620    одна колонка, сетка карточек складывается в стопку

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

Пример 2 — Проектирование узкого расположения на его собственных условиях

Сейчас на 360px широкая раскладка сжата в одну колонку, а ряд фильтров и промо всё ещё тянутся следом, потому что их было проще оставить, чем убрать. Решите, для чего страница нужна, когда колонка только одна, и что она отбрасывает.

Широкое (>= 940)
  заголовок, поиск, ряд фильтров (6 фильтров),
  результаты, постраничная навигация, промо-баннер

Решение

Узкое (< 620)
  заголовок
  поиск                  <- главное действие, остаётся наверху
  результаты
  [ Фильтры (6) ]        <- фильтры уходят во второстепенный вид
  постраничная навигация
  промо-баннер           <- перенесён под результаты

Узкая раскладка сохраняет главное действие и заголовок, складывает шесть фильтров за один элемент управления и переносит промо под содержимое, которое оно прерывало. Проектирование на 360px без взгляда на широкую раскладку — то, что обнажает элемент, который выжил лишь потому, что его удаление казалось потерей работы. Ошибка, от которой нужно беречься, — отношение к узкому экрану как к сжатому широкому: отсюда и берутся строки по четыре слова и блоки, которые налезают друг на друга.