Ширина столбца сайта

Question

Мне интересно, какую ширину столбцов вы бы предложили для веб-сайтов с двумя и тремя столбцами.

Например, если мы рассмотрим макет с двумя столбцами (общая ширина 1000 пикселей), некоторые возможные ширины будут: 900-100, 800-200, 750-250, 700-300, 600-400. Какой макет лучше всего подходит для удобства использования, возможных мест размещения рекламы, интеграции виджетов?

Answer 1

960px - http://960.gs

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

Он также настолько широк, насколько вы хотите получить, и по-прежнему помещается на экране шириной 1024 - 1000 пикселей приведет к горизонтальным полосам прокрутки.

Я бы также посоветовал использовать ширину, основанную на%, так как почти невозможно управлять макетом.

Answer 2

Это действительно зависит от того, какой веб-сайт и какую функцию на каждом col вы собираетесь реализовать. Но, спрашивая об удобстве использования, скорее всего, я не использую столбцы фиксированной ширины. Установка столбцов с шириной в процентах (и общей суммой + 90%) будет в основном использовать экран читателя. Вероятно, вы можете начать с 20% - 60% - 20% для 3-х колонок и 30% - 70% для 2-х колонок

Answer 3

используйте Золотое сечение

http://goldenratiocalculator.com/

Золотая пропорция очень естественна для человеческого глаза

Answer 4

• Перейти с 960px шириной. 960 пикселей - это хорошо для 800x600 , 1024x768 и 1280x960 .

• Если вы хотите поддерживать мобильные устройства (меньшие разрешения) , тогда используйте fluid layout и Media Queries для лучшего контроля.

• Старайтесь не учитывать ВСЕ разрешения экрана, потому что это потратит вашего времени.

• Используйте трекер, например, Google Analytics , чтобы отслеживать размеры окон браузера ваших пользователей, чтобы вы могли определить, каково обычно разрешение экрана вашей аудитории.

Что касается юзабилити, три наиболее важных фактора с точки зрения разрешения экрана, по крайней мере из моего опыта:

• Не оставляйте горизонтальную полосу прокрутки .
• Избегайте слишком маленького размера шрифта (очень трудно читать) .
• Избегайте фиксированных размеров шрифта.

Answer 5

Используйте сетку 960, как указано выше в DCD.

Легко работать с макетами в фотошопе / фейерверке до включения в ваш HTML. Вы быстро получите макет, когда познакомитесь с простыми понятиями «каркаса» сетки. Он заботится о полях / отступах для вас.

Многие топовые дизайны сайтов используют эту сетку.

Что касается конкретно ваших вопросов:

* Ширина 1008 * 960 пикселей (с использованием сетки 960): container_12 и внутри него включают сетку 9: 3 или 10: 2 для 2 столбцов ИЛИ ЖЕ Контейнер_16 внутри которого включает в себя сетку 3: 9: 4 для 3 столбцов

Но здесь нет жестких правил. Заставьте это работать в зависимости от вашего контекста и использования.

Если вы предоставите больше информации о том, что вы собираетесь делать, я мог бы дать вам более конкретный совет:)

Answer 6

960 px - общая ширина. Я думаю, что это лучший стандарт. Тогда вы можете попробовать 160 + 800 или 800 + 160

Answer 7

Я бы предложил посмотреть этот pdf: http://www.subtraction.com/pics/0703/grids_are_good.pdf

Если дает немного истории систем сетки, а затем проходит процесс построения сетки на основе рекламного блока. Стоит посмотреть.

Answer 8

382px и 618px.