Пример рационального подхода к "резиновой" верстке: Switchy McLayout: An Adaptive Layout Technique.

Суть: вместо того, чтобы извращаться в попытах сделать "универсальную резиновую верстку на div'ах" (очень распространенная болезнь), автор просто использует JavaScript для того, чтобы оптимизировать представление под конкретное разрешение.

При моих 1280 все равно на всю ширину не открывается. )-:

Но все же при ресайзе от 300 до 1280 ведет себя более разумно, не правда ли?

Crazy, Это да. Просто на скриншотах вроде как есть вариант, где на всю страницу... Под IE и Оперой данного эффекта не наблюдается. Видимо разрешение определяется не верно.

А насчет подстройки под разрешение... Вобщем, я частенько это использовал на предмет подгрузки картинки в зависимости от разрешения. Например на uropro.ru делал. Но то ли это не заработало, то ли еще чего... Не помню уже.

Крейзи, спасибо за ссылку! Интересно. Правда у меня тоже на 1600 не растягивается, но сама техника интересна

Это конечно интересно, но это все показано на простом шаблоне. Будет ли все это эффективно на практике при построении реально хотя бы средних по сложности проектов.

В моем FF 2.0 (Mac) это выглядело убого и работало глючно. Зачем так усложнять?
Кроме того обходиться так с картинкой можно лишь если она вообще не несет смысловой нагрузки. А зачем приспосабливать под ширину менее 800? Для этого есть media типы. Короче это почесание левого уха правой ногой.

Crazy, за ссылку спасибо, но вряд ли я буду пользоваться ей. По двум причинам:
1. Если макет очень сложный, то разрабатывать это на JS сложнее, чем на CSS, по моему мнению.
2. Давным давно мне довелось поработать в организации, где сисадмин, выключал JavaScript и VBScript в браузерах, а так же доступ к ActiveX из IE. Боялся вирусов.

PS кстати, IE пересчитывает размеры экрана во время resize, а Mozilla после завершения resize, а это тоже не удобно, в FireFox'е появляется горизонтальная прокрутка.

x0bbit писал(а):

Кроме того обходиться так с картинкой можно лишь если она вообще не несет смысловой нагрузки.

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

К примеру:

1. Высокое разрешение. Выводим иллюстрацию размером 400x400.
2. Среднее разрешение. Выводим иллюстрацию 200x200 и ссылку на полноразмерную версию.
3. Низкое разрешение. Выводим только ссылку на полноразмерную версию.

не обязательно ведь весь сайт в такой вид приводить. можно, например, хотябы колонку новостей!

http://www.alistapart.com/d/switchymclayout/transition_layout_tab.html
вот этот пример понравился

в принципе ничего особого, меняю класс у элемента при ресайте
работает ли это действительно под мобилами?

MpaK999 писал(а):

работает ли это действительно под мобилами?

имеющими полноценный хтмл-броузер — скорее всего да.

*чуток подправлено*
Вместо хитрых запросов на сервер не проще ли иметь ссыль на заточеный именно под пда сайт, с облегченной структурой и минимально-разумным стилевым оформлением? Но я не увидел этих самых хитрых запросов, стало быть клиент выгребает все килобайты картинок и структуры, а цсс их услужливо прячет. Т.о. никакой облегченной по-сути страницы нет, есть та же структура (с лишними структурными блоками и соотв. их оформлением, при чем избыточным). Я себе представляю такой цсс-файл для более-менее серьезного проекта… Юзание сайта под пда (и тем более под мобилками) в принципе отличается от юзания его на ПК, что накладывает определенные условия на все ту же структуру и способ подачи контента и его количество.
Как по мне — совершенно лишняя универсальность. Сегодня по крайней мере. Как баловтсво и экспериментирование — вполне.

*добавлено*
а вообще идея совметсить в одном файле джаваскрипт и стили заманчива. Майкрософт рискнул с expressions-ами и htc, только никто не повёлся…

karamba писал(а):

место хитрых запросов на сервер не проще ли иметь ссыль на заточеный именно под пда сайт, с облегченной структурой и минимально-разумным стилевым оформлением? Но я не увидел этих самых хитрых запросов, стало быть клиент выгребает все килобайты картинок и структуры, а цсс их услужливо прячет.

Никто не мешает делать строго наоборот: изначально грузить легкую версию и уже для тех, кому нужно и можно, догружать bells and whistles.

Crazy писал(а):

изначально грузить легкую версию и уже для тех, кому нужно и можно, догружать bells and whistles.

дык. Принтфредли-версии в данном случае почти 100%-ый аналог, дешево и быстро, и под любой носитель (вернее отображатель) лягут. Только и юрл-ы у них свои. Не ново.
Или каким образом инициировать это самое догружание?

karamba, признаться я не понял смысл твоей реплики. Какая связь между "print-friendly", "своими урлами" и инициацией догрузки?

ну если делать сайт и под пда и нормальный браузер, может проще указать в ксс медиа тип?

Crazy, насколько я понимаю, принт-френдли загружает с сервера почти голый контент с минимумом оформления. Аналогично автор «умной резины» отображает на экране пда тажке почти голый контент, только загружает с сервера весь контент и лишнюю в данном случае оформиловку, т.е. никакой экономии (пока владелец пда платит за трафик), кроме места на экране пда, нет.

