Фиксированная ширина и динамическая ширина

Я заметил, что все больше и больше сайтов переходят на макет с фиксированной шириной, где изменение размера окна браузера приводит к появлению полос прокрутки, в отличие от гибкого макета, когда изменение размера браузера приводит к «сжатию» компонентов страницы ,
Такие сайты StackExchange являются примером фиксированного макета. GMail и iGoogle являются примерами гибкого макета. Каковы причины выбора одного над другим?

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

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

Конечно, если у вас есть сайт, где пространство стоит дороже (например, Google Docs и Google Maps), вы действительно хотите использовать схему переменной ширины, чтобы использовать все доступное пространство.

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

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

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

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

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

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

По словам Якоба Нильсена «S 113 Руководство по проектированию для Homepage Usability :

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

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

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

Как насчет путаницы? Это отображает # content-section с фиксированной шириной (70em), если есть достаточно места - в противном случае раздел сжимается до 80% окна view-port / browser.

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

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