Для удобства чтения готового сайта на различных устройствах предусмотрена гибкая верстка, а не фиксированная, как было раньше. Компоненты «резиновой» конструкции приспосабливаются к тому или иному размеру экрана. Метод реализуется посредством разметки, задающейся в процентах. Так получается два варианта «резинового» макета, лишь один из которых выполнен в пикселях. Но в смартфоне картина будет выглядеть все-таки еще не очень хорошо. Для решения проблемы сайты делают на адаптивном типе макета, создающемся с помощью сетки. В результате страницы становятся красиво приспособленными под разные экраны мобильных устройств, ноутбуков и ПК.
МОДУЛЬНАЯ СЕТКА
Как создать правильный дизайн, адаптирующий сайт под габариты мониторов? Сначала нужно спроектировать сетку, решив вопросы с ее параметрами: число колонок, поля, отступы. Стараются понять, как ведет себя конструкция в разных условиях смены мониторов, браузеров. После этого разметка наполняется контентом и элементами, расположение которых ориентировано по ней. Все проектирование может быть выполнено под несколько контрольных точек.
Сетку модульного типа можно скачать. Например, весьма удобны шаблоны, предлагаемые платформой фрэймворк Bootstrap. Также ее выполняют самостоятельно, рассчитав на холст избранного размера. Вариант на 960 пикселей хорошо адаптируется под мобильную и планшетную версии. Страница удобно делится на 12, 16 колонок или 24. Размер рабочей области влияет на то, под сколько разрешений и на каких мониторах дизайн будет сверстан. Сетка включает следующие компоненты.
- Поля, за которые нельзя заступать, размещать там элементы.
- Модули в виде колонок, представляющие собой ее главные единицы.
- Важны очерчивающие направляющие линии, которые также могут быть горизонтальными в разметке дизайна. В последнем случае модулем будет считаться квадрат.
ЧТО ЭТО ДАЕТ?
С помощью сетки легче делать одинаковые отступы между блоками, выравнивать элементы один относительно другого. Для сайта задается структура, систематизирует дизайн. При упорядоченной композиции становится понятным, сколько модулей занимает кнопка либо заголовок, как он будет выглядеть при адаптации под размеры экрана. Заведомо предопределяются пропорции, ограничения. Итак, макеты можно разделить на фиксированный, «резиновый» и адаптивный относительно того, как сайт приспосабливается к показу на экране. Используемая в последнем типе модульная сетка помогает визуально разделить проектируемую страницу для упорядоченного размещения элементов контента на ней. Такое решение дает возможность наиболее приемлемо, универсально адаптировать сайт под размер экрана. А также облегчает, ускоряет работу над ним.