У многих дизайнеров возникают трудности при создании адаптивных и мобильных версий сайта. Зачастую непонятно, где какие элементы располагать и какого размера они должны быть. В данной статье я хочу показать, что это не так уж и сложно, особенно если использовать в работе модульную сетку. Вообще модульные сетки — это прекрасный инструмент, который помогает дизайнеру сильно упростить работу, а результат сделать более профессиональным, эстетичным и приятным для восприятия. Поскольку на данный момент мониторы работают в разрешениях, начиная с 1024?768 рх и выше, я считаю самой удобной 12-ти колоночную сетку, так как она идеально для них подходит. Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх.
Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.
Для большего удобства я предпочитаю дополнительно делить рабочую область вспомогательными базовыми линейками:
Предлагаю вам рассмотреть пример сайта с разрешением 1920?1080 и контентной частью в 960рх, так как на сегодняшний день они наиболее распространенные.
А вот как он выглядит с наложением сетки и линеек:
Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.
Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.
Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.
Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:
Заголовок тоже великоват. Поэтому, если нет возможности переноса на другую строку, уменьшаем размер шрифта. Вообще все заголовки по сайту можно уменьшить так, чтобы огромные буквы не резали глаз, а вся страница смотрелась более гармонично.
Наши «звезды» здесь пришлось переместить. И теперь каждой досталось по 4 колонки, появилась возможность немного раздвинуть текст.
Следующий блок тоже перестроился:
В некоторых случаях приходится уменьшать изображение, в других урезать текст. Но всегда необходимо сохранять важную информацию в центре внимания. Далее оставляем все как есть. И вот что у нас получилось:
Снова все ровно, четко, красиво и вписывается в сетку. Полностью сохранена структура страницы. В меньших разрешениях, вплоть до 480 рх, все делается по тому же принципу, останавливаться на них не стоит. А вот что действительно заслуживает внимания и считается самым сложным — это мобильное разрешение в 320?480 рх, им и займемся. Сокращаем нашу сетку до 4-х колонок и формируем шапку. Если логотип слишком большой, можно его немного уменьшить. В своем примере я оставляю все как есть. А вот номер телефона уже не помещается — его можно переместить ниже, убрать во всплывающее меню, а можно как у меня — оставить только кнопку для звонка.
В этом разрешении нужно по максимуму сократить количество всяческих картинок, чтобы снизить время загрузки сайта. Но если без основной картинки на главном экране никак не обойтись, ее можно сохранить. Только постараться сделать ее как можно легче. Шрифты заголовков уменьшаем, но так, чтобы все-таки было ясно, что это заголовок, а не просто текст. Расстояние между блоками также стоит немного сократить, главное — чтобы вся страница смотрелась пропорционально и гармонично
Здесь наши пункты со звездами выстаиваются одна под одной. Но бывают случаи, когда картинка, которую заменяет звезда, не слишком важна по смыслу (например, — небольшая иконка). Тогда моно и перестроить этот блок по такому примеру:
Данный блок тоже был перестроен. Фоновая картинка удалена, если изображение не несет никакой смысловой нагрузки — его лучше убрать. Этим принципом всегда стоит руководствоваться при создании мобильной версии сайта.
Карту оставляем нетронутой, самое главное — чтобы она в высоту вписывалась в 480 рх. И подвал обычно сложностей не вызывает.
Итак, вот что у нас получилось: структура снова полностью сохранена, все элементы расположены ровно, даже мобильная версия легка и приятна для восприятия, нет никаких лишних деталей, все на своих местах.
Из всего вышесказанного можно сделать вывод: сетки кажутся лишними, неудобными и ненужными только если вы никогда ими не пользовались. Но стоит с ними немного поэкспериментировать, найти для себя наиболее подходящие, как уже не представляешь своей работы без них.
Сеточная вязкость – это собирательный термин, характеризующий влияние особенностей построения сетки на получаемое в результате расчета поле течения.
В одномерных расчетах оно сводится к размазыванию фронтов волн.
В пространственных расчетах оно может обеспечивать эффект переноса количества движения в направлении перпендикулярном течению, т.е. воздействовать аналогично молекулярной вязкости газа.
В отдельных случаях данный эффект может зависеть от взаимного расположения линий тока и линий сетки.
Начальные условия – это совокупность параметров газа в расчетной области на момент начала вычислений.
Граничные (краевые) условия – это соотношения, определяющие методику расчета ячеек, прилегающих к границе расчетной области.
С математической точки зрения для решения стационарной задачи начальные условия не обязательны
От способа задания граничных условий существенно зависит результат и устойчивость вычислений
На входе/выходе в расчетную область, как правило, задается либо массовый расход газа (т.е. фактически скорость), либо давление: полное для втекания в область, статическое – для истечения
Под периодическими граничными условиями понимается ограничение расчетной области с осевой симметрией – сектором.
В ДВС периодические граничные условия могут ограниченно применяться для ряда задач. Например, для расчета течения через окна двухтактного двигателя в случае, если они расположены симметрично. Однако при этом возникают дополнительные погрешности (около 2% при расчете 1 окна из восьми)
Достаточно часто периодические ГУ применяется при расчете течения в каналах лопаточных машин, т.е. в частности турбокомпрессоров
Адаптивный дизайн – это процесс распределения шаблона таким образом, чтобы вся информация первой важности оказалась в первую очередь видна пользователям, которые используют устройства с маленькими экранами. Большинство дизайнеров выбирают сеточные шаблоны, так как этим видом шаблонов довольно просто управлять на многих устройствах.
Вы сами выбираете между фиксированным или гибким шаблоном. В нашем сегодняшнем руководстве мы хотим заострить внимание на гибких сетках и их важности в адаптивном дизайне.
Что такое гибкие сетки?
Важно узнать о предназначении гибких сеток до того, как начать думать о дизайнах. Вряд ли можно найти лучшее объяснение слову fluid (гибкий), чем написано на Wikipedia.
«Флюид (от лат. fluidis - «текучий») - вещество, поведение которого при деформации может быть описано законами механики жидкостей»
Итак, давайте мы постараемся объяснить выше описанное простыми практическими терминами. В веб-дизайне, это текучее вещество будет представлять собой наш дизайн или шаблон, и будет адаптироваться к размеру экрана наших пользователей. Независимо от того, каков размер устройства нашего пользователя, компоненты гибкого дизайна будут располагаться на экране так, чтобы пользователю было комфортно ими пользоваться.
Важность гибких сеток
В адаптивных сетках мы указываем размеры на основе пикселей. Следовательно, для некоторых окон устройств нам нужно вручную выставлять значения высоты и ширины. Так как гибкие сетки естественным образом заполняют размеры родительского контейнера, для некоторых экранов и устройств понадобятся ограниченные параметры.
Мобильные устройства становятся все меньше и меньше в размере, и люди предпочитают использовать их в повседневной работы. С другой стороны, настольные мониторы становятся больше, и разрешения отображения повышаются. Так что, разрабатывая адаптивный дизайн, мы не можем планировать его только для маленьких устройств. Преимущество гибких сеток заключается в том, что мы можем выставить параметр max-width, и тогда шаблон будет отлично отображаться даже на большом экране, так как здесь все указывается в процентном соотношении.
Как работают гибкие сетки
Мы привыкли разрабатывать дизайн при помощи фиксированных сеток и 960-пиксельной сеточной системы. Затем шаблоны стали адаптивными, в которых мы используем разное количество пикселей при разных размерах экрана. Все было основано на пиксельных шаблонах дизайна. Теперь пришло время создавать дизайны на базе процентных соотношений, и такие дизайны называются гибкими.
В гибких сетках мы определяем максимальный размер шаблона. Сетка делится на определенное количество колонок, чтобы шаблон оставался опрятным и им было легче управлять. Затем мы разрабатываем каждый элемент, используя пропорциональное соотношение ширины и высоты вместо разрешений, основанных на пикселях. Так что, когда изменяется размер экрана, элементы будут подстраиваться по ширине и высоте, удерживая пропорцию.
Перед тем, как мы глубже окунемся в гибкие сетки, давайте немного познакомимся с примерами гибких дизайнов, чтобы понять, о чем пойдет речь.
Генераторы и системы гибких сеток
Не так-то просто создать гибкую сетку с нуля, так это на это требуется довольно много времени и усилий. Следовательно, гораздо лучше будет воспользоваться CSS Grid Framework или Grid Generator в качестве основы нашего шаблона. Предлагаем вашему внимаю несколько бесплатных CSS сеточных систем и генераторов.
Большинство CSS сеточных платформ предоставляются с расширенными свойствами, и многие из них были протестированы во всех современных браузерах. Цель данного руководства заключается в том, чтобы вы полностью поняли, что такое гибкие сетки. Итак, вам следовало бы сгенерировать гибкую сетку, которая позволит вам изучить основы гибких сеток.
Затем скачайте гибкую версию CSS-файла. Теперь откройте его в вашем любимом текстовом редакторе или осуществите поиск Grid >> 12 Columns. Нижеприведенный код отображает контент раздела Grid >> 12 Columns.
Container_12 .grid_1 {
width:6.333%;
}
Container_12 .grid_2 {
width:14.667%;
}
Container_12 .grid_3 {
width:23.0%;
}
Container_12 .grid_4 {
width:31.333%;
}
Container_12 .grid_5 {
width:39.667%;
}
Container_12 .grid_6 {
width:48.0%;
}
Container_12 .grid_7 {
width:56.333%;
}
Container_12 .grid_8 {
width:64.667%;
}
Container_12 .grid_9 {
width:73.0%;
}
Container_12 .grid_10 {
width:81.333%;
}
Container_12 .grid_11 {
width:89.667%;
}
Container_12 .grid_12 {
width:98.0%;
}
Как видно, container_12 – это основной контейнер. Каждый ваш элемент в дизайне должен быть внутри контейнера с классом container_12. Затем ширина в процентном соотношении задается классам.grid_1 , .grid_2 … .grid_n. Гибкие сетки создаются при помощи колонок, которые расцениваются как гибкие колонки. Когда размер экрана изменяется, ширина этих колонок также пропорционально изменяется в соответствии с родительским контейнером.
В нашей сетке есть 12 гибких колонок. Итак, давайте взглянем на то, как колонки расположены в нашем шаблоне.
Код для верхнего раздела приведен ниже. Вы можете проверить скачанные файлы, если вам нужно больше информации.
Fluid Grid with Fluid Columns
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
Каждый набор компонентов содержится внутри элемента с классом container_12. Внутри контейнера мы можем использовать класс grid_n для создания гибких колонок с указанной шириной. Используя grid_1 мы можем задать 1/12 от исходной ширины сетки, а grid_2 даст нам 2/12 от исходной ширины.
Вы можете запустить демо и попробовать изменить в размере окно браузера, чтобы посмотреть гибкую сетку в действии.
Вложенные гибкие колонки
Когда у вас есть CSS-платформа, вам будет довольно просто создать сетку с гибкими колонками. Но ведь не все дизайны будут такими же простыми, как пример, который мы показали ранее. Иногда нам нужно будет создавать колонки и строки внутри других колонок и рядов. Давайте посмотрим, как мы можем создавать вложенные гибкие колонки при помощи CSS-файла, который мы сгенерировали ранее.
Шаблон, представленный выше, содержит 2 ряда. Первый ряд разделен на 2 раздела, состоящих из 6 колонок, и каждый раздел будет снова разделен на 4 раздела из 3 колонок.
Подобно этому, вторая строка будет разделена на 3 раздела из 4 колонок, и каждый раздел снова будет разделен на 3 отдела из 4 колонок. Таким образом мы создаем вложенные колонки в сетках. Давайте посмотрим, как разработать код для вышеприведенного шаблона.
Nested Fluid Columns
3
3
3
3
3
3
3
3
4
4
4
4
4
4
4
4
4
Сначала мы создаем основные контейнеры, как мы делали это в предыдущем разделе. Внутри колонки нам нужно создать еще один контейнер с классом container_12 для вложенных колонок. Теперь нам нужно еще 12 колонок внутри 6 основных колонок. Затем 12 под-колонок можно разделить так, как потребуется. Теперь вы должны понимать, как создавать гибкие сетки и как работать с вложенными колонками. Давайте перейдем к дальнейшему изучению гибких сеток.
Дизайн поверх гибких сеток
Многие дизайнеры, которые только начинают, думают, что применение адаптивной CSS-платформы сделает их дизайн адаптивным. К сожалению, адаптивный дизайн – это не так просто. Гибкие сетки адаптируются к изменениям в размере окна браузера или устройства. Пока вы тщательно не продумаете дизайн, у пользователей будут проблемы при просмотре вашего контента на меньших по размеру устройствах, если вы будете использовать гибкие сетки.
Посмотрите на изображение, приведенное ниже.
Так шаблон на гибкой сетке, о чем говорилось в предыдущих частях руководства, будет отображаться на маленьких экранах. Здесь у нас просто сеточные колонки без нужных данных. Даже в этом случае номер 1 не отображается так, как нужно. Когда дело дойдет до реального контента, у нас получится сплошное месиво. В данном сценарии нам нужно выставить ширину колонок для того, чтобы предоставить лучший опыт взаимодействия с пользователями.
Вы можете использовать CSS media queries для настройки ширины колонок для разных экранов. В вышеприведенном сценарии вы можете удвоить ширину колонки и оставить 6 колонок вместо 12, чтобы пользователям было легче читать контент. Так что постарайтесь не зависеть всецело от гибкой сетки в адаптивном дизайне.
Тестирование гибких сеток
Теперь, когда мы рассказали вам об основах гибких сеток, мы можем перейти к разработке простого демо с jQuery для того, чтобы протестировать нашу гибкую сетку на разных размерах экрана. Сначала нам нужно создать шаблон страницы и навигацию, как показано ниже.
Fluid Grid Tester
Desktop
Tablet Landscape
Tablet Portrait
Mobile Landscape
Mobile Portrait
Наша тестовая страница будет иметь базовый HTML-шаблон с jQuery. Элемент с id device_panel будет содержать навигацию для стандартных устройств вроде настольных ПК, мобильных и планшетов. Как только по ссылке будет произведен клик, запустится функция changeGrid, с типом устройства в качестве параметра.
В нижнем разделе у нас будет iframe, который будет использоваться для загрузки нашей гибкой сетки. Гибкая сетка будет содержаться в файле media_query.html. Теперь давайте взглянем на функцию changeGrid.
Function changeGrid(device){
if(device == "desktop"){
$(".wrapper").css("width","960px");
}
if(device == "tab_lan"){
$(".wrapper").css("width","768px");
}
if(device == "tab_pot"){
$(".wrapper").css("width","600px");
}
if(device == "mob_lan"){
$(".wrapper").css("width","480px");
}
if(device == "mob_pot"){
$(".wrapper").css("width","320px");
}
}
Как только функция будет запущена, она проверит устройство при помощи введенного параметра. Затем она изменит ширину.wrapper (IFRAME) на стандартную ширину устройства. Далее у нас будет возможность увидеть работу гибких сеток на маленьких экранах.
Гибкая сетка, использованная внутри файла media_query.html, будет похожа на примеры, которые мы обсуждали ранее. Вы можете использовать файлы из демо для оформления кодов. У вас должно получиться нечто похожее на то, что на изображении.
*
Внимание! У вас нет прав для просмотра скрытого текста.
Подытожим
Гибкие сетки позволяют вам создавать адаптивные дизайны, которые подходят при работе с разными размерами экранов. Сложность разработки гибкой сетки может быть снижена за счет существующих CSS-платформ. Вы не можете всецело зависеть от гибких сеток, если хотите предоставить пользователям идеальный адаптивный дизайн. Выстраивайте гибкую сетку только по требованиям к вашему дизайну, и старайтесь предоставить лучший опыт взаимодействия своим пользователям. Надеемся, что из этого руководства вы вынесли для себя что-нибудь полезное!
Адаптивный дизайн сайтов охватил всю индустрию веб разработки. Адаптивный дизайн помогает сделать сайт дружественным для пользователя вне зависимости от типа устройства и размеров экранов: смартфон, планшет, ноутбук. При использовании адаптивной модульной сетки для разрабатываемого сайта отпадает необходимость разрабатывать отдельный мобильный сайт.
C приходом адаптивных сайтов полностью изменился и процесс разработки. Раньше все макеты дизайна сдавались как отдельный этап и направлялись далее по производственной цепочке. Сейчас же при разработке сайта с адаптивной модульной сеткой необходимо плотное взаимодействие между дизайнером и front-end разработчиком на большинстве этапов.
Инструменты и генераторы макетов Tiny Fluid Grid GeneratorУдивительно простой в использовании генератор css-файлов для разметки страницы. Для того чтобы скачать модульную сетку, необходимо задать количество колонок, расстояние между колонками, максимальную и минимальную ширину.
Grid Pak
Генератор адаптивной модульной сетки. Разработан компанией Good Work .
Сетки и расширения Photoshop Modular Grid Pattern
Приложение для веб дизайнеров, которое легко и быстро поможет создать модульную сетку для Adobe Photoshop. Так же имеется возможность скачать расширение для Photoshop.
Плагин для Photoshop, помогающий в создании направляющий.
Responsive Photoshop Template
Одна из лучших модульных сеток для Photoshop, помогающая в создании адаптивного дизайна.
960px Grid Templates
960 pixel - подборка шаблонов модульных сеток для Adobe Photoshop и Fireworks в диапазоне от 3 до 16 колонок.
Responsive Grid PSD
Простой в использовании, кроссбраузерный фреймворк, предназначенный для быстрой разработки динамичных сайтов.
Golden Grid - фреймворк на основе CSS. Использует правила «золотого сечения». Изменяет количество колонок от 4 до 18, в зависимости от размера экрана.
Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML. Интуитивно простой и в тоже время мощный инструмент, повышающий скорость и облегчающий разработку web-приложений.
Простой шаблон для создания адаптивной модульной сетки. Адаптирует дизайн в любое количество колонок.
Адаптивная модульная сетка, позволяющая ПК и мобильному устройству одинаково хорошо отображать содержимое сайта. Columnal рекомендуется применять для быстрого прототипирования Ваших проектов.
Skeleton - фреймворк на основе CSS и JavaScript. Адаптивная сетка основана на многим знакомой 960 пиксельной сетке, однако ее легко адаптировать под разные устройства.
PURE
Набор адаптивных CSS модулей, которые могут быть использованы для любого веб-проекта. Прекрасный инструмент, позволяющий применять модули для любого проекта, даже если вы уже используете в разработке другие фреймворки или вам просто нужен только один модуль. Настоятельно рекомендует обратить внимание на данный фреймворк, если вы занимаетесь разработкой адаптивных сайтов.
YAML
Yaml - СSS Framework от немецких разработчиков для создание адаптивных кроссбраузерных сайтов. Как и любые другие CSS фреймворки, он создан для облегчения жизни front-end разработчика. В нем можно создать шаблон как для простого, так и для сложного сайта. Yaml хорошо документирован, имеется множество примеров, которые пригодиться при верстки.
960 grid - классика среди CSS фреймворков, очень полезный инструмент в основе которого лежит ширина каркаса в 960 пикселей. Grid 960 - СSS фреймворк, позволяющий разработчикам быстро разрабатывать прототипы дизайна. Являются прекрасным инструментом для создания макетов. Система создаст каркас шириной 960 пикселей и все блоки, созданные в этом каркасе будут соответствовать определённым пропорциям.
Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Задача сетки не только в том, чтобы поддержать эстетику, но и в том, чтобы сохранять контроль над процессом разработки, делать сам процесс гибким как для дизайнера и для разработчика. Сетка - это как хорошо упакованный рюкзак , который вы передаете разработчику, чтобы он смог им пользоваться с удобством и пониманием вашего видения проекта.
Прежде чем создавать сетку, нужно «исследовать рабоче поле» - сделать черновой макет страницы, найти ограничения и критические области, которые обязательно проявят себя на этапе детального проектирования. Это помогает свести абстрактное понимание задачи к конкретным целям. После этого можно приступать к настройке рабочей сетки в макете. Для этого нужно создать структуру из трех типов сеток - базовой , колоночной и дизайнерской .
Базовая сеткаБазовая сетка близка по свойствам и назначению к миллиметровой бумаге. Она нужна для создания удобной среды, которая позволит вам двигать мелкие детали макета не задумываясь и не беспокоясь о том, чтобы все расстояния между элементами были равны, единообразны.
Шаг сетки зависит от таких атомарных неделимых частиц, как радио-кнопка, чекбокс, базовый шрифт и высота строки, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px - целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.
Колоночная сеткаДля лендингов, сайтов с карточной структурой, портфолио и галерей резиновая адаптация работает хорошо. Для крупных агрегаторов и классифайдов с большим количеством форм, полей ввода и мелких контролов резиновое масштабирование создает трудности. Оно тяжело поддается контролю и часто деформирует элементы, разрушает структуру: теряются ключевые данные из первой прокрутки (например реклама), элементы сползают на следующую строку, целостность текстовых блоков разрушается, формы становятся чрезмерно широкими, пользователь вынужден слишком долго прокручивать страницу.
В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода, breakpoints . За таковые можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.
Сколько колонок выбрать для сетки?
Колоночная сетка отвечает за горизонтальный ритм, и чтобы таковой возник, нужно выбрать соотношение ширины колонки и отступа, которое позволит легко менять положении более крупных блоков. Это возможно, когда в крупный блок помещается несколько колонок, например 3-4. Отступ в данном случае, это воздушное поле, в котором не следует размещать элементы. Это важно в том смысле, что отступ - это не еще одна направляющая
, по которой можно выравнивать элементы.
Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.
Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений - 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.
Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Дизайнерская сеткаДизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».
Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например . Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент Grilover . Он отличается от других тем, что не просто регулирует высоту базовой строки шрифта, но и компенсирует слипание/расползание строк параметром Scale factor.
Использование сетки при передаче макетов в версткуСетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры - например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт - 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором .
Полезные ссылки:О паттерне распознования текста и вертикальном ритме на Smash Magazine
Еще о сетке на teehan+lax
Grilover и Typecast
Статьи и примеры сеток на The Grid System
Пример поиска композиции для дизайнерской сетки с помощью модулей -
