Девять основных принципов адаптивного дизайна

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

Адаптированный дизайн или адаптированные версии сайта?
Подходы весьма разные. Их применение определяется самим содержимым сайта.

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

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

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

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

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

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

Системные шрифты или встраиваемые?
Если Вы подгружаете шрифт из сети, то скорость загрузки увеличивается, рекомендуем Вам использовать стандартные шрифты.

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

Успехов Вам!

Категория: Web

Похожие статьи