Андрей!

Я согласен с вами в том, что все обобщения опасны, включая, впрочем, и это. Полагать, что «растягивание» всех строк и колонок — непреложный закон экранного дизайна, несколько недальновидно. Однако не считаю лучшим решением «кирпичную» верстку сайтов компании Эппл и всего остального мирового корпоративного мейнстрима. Стоит увеличить размер шрифта в браузере на один шаг, чтобы рассуждения об оптимальной длине строки мгновенно потеряли смысл.

Такого понятия, как «средний экран», в реальности не существует. Дома человек читает сайты на старом четырнадцатидюймовом мониторчике, а на работе пользуется жидкокристаллической девятнашкой. Многие ноутбуки имеют экраны формата 16:9 с «нестандартными» разрешениями. Мониторы с большой диагональю всегда были и будут дорогими, но многоэкранные системы сегодня вполне обыденное явление. Даже просмотр сайтов на мобильных телефонах и карманных компьютерах нельзя считать «отдельной песней»: есть браузер Opera Mobile и наладонники с разрешением 640×480, показывающие сайты в полноценном виде.

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

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

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

Надеюсь, уважаемые советчики продемонстрируют собственные примеры «умного растягивания».

Комментарии

http://ecto.ru/ статическая версия нового дизайна. Удивительно! Когда верстал, в голове вертелась фраза — «умное растягивание».

Похожим расширяемым функционалом обладает drive.ru: я и сам удивился, когда на работе (на разрешении 1280х1024) впервые увидел этот сайт, у которого в шапке было три рекламные колонки, а не привычные мне две (дома на 1152х864).

Да и все остальные блоки увеличились.

Интересная штука — растягивание до определенного предела (обычно это 1300 пикселей). Дело в том, что зачастую нет смысла тянуть больше:
— люди с большим разрешением не распахивают броузер во весь экран;
— строка основной колонки становится слишком длинной при бОльшей ширине;
— готовить картинки (тизеры, баннеры) намного легче когда знаешь предел ширины колонки;

Это удобный способ иметь контроль над сеткой и одновременно соответствовать и маленьким и большим разрешениям.

Интересно, можно ли задавать максимальную ширину в em?

Можно. Считается потом все равно в пикселях.

Вероятно что «умная верстка» подразумевает некий программный код, который, определяя разрешение пользователя, соответственно изменяет элементы страницы. В идеальном случае такие сайты могут менять и размеры графических элементов, например, делать иконки и иллюстрации более крупными для высоких разрешений. Я знаю лишь один способ сделать это – с помощью java-script. В случае, когда у пользователя отключено выполнение скриптов, необходимо предусмотреть компромиссный вариант верстки.

По-моему, удачным примером может служить главная страница сайта http://www.sestudio.ru/

Сама дискуссия выглядит несколько теоретизированной и не имеющей отношения к практике.
Как уже сказал Артем, любые обобщения опасны.
Не забывайте, что многие корпоративные сайты создавались в то время, когда развитие технологий находилось на уровне 15-дюймовых мониторов. Растягивать сайты не имело смысла, так как многие из них попросту не помещались в пределы экрана монитора.
Многие помнят известный прием дизайна сайта американского журнала «Newsweek», созданного таким образом, что крайняя правая колонка проходила аккурат границе экрана браузера на мониторе с разрешением 640*480. Тот прием, впоследствии признанный неудачным, тогда многим показался гениальным.
Развитие технологий диктует свои правила. Сегодня мы можем вообще отказаться от границ сайта как таковых. Замечательный пример — сайт Мосгоррекламы.

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

«Наконец, в экранной верстке нет смысла оперировать пикселями: размер шрифта — базовая единица измерения любой типографской сетки — устанавливается пользователем»

Вот тут возникает вопрос: если шрифт — базовая единица, то почему размер колонок (например на artgorbunov.ru) определяется размером окна, а не размером шрифта? И почему на сегодняшний день так мало сайтов, которые заверстаны именно исходя из размера шрифта? Кроме yahoo.com ничего на ум не приходит.

Сергей!

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

Ширина колонок, естественно, задается в процентах. Сайт ведь резиновый.

В последнее время придерживаемся такой практики: страницы резиновые, но до 1280 пикселей в ширину, если страница шире, то содержимое остается шириной 1280 и выравнивается по центру.

CSS:
#maindiv {
max-width:1280px;
width: 100%;
width: expression (document.body.clientWidth > 1280? ‘1280px’: ‘100%’);
}

HTML:
<body>
<center><div id=maindiv><div style=‘text-align:left;’>
………
</div></div></center>
</body>

Очень-очень интересная тема! На самом деле, на данный момент ни один из отвечающих не удовлетворил ответом. Да, скорее всего, вариант с максимальной широной подходит лучше всех. Но здесь встает тот же вопрос: как определить эту ширину? Александр привел в пример 1280 пикселей, Юрий — 1300. Почему?

Мне кажется, основная идея резиновой верстки — не решать за пользователя. Т. е. пусть обладатель огромного широкоформатного монитора и обладатель небольшого умного КПК получают удовольствие на все 100% (ширины экрана ;) Теоретически именно эта возможность при условии грамотной верстки даст лучший результат.

Но: из всех приведенных выше сайтов (http://www.drive.ru, http://ecto.ru, http://www.sestudio.ru) ни один не смотрится хорошо при моих 2304 пикс. по ширине. Если вы скажете любому владельцу большого монитора, что он должен делать (раскрывать или не раскрывать сайт на весь экран), вы сразу губите на корню цель «не решать за пользователя». Что же приходит в голову?

Мне кажется, на широком экране можно добавить количество колонок. Это позволит на широком экране не иметь скрола и видеть удобоваримую ширину любой информации, а на КПК листать вниз. И здесь есть но (его описал Евгений): теряется единообразная работа с сайтом на разных экранах. Почему дома мы видим (и привыкаем!) к одному расположению элементов, а на работе вынуждены удивляться и перепривыкать?

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

Я здесь не вижу вообще однозначного ответа и буду благодарен, если кто-то поможет своим мнением прояснить туман. Конечно, есть исключительные случаи, когда ответ однозначный, Артем приводил такие примеры, они не вызывают вопросов (наклеечки, ширина колонок грида и т. д.). Пример с каледарем не вполне подходящий: чем больше количество колонок, тем меньше они меняются в абсолютных величинах при разной ширине экрана. А вот когда речь идет о паре-тройке колонок, неплохо смотрящихся при разрешении Х, то при увеличении Х раза в 3 все очень сильно меняется.

Возможно, я не прав и есть некоторые нюансы, однако не лучше ли просто определить ширину экрана пользователя при помощи JavaScript и, основываясь на ней, опять же при помощи JavaScript записать <body style=‘zoom: соответствующий масштаб’>? Как по мне, то так гораздо проще. Свойство CSS zoom поддерживается с IE 5.5.

Посмотрите методику адаптирующегося дизайна с помощью css и js 
http://designformasters.info/posts/adaptive-layout/ (рус)

http://alistapart.com/articles/switchymclayout (en)