9 основных принципов адаптивного веб-дизайна

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

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

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

Адаптивный дизайн или адаптированные версии веб-сайта?

Данные два противоположных подхода могут хорошо дополнять друг друга, если применять их осознанно. Разумеется, их конкретное применение должно определяться контентом:

9 основных принципов адаптивного веб-дизайна

Поток

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

9 основных принципов адаптивного веб-дизайна

Относительные единицы измерения

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

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

9 основных принципов адаптивного веб-дизайна

Точки разрыва

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

Если при определенном разрешении абзац текста начинает выглядеть странно или иллюстрация выходит за пределы экрана, надо задать точку разрыва здесь. Но, задав слишком много точек разрыва, без проблем запутаться в них и в связанных с ними классах:

9 основных принципов адаптивного веб-дизайна

Максимальные и минимальные размеры

Использовать для выведения контента всю ширину экрана без остатка – отличная идея, если мы имеем дело с экраном смартфона. Но если использовать аналогичным образом широкий экран монитора, контент просто перестанет восприниматься. Здесь нам на помощь приходит CSS -атрибут ‘ max-width ’.

К примеру, если мы задаём ширину блока контента в 100%, а максимальную ширину – в 1000 пикселей, то мы можем быть уверены, что контент будет занимать весь экран, но не выйдет за предел в 1000 пикселей по ширине:

9 основных принципов адаптивного веб-дизайна

Вложенные объекты

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

Но можно поместить группу элементов в блок-контейнер, и в дальнейшем управлять позицией и размером контейнера. Этот приём также упрощает работу с элементами, имеющими абсолютные размеры, например, логотипами и кнопками:

9 основных принципов адаптивного веб-дизайна

Какой экран учитывать в первую очередь?

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

Наиболее простым считается первый метод, и он получил широкое распространение среди дизайнеров под названием “ Mobile First ”. Приступая к работе, прикиньте, какой из способов предпочтительнее для вас и для содержимого веб-сайта:

9 основных принципов адаптивного веб-дизайна

Встраиваемые или системные шрифты?

Хотели бы использовать на веб-сайте крутую типографику? Используйте встраиваемые шрифты. Но учтите, что каждая гарнитура, загружаемая из Сети, увеличивает время загрузки страницы. Шрифты, имеющиеся на устройстве покупателя, загружаются мгновенно, зато их внешний вид и соответствие дизайнерскому замыслу может оставлять желать лучшего:

9 основных принципов адаптивного веб-дизайна

Растровые или векторные картинки?

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

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

Векторные картинки «плоских» объектов обычно имеют крошечные размеры, но псевдо реалистичные векторные картинки со множеством кривых и градиентов могут весить больше, чем их растровые копии. И имейте в виду, что некоторые старые браузеры не поддерживают формат SVG:

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

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

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