Андрей Болконский
24 августа 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Привет, у меня модульный вопрос. Есть модульная сетка для сайта, шириной 960 px. Отступы 10 px, ширина каждой колонки 60 px (всего 12 колонок) и расстояние между колонками 20 px.

Вопрос по поводу вертикальной разметки. Как её рассчитать? Скажем размер основного шрифта 12 pt, что с этим делать дальше?


Андрей!

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

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

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

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

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

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Юрий Хан
24 августа 2016

Нельзя рассчитывать сетку из ширины 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) и широкоформатных мониторов.

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

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

Юрий Хан
27 августа 2016

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 1




Недавно всплыло

Кто ты? 1 1 Расскажите об обратной связи в интерфейсе 1 4