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

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

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

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

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

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

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

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

Поток

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Растровые или векторные изображения?

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

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

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

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

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

Перевод статьи «9 basic principles of responsive web design» был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

16 лучших примеров дизайна главной страницы сайта

Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, ...