Основные принципы адаптивного дизайна сайтов

Вернуться
Опубликовано: 17.05.2015 г.

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

 

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

Понятие «потока»

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

Размеры – только в относительных единицах

Создавая сайт, вы должны рассчитывать, что он будет отображен не только на каких-то конкретных устройствах, например, с шириной в 320, 768 и 1440 пикселей. Страница должна одинаково хорошо смотреться на всем многообразии экранов устройств, существующих на рынке. Поэтому жестко задавать размеры элементов в пикселях не выйдет, и очевидное решение – относительные единицы. Так можно быть уверенным в том, что если элементу задать ширину 50%, он займет половину экрана и на смартфоне, и на планшете, и на стационарном ПК.

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

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

Максимальная и минимальная ширина

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

Вложенность объектов

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

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

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

1703 0

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

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