Показатель отказов: от чего он зависит?

Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы...

Копия сайта и необходимость ее создания

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

Грамматические ошибки на сайте: накажут ли за них поисковики?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник