Три несчастья отзывчивого дизайна и способы их предотвращения.

Перевод статьи:  3 Responsive Design Disasters — and How to Avoid Them.
Автор:  Emma Grant.

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

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

Масштабирование vs. резиновый макет vs. отзывчивый дизайн.

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

Масштабируемые шаблоны работают по принципу изменения размеров каждого элемента по отношению ко всем остальным элементам. Их «отзывчивость» заключается в том, что они масштабируют контент в ответ на изменения размеров вьюпорта. При этом сама компоновка остается статической, а изменениям подвергается только размер каждого элемента, внешний вид сайта будет прежним, изменяясь лишь в размере.

Масштабируемый дизайн.

На иллюстрации демонстрируется масштабируемый шаблон при различных разрешениях устройства. Дизайн жертвует читабельностью в пользу устойчивости шаблона.

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

Резиновый макет.

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

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

Отзывчивый макет.

Примерно вот так ведет себя отзывчивый макет при различных разрешениях экрана.

Проблема первая. Смещение элементов меню на следующую строку.

Если вы используете навигационную панель в верхней части веб-страницы, то предполагается, что отзывчивый дизайн «свернет» ее до более компактного вида при отображении страницы на маленьком дисплее. Однако это не всегда работает корректно в ситуациях, когда область отображения является еще достаточно большой для достижения контрольной точки (или точки перехода на другой, удовлетворяющий размеру вьюпорта шаблон), но в то же время слишком малой для отображения всех элементов меню в одну строку. Как результат, имеем перенос некоторых ссылок на следующую строку.

Сворачивание меню.

Существует несколько путей решения этой проблемы. Первый заключается в снижении количества горизонтально отображающихся элементов меню, что достигается посредством группировки их в категории и подкатегории. При выборе пользователем определенной категории, подкатегории появляются в качестве выпадающих (drop-down) элементов меню.

Второй метод предусматривает изменение значения срабатывания контрольной точки в сторону уменьшения. Реальное значение, которое необходимо использовать в данном случае должно соответствовать ширине, при которой ваша навигационная панель начинает «падать» вниз, а не то, которое привязано к размеру определенного устройства.

Третий вариант заключается в применении различных видов меню для разных устройств, к примеру, выдвижные панели (SlidingDrawer).

Проблема вторая. Использование изображений фиксированной ширины.

Области отображения контента, как правило, устанавливаются относительно вьюпорта. И в ситуациях, когда изображения фиксированных размеров становятся шире доступного пространства, происходит их обрезание.

Слишком большое изображение.

Пример неудачно подобранного фиксированного размера изображения, которое слишком большое. Это приводит к появлению полос прокрутки и смещению контента за видимую область.

Данной проблемы можно избежать путем использования относительных единиц измерения при определении ширины изображения. А если вы работаете с фреймворком, который их поддерживает (к примеру, Bootstrap), то достаточно будет добавления изображению класса, определяющего его как отзывчивое (например, class="img-responsive").

Отзывчивое изображение.

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

Проблема третья. Искажение элемента.

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

Искажение шаблона.

Колонка превращается в строку, уродуя ваш контент.

Решение данной проблемы лежит на поверхности и удивительно, почему у многих людей это вызывает трудности. Необходимо просто явным образом установить размерности элемента (ширину и высоту), что позволит избежать его деформации. Если же элемент смещается со своей «штатной» позиции и/или накладывается на другие элементы, то путем помещения объекта внутрь дива с установкой полей, вы сможете заставить его оставаться на месте в любой ситуации.

Заблаговременное планирование позволит избежать ошибок.

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

Комментариев: 3 на Три несчастья отзывчивого дизайна и способы их предотвращения.

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

  2. Ещё бы несколько примеров отзывчивого дизайна( я имею ввиду кода) было бы очень хорошо.
    Возможно где то на сайте они у вас и есть,поскольку не хотелось бы перепрыгивать с сайта на сайт в поиске примеров кода
    спасибо
    Катя

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *