Фиксированная ширина против динамической ширины

Исправлено с помощью намного проще для разработчика для сложных сайтов. Кроме того, большинство сайтов с фиксированной шириной будут иметь ширину около 1000 пикселей. Причина в том, что только 1 % браузеров используют 800x640, а 0 % - 640x480. Ознакомьтесь с самой последней статистикой здесь. Однако это не относится к мобильным устройствам. Это совершенно другая игра в мяч.

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

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

Существует также компромисс между этими двумя, когда вы устанавливаете минимальную ширину и максимальную ширину (с помощью CSS), а затем используете процентную ширину, чтобы остаток проходил между двумя крайностями. Например, вы можете захотеть, чтобы левый столбец меню не сужался более чем на 200 пикселей, а основное содержимое текло потоком. Этот метод позволяет вашему сайту масштабироваться в соответствии с разрешением посетителей, не выглядя глупо при очень высоких или очень низких разрешениях. HTML, в конце концов, был разработан для потока - это язык разметки, а не то же самое, что печать.

Этот подход хорошо работает для относительно простых проектов, таких как блоги или блоги, в которых представлено много текстовой информации. Действительно, я использую его на своем собственном персональном веб-сайте. В конце концов, у многих людей теперь есть мониторы с широким экраном или высоким разрешением - мой рабочий монитор имеет ширину 1680 пикселей - так почему они должны терять большую часть недвижимости и должны прокручивать по горизонтали просто потому, что дизайнер выбрал фиксированную ширину, которая подходит их экран? В конце концов, хороший дизайн - это предоставление пользователям наилучшего возможного опыта, а не только то, что выглядит "красиво" на мониторе дизайнера.

Возможно, вам не придется делать этот выбор. В отдельном списке есть отличная статья об адаптивном дизайне. Основная идея заключается в том, что вы можете использовать медиа-запросы для отслеживания изменений в окне браузера или размере области просмотра и переназначения CSS по мере необходимости. Там есть много чего почитать, так что ознакомьтесь со статьей , чтобы узнать все пикантные подробности. Но в конце концов (или это должно быть "широко и узко"?) посмотрите на до и после страницы их примера. Страница перед хорошо масштабируется до определенной точки, но если вы сделаете ее достаточно узкой, она станет немного неуклюжей. Страница после также масштабируется, но также изменяет макет, когда вы делаете ее слишком узкой, чтобы масштабирование работало нормально.

В соответствии с Якобом Нильсеном113 Руководствами по дизайну для удобства использования домашней страницы:

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

Это также одно из Десяти наиболее нарушаемых правил дизайна домашней страницы:

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

А как насчет путаницы? При этом раздел #content отображается с фиксированной шириной (70 м), если достаточно места - в противном случае раздел сокращается до 80 % от окна порта просмотра/браузера.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

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