Моя реплика была вызвана твоей фразой «и уже для тех, кому нужно и можно, догружать bells and whistles». Какое событие инициирует догрузку «тем, кому нужно»? Отклик клиента?
Именно по этому мне кажется, что по-уму нужно не грузить все что ни попадя и скриптами разбираться по ходу, а инитить скриптом лейаут и грузить уже облегченный/заточенный под медиа контент. Но, если учесть, что такие навороты доступны устройствам, располагющими полноценными броузерами (наладонникам и дорогим моделям мобилок и коммуникаторов), то практическая ценность такого решения на сегодняшний день вызывает сомнение. Отсюда напршивается вывод: иметь облегченную версию сайта для мобильных устройств, доступную с отдельного адреса. А юзер уже сам решит: заходить на версию сайта для пда или полноценную, т.е. ему не навязывется сервис — он его сознательно выбирает.
Ессно, любое решение своим критерием имеет целесообразность и если ядро аудитории сайта составляют именно обладатели дорогих мобильных устройств — почему бы и не «умная резина»? Но только реально умная, с анализом возможностей клиента и соотв. формированием контента, а не такая «лайт-версия», как по приведенной тобой ссылке. Хотя в этом случае юзер лишен выбора, а вдруг ему хочется с полноценной версией поизвращаться?..

karamba писал(а):

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

Обычно под print-friendly понимаю обычную страницу, для которой создан стиль, обеспечивающий ее корректную печать без лишнего мусора. Вероятно, здесь путаница с "версия для печати" -- отдельно сформированной версией страницы, в которой есть только то, что нужно для вывода на печать. Эдакое наследие мрачного до-CSS прошлого.

Итак, если мы хотим обеспечить экономию трафика, то делаем просто:

1. Создаем страницу, которая содержит HTML-контент и подключает CSS-файлы, минимально необходимые для отображения на компактных устройствах. Оно же должно адекватно -- но некрасиво -- отображаться в старых/упрощенных браузерах и индексироваться поисковыми системами.

2. В конце <header> размещает скрипт, который анализирует возможности по отображению (версия браузера и т.п.) и запрашивает догрузку дополнительных скриптов, стилей и т.п.

3. Дополнительные догруженные скрипты обращаются к серверу за дополнительными блоками контента (расширенная навигация, рекламные блоки и т.п.)

Соответственно, скачиваем только то, что собираемся показать пользователю.

Какие здесь есть сложности:

1. Удвоение работы по проектированию структуры и навигации.
2. Проектирование нескольких вариантов дизайна страницы.
3. Разработка скриптов (к счастью, это не нужно будет делать с нуля каждый раз).

В результате объем работы по перечисленным пунктам вырастает примерно в 3-4 раза. Но в объщем объеме работ для "обычного сайта" рост объема, как мне кажется, не должен превысить 10-15%. Что, солгласен, тоже немало.

Что касается предоставления выбор -- ничего не имеют против. Никто не мешает добавить на страницу средства переключения представления. Я однажды пробовал -- опрошенным пользователям нравилось, но, судя по логам, этим не пользовался даже 1%.

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

MpaK999 писал(а):

ну если делать сайт и под пда и нормальный браузер, может проще указать в ксс медиа тип?

А как media type повлияет на размер выводимой графики? На десктопе картинка 160x160 выглядит нелепо. На КПК картинка 400x400 -- тоже.

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

Crazy писал(а):

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

Именно этот вариант я и приводил в качестве аналогии приведенному тобой примеру (там тоже лишний мусор убирается), говоря что такой подход не нов:

karamba писал(а):

Принтфредли-версии в данном случае почти 100%-ый аналог, дешево и быстро

Т.е. революции автор примера не сделал, просто изобрел велосипед.

karamba, описанное в статье -- определенно не революция. Это незаслуженно забытая технология.

Но мы же не ругаем Коперника за то, что он пропагандировал за столетия до него придуманную гелиоцентрическую систему вместо того, чтобы придумать что-то новое и оригинальное.

раньше думал об этом, но забил из-за излишней сложности =)

Crazy писал(а):

Это незаслуженно забытая технология.

мной по крайней мере не забыта ). Кроп картинок, верстка блоков на флоатах и ограничением их ширины мной в данный момент используется оч. широко. Правда не для пда. Для пда-версии мне все-таки придется пойти по пути, описанным тобой — менять саму структуру.

А автора я и не ругал.

karamba писал(а):

оффтопик: Вообще-то гелиоцентрическую систему не придумали — ее открыли

Crazy, ну графики в примере особо нет

если так, сувать графику в фоны дивов, все это в ксс под одну версию и другую, картинки разумеется тоже версии разные делать прийдется

Crazy писал(а):

Ее именно придумали. А через сотни лет смогли найти экспериментальное доказательство.

Crazy писал(а):

Читайте книжки, они рулез.

не поспоришь,

karamba писал(а):

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

Crazy писал(а):

Я понял, в чем твоя ошибка: ты считаешь, что Земля является частью гелиоцентрической системы. Это не так. Это всего лишь упрощенная модель.