Андрей!

Совет: не городите леса раньше времени. Выкиньте сетку и не начинайте с неё проектирование. На начальном этапе сетка лишь ограничит вас. Сначала нарисуйте хорошую красивую страницу и уже потом её систематизируйте.

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

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

А бывает, что сетка не нужна вовсе.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеМодульная вёрсткаФормат: иллюстрацияФормат: текстНоситель: сайтМодульная сетка
Отправить
Поделиться
Запинить

Комментарии

Нельзя рассчитывать сетку из ширины 960px. Не‑ль‑зя.

Типичный десктопный монитор сейчас — 1920px в ширину. Делим его пополам, в одной половине браузер, в другой — что‑нибудь ещё полезное. Около 25px съедят скроллбар и рамки окна.

В лучшем случае сайт свалится в стиль для следующего разрешения, возможно, 768px. В худшем — вылезет горизонтальный скроллинг.

24 авг 2016

Юрий!

Статистика не подтверждает вашу точку зрения http://www.liveinternet.ru/stat/ru/resolutions.html Самое популярное разрешение экрана 1366. Плюс огромное количество разрешений, лежащих в этой же плоскости: 1024, 1280 и т. д. Рассчитывать сетку от 960 пикселей можно. Как и от 980.

Другое дело, что эта сетка будет представлять собой лишь одно из возможных (хоть и самых популярных) состояний сайта. А еще будут нужны: сетка для мобильных (320, 380 или 480 px), для планшетов (768 px) и широкоформатных мониторов.

Андрей, по‑моему, вертикальные отступы невозможно рассчитать по формуле от размера шрифта. Разные шрифты имеют разную базовую линию, высоту прописных букв и выносных элементов.

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

24 авг 2016

Николай, я специально уточнил — десктопный монитор. 1366×768 — ноутбучное разрешение.

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

27 авг 2016

Рекомендуем другие советы