Какие есть модули полезный для 6

• Проще и
  быстрее собирать
  сайт
• Выше
  скорость
  загрузки сайта
• Улучшена
  мобильная версия
• Больше
  возможностей для
  собственного
  дизайна
• Резиновая
  верстка

Ссылку на архив. В архиве:

• Готовые
  модули 3.0
  Магазин
• Видеоуроки
• Программы
• Ссылки на
  сервисы

• Раздел 1. Настройка программы SPD
• Раздел 2. Создание динамического веб-шаблона
• Раздел 3. Сборка макета главной страницы сайта
• Раздел 4. Сборка макетов других страниц
• Раздел 5. Заполнение макетов контентом
• Раздел 6. Соединение страниц гиперссылками
• Раздел 7. Подключение сервиса корзины товаров к сайту (бесплатный тариф)
• Раздел 8. Размещение сайта на бесплатном хостинге для тестирования и отладки

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

Общее количество 50
штук:

• 01-Подложка c отступами
• 01-Подложка без отступов
• 02-Крыша с корзиной
• 02-Крыша с телефоном
• 02-Крыша
  классическая
• 03-Блок информационный текст слева
• 03-Блок информационный текст справа
• 03-Блок с ценой слева
  (для карточки
  товара)
• 03-Блок с ценой справа
  (для карточки
  товара)
• 04-Плакат черный
  (текст на фоне
  затемненной
  картинки)
• 04-Плакат
  (текст на фоне
  картинки)
• 05-Горизонтальное меню
• 06-Хлебные крошки
  (строка
  навигации)
• 07-Текст меню блоки слева
• 07-Текст меню блоки справа
• 07-Текст меню ссылки слева
• 07-Текст меню ссылки справа
• 07-Текст
  (просто
  текстовый блок
  без меню)
• 08-Товары-1
  (большое фото
  товаров на
  мобильных)
• 08-Товары-2
  (товары
  расположены в
  стоку на
  мобильных)
• 08-Товары-3
  (товары в две
  колонки на
  мобильных)
• 09-Заголовок
  (можно менять
  размер и
  толщину)
• 10-Фото
• 11-Видео
• 12-Важная информация
  (для вставки в
  текст)
• 13-Мини-блок 
  (картинка +
  текст, для
  анонсов)
• 14-Автор
  (фото лица,
  фамилия,
  информация)
• 14-Отзыв с лицом
  (покупателя)
• 14-Отзыв
  (просто
  текстовый отзыв)
• 14-Отзывы в 2 колонки
• 15-Преимущества со ссылками
• 15-Преимущества
• 16-Два фото
  («до и после»,
  другие задачи)
• 17-Каталог статей-1
• 17-Каталог статей-2
• 18-Каталог товаров
• 19-Табы
  (текстовые блоки
  с закладками)
• 20-Аккордеон
  (раскрывающиеся
  по клику блоки с
  информацией)
• 21-Таблица
  (для прайсов,
  характеристик
  товаров)
• 22-Контакт
  (форма обратной
  связи с
  чекбоксом
  «Согласен на
  обработку
  данных»)
• 23-Социальные кнопки-1
• 23-Социальные кнопки-2
• 24-Подвал
  (нижняя часть
  сайта с ссылками
  на разделы)
• 25-Мобильное меню
• 26-Кнопка
  ( можно
  добавлять в
  любой модуль
  сайта)
• 27-Две колонки Автор + Контакты
  (информация в
  две колонки)
• 27-Две колонки Текст + Видео
• 27-Две колонки Текст + Картинка
• 27-Две колонки Текст + Таблица
• 27-Две колонки Текст + Текст

Есть люди, которым нужен
самый простой интернет-магазин.
Они не хотят переплачивать за
модули, которые им НЕ нужны. Для
них — облегченная версия. В ней
15 модулей (из 50):

• 01-Подложка без отступов
• 02-Крыша
• 03-Блок с ценой слева
• 03-Блок с ценой справа
• 06-Хлебные крошки
• 07-Текст
• 08-Товары-2
• 09-Заголовок
• 10-Фото
• 11-Видео
• 18-Каталог товаров
• 21-Таблица
• 22-Контакт
• 24-Подвал
• 25-Мобильное меню

• За сайт не
  нужно никому
  платить
• Нет
  зависимости от
  сервисов и
  разработчиков
• Можно
  собирать любое
  количество
  сайтов
• Простота. Не
  нужно долго
  обучаться
• Нет арендной
  платы, как у
  онлайн-конструкторов
• Можно
  подключить любые
  сервисы
  (корзина,
  консультант,
  калькулятор и
  т.п)
• Можно
  собирать разные
  типы сайтов по
  одному принципу
  (ленднинг, блог,
  магазин)
• Можно
  разработать свой
  уникальный
  дизайн
• Резиновая
  верстка (для
  любых размеров
  мониторов)
• Быстрая
  загрузка (хорошо
  для СЕО и
  платной рекламы)
• Сайты хорошо
  продвигаются в
  поисковых
  системах
• Сайты можно
  копировать (т.е.
  не собирать
  новый сайт с
  нуля)
• Классная
  головоломка —
  развивает
  мышление
• Можно
  обучаться с
  детьми. Это
  полезный навык.
• Быстрая
  возможность
  начать бизнес

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

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

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

Базовая сетка

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

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

Базовая сетка должна сочетаться с колоночной. Дефолтные настройки 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. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.

Дизайнерская сетка

Дизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».

Небольшая цитата из совет о якорных объектах Артема Горбунова

Прямоугольник — базовая фигура модульной вёрстки

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

Что именно это значит на практике? Пример из физического мира — модульная сетка в стене с отверстиями Kerf Wall, на которой можно расположить ящики и полки в любом порядке. Вы можете даже велик повесить на такую стену — главное, чтобы объекты не мешали друг другу, иначе они свалятся. Тоже самое и с крепкой сеткой.

Отдельно о Сетке базовых линий (baselinegrid)

Исторически с понятием вертикального ритма хорошо знакомы пользователи InDesign. В настройках они могли задать высоту строки для горизонтальной сетки и работать по ней. Но для дизайнера вертикальный ритм — это «оптическое понятие», для расчета которого нет точных параметров, поскольку создается он кропотливой проработкой каждого текстового блока, строк и отступов. В веб-дизайне все эти тонкости реализовать тяжело. Не достаточно просто подтягивать интерлиньяж всех шрифтов под одну высоту строки — это приведет к тому, что в крупных абзацах строки слипнутся, а в мелких — разъедутся.

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

Пример вертикального ритма на WebTuts+:

Наоборот, не лучшим образом получится применить вертикальный ритм ко всем текстам на странице, когда текстов разного размера много. Характерный пример — инструмент Калькулятора вертикального ритма.

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

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

Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например UnitGridSystem. Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент 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
Пример поиска композиции для дизайнерской сетки с помощью модулей — Gridfier.