Способы адаптивного дизайна являются крайне полезными для разработчиков, по причине того, что они разрешают нам предоставлять контент в широком диапазоне устройств без необходимости поддерживать отдельные предположения сайта и без недочётов вторых способов, таких как масштабирование и “жидкие макеты”.
Эта статья выделит 3 самый распространенные неточности, с которыми возможно столкнуться в адаптивном дизайне, и предоставит кое-какие решения этих неточностей.
Масштабирование, “жидкий” макет, адаптивный макет
Существует путаница по поводу этих понятий и дизайнеры довольно часто неправильно применяют их как взаимозаменяемые. В действительности, каждое из них – разные эволюционные шаги в технике макета, каковые появлялись в течение продолжительного времени в соответствии с достижениями в области разработок.
Макеты масштабирования предназначены для масштабирования каждого элемента по отношению к любому второму элементу. Они адаптивны в том смысле, что будут масштабировать контент динамически в ответ на трансформации в размере окна просмотра. Сам макет остается неизменным, изменяется размер каждого элемента, дабы сохранять надлежащий вид.
Выше продемонстрирован пример макета масштабирования при различных разрешениях: дизайн жертвует читаемостью для согласованности.
“Жидкие” макеты отличаются, по причине того, что они масштабируют элементы по отношению к размеру окна просмотра. Это достигается посредством относительных единиц, таких как em, дабы преодолеть проблему сокращения текста. Дизайн возможно нарушен масштабированием пользователя.
Выше продемонстрирован пример “жидкого” макета в разных разрешениях: дизайн жертвует согласованностью для удобства чтения.
Адаптивные макеты ничего не масштабируют. Вместо этого, они изменяют то, что отображается в зависимости от размера окна просмотра.
Выше продемонстрирован пример адаптивного макета на различных разрешениях.
Трагедия № 1: размещение меню
Если вы используете navbar в верхней части страницы, адаптивный дизайн переносит его в более компактный формат, в то время, когда страница отображается на мелком экране. Но это не всегда работает идеально, в случае если область отображения шире, чем точка останова, но через чур мелка, дабы отобразить все пункты меню в одной строке.
Имеется пара способов решить эту проблему. Во-первых, уменьшить количество элементов, отображаемых в горизонтальном положении на панели навигации методом сортировки их на категории и подкатегории. Вы имеете возможность применять раскрывающиеся пункты, дабы отобразить подкатегории при выборе категории.
Второй метод содержится в трансформации точки останова на нижнее значение. Фактическое число это ширина, при которой ваш navbar имеет недочёт, не конкретный размер устройства.
Третий метод – применение другого меню для устройств, таких как sliding drawer.
Трагедия № 2: применение изображений фиксированной ширины
Область контента в большинстве случаев устанавливается к размеру по отношению к области просмотра. Исходя из этого, в то время, когда фиксированная ширина изображения шире, чем размер области, происходит обрезка изображения.
Выше продемонстрирован пример нехорошей фиксированной ширины изображения, которое через чур громадно: оно имеет контент и полосу прокрутки выдвинули за экран.
Вы имеете возможность избежать данной неприятности, применяя относительные единицы для установки ширины изображения, либо если вы используете фреймворк, что его поддерживает (к примеру, Bootstrap), вы имеете возможность применять class responsive image (к примеру, class=”img-responsive”).
Выше: тот же элемент с подходом responsive image class, сейчас полосы прокрутки нет.
Трагедия № 3: искажение элемента
Это мало неясно, но по сути это то, что происходит, в то время, когда ваш макет отображается на маленьком окне просмотра, а каждые необработанные колонки выглядят как строки. Это есть проблемой, по причине того, что искажение контента без злого умысла изменяет иерархию вашего дизайна.
Выше: столбец делается строчком, искажая содержание.
Ответ разумеется, но страно, как много людей с этим борются: высоту, ширину и отступы элемента очевидно. Если он выходит из положения и охватывает другие элементы, вы имеете возможность вынудить его быть в том месте, где вы желаете, переведя его в div и установив поля.
Планирование оказывает помощь избежать неточностей
В данной статье обсуждаются лишь 3 чаще всего видящихся бедствий адаптивного дизайна, но имеется много других неприятностей. Предотвращение неточностей есть не через чур сложным делом. Современные браузеры имеют встроенные тестирования на адаптивный макет, так что планируйте собственный дизайн шепетильно и чаще тестируйтесь.
Высоких конверсий!
Случайные статьи:
- Успешные люди действуют, а не ждут подходящего момента
- Почему вы не делаете сплит-тест, или война между креативом и статистикой
Понятие адаптивного дизайна — Ответ профессионала (+Практика)
Подборка похожих статей:
-
Будущее за адаптивными сайтами?
Новейшие технологии не стоят на месте, и вот уже передвеб-ресурсами стоит задача не только подстраиваться под пользователя, нои приспособиться под его…
-
Оптимизация дизайна для быстрого тестирования прототипов
Если вы занимаетесь разработкой, то вам точно привычны такие способы, как юзабилити-тестирование (usability testing — проверка эргономичности) и…
-
Руководство для новичков: простой адаптивный сайт при помощи css
Все говорят об адаптивном веб-дизайне. Но значит ли это, что все знают, для чего он нужен? Респонсивный дизайн – это не только разработка сайтов для…
-
Респонсивный vs адаптивный дизайн: что лучше для пользователя?
Современные веб-маркетологи и разработчики все чаще отдают предпочтение респонсивному дизайну (responsive design), разрешающему создать страницу,…