webew
Войти » Регистрация
 
HTML
CSS

CSS макеты: фиксированные, резиновые, эластичные.

15 мая 2008, 16:24
Автор: Николай Мациевский
Разместил: bur

Примечание: ниже выложен перевод статьи "CSS Layouts: The Fixed. The Fluid. The Elastic.", в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный». Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки).

Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Макеты с фиксированной шириной

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800×600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.

Плюсы такого макета

  • Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
  • В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
  • Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024×768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Его минусы

  • Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;
  • У пользователей с небольшими мониторами (640×480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;
  • Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;
  • Небольшая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, потому что заставляет создавать сайт, учитывая такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, потому что таковы наложенные ограничения).

Советы по макету с фиксированной шириной

  • Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640×480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
  • Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

Все примеры «вживую» можно посмотреть в авторской статье.

<div style="width:500px; font-weight:bold; text-align:center; color:#c90;
background-color:#f7fbf3; border:1px solid #9c6; margin:0 auto; padding:10px">
	<p>Этот <code>блок</code> имеет фиксированную ширину 500 пикселей. 
	У него нельзя изменить размер, при увеличении текста, он будет заново 
	разбиваться на строки внутри этого блока.</p>

</div>

Резиновые макеты

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

Примером такого макета можут служить GrayBit.com. Он уменьшается по ширине до 755 пикселей до того, как появляется горизонтальная полоса прокрутки, но и при этом она не требуется для просмотра основного содержимого страниц. Фактически, сайт замечательно смотрится вплоть до ширины в 560 пикселей, дальше элементы дизайна уже начинают перекрываться, пропадать или сваливаться вниз. Большинство резиновых макетов имеют такие ограничения и, как я видел, некорректно ведут себя на мобильных устройствах, пока не отключены стили вообще или не применена специальная таблица стилей для мобильных устройств.

Плюсы резинового макета

  • При грамотной верстке резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается довольно редко, но, теоретически, если все делать правильно, то такое возможно;
  • Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;
  • Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы). Однако…

Рассмотрим минусы такого макета

  • Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;
  • Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Некоторые советы по использованию этого макета

  • Используйте резиновый макет строго по назначению. Не позволяйте своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решили использовать именно ее, убедитесь, что резиновый макет вашего сайта нормально смотрится на большинстве экранных разрешений. Иначе оставьте это, игра не стоит свеч;
  • Если при использовании резинового макета у вас есть области с фиксированной шириной, значит, на самом деле, вы получили гибрид резинового и фиксированного макета, и его минимальная ширина будет определена шириной фиксированных блоков или самого большого из объектов (картинок, например). Будьте осторожны. Если вы хотите сделать сайт именно с резиновым макетом, оно так и должно быть на самом деле, а не только на словах;
  • Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800×600.

И, собственно, пример

<div style="width:74%; font-weight:bold; text-align:center; color:#c90;
background-color:#f7fbf3; border:1px solid #9c6; margin:0 auto; padding:10px">
	<p>Это резиновый <code>блок</code> шириной в 74% от ширины внешнего 
	(фиксированного) контейнера. У него нельзя изменить размер, так как размер 
	его внешнего контейнера жестко закреплен. При увеличении текста, он будет 
	заново разбиваться на строки внутри этого блока.</p>

</div>

Эластичный макет

При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

  • Если все сделано правильно, то это очень стабильная верстка, потому все изменяет размер пропорционально. В результате при любом изменении размеров все по-прежнему хорошо;
  • Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши… Я уже слышу, как вы говорите «Вау»

Минусы эластичного макета

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

Немного советов по эластичному макету

  • Если вы собираетесь верстать, используя эластичный макет, убедитесь, то он работает на маленьких мониторах. Иначе, зачем он вообще нужен?
  • Ограничьте размеры эластичного блока, определив размеры внешнего контейнера (используя резиновую или фиксированную ширину, т.е. создав гибридный макет). Например, #wrapper { width:60em; max-width:98%; }. Последователи «правильной идеологии» могут возразить, что это уже не будет истинно эластичным макетом, что он при этом ограничен или гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и прекрасна, но только не тогда, когда речь заходит о пользовательском удобстве (золотые слова!);
  • Помните, что IE 6 и меньше не поддерживают свойство max-width, убедитесь, что при задании максимально большого текст в IE не появляется горизонтальной полосы прокрутки на разрешении 1024×768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800×600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

Пример эластичной верстки

<div style="width:35em; font-weight:bold; text-align:center; color:#c90;
background-color:#f7fbf3; border:1px solid #9c6; margin:0 auto; padding:10px">
	<p>Это эластичный <code>блок</code> шириной в 35em. Он будет менять 
	размер при изменении размера шрифта, и при этом он ничем не ограничен.</p>

</div>

В заключении

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.

Спасибо всем, кто дочитал до конца статьи. Буду рад любой критике и комментариям.


© Всеми правами на перевод CSS макеты: фиксированные, резиновые, эластичные. Плюсы и минусы обладает Николай Мациевский. Дата оригинальной публикации 16 августа 2007 года.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

Zodios

Интерестная заметка, добавил к себе в закладки.
Но есть заметка получше. В которой приводятся примеры типовхы модульных сеток.
Вот ссылка на Основные примеры разметок
zodios.net
15.09.2008, 12:17
Ответить

bur

Давным давно я встречал эту статью здесь. Рекомендую, кстати, поставить ссылку на оригинал.

Не стоит сравнивать текущую статью, в которой говорится об основных типах верстки, и ту, что вы перевели, с готовыми примерами дивовой верстки скелетов. Суть разная.
15.09.2008, 12:34
Ответить
NO USERPIC

h4

Цитата:
Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640×480 не приходилось прокручивать сайт по горизонтали для нормального чтения;

Вам не кажется, что это требование несколько устарело?
11.10.2008, 17:08
Ответить
NO USERPIC

rgbeast

У вопроса две стороны. С одной стороны подавляющее большинство пользователей ПК имеют расширение не меньше 1024х768. С другой стороны растет число пользователей мобильных устройств, с расширением 640х480 или 800х600.
12.10.2008, 14:10
Ответить
NO USERPIC

h4

Если имеются в виду разного рода нетбуки, то среди них только один имеет разрешение 800х480, все остальные - от 1024. Для прочих мобильных девайсов разумнее делать отдельную версию, если таковые пользователи важны.
12.10.2008, 14:13
Ответить
NO USERPIC

rgbeast

Сейчас многие пользуются инетом, например, с айфона. Специальная мобильная версия - это в теории хорошо, на практике редкость. ИМХО, основную верстку можно расчитывать на 1024, убедившись. что на КПК она будет юзабельна (пользователи КПК уже привыкли к тому, что верстка сайтов сделана не для них и, кроме того, КПК умеет масштабировать сайты).
12.10.2008, 14:50
Ответить
NO USERPIC

h4

Подождите. Изначально я говорил о том, что устарела фраза про 640х480.

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

Дополнительную сумятицу вносит дата публикации перевода - 2008 год, при полном отсутствии указания даты написания оригинала.
12.10.2008, 15:21
Ответить
NO USERPIC

rgbeast

Дата оригинальной публикации указана, но внизу статьи. 2007 или 2008 год не такая уж принципиальная разница.
12.10.2008, 15:48
Ответить

bur

Посмотрим статистику экранных разрешений на спайлоге.
Действительно, на данный момент макеты с фиксированной шириной можно смело верстать под 1024x768 .
Имхо, про мобильные устройства забывать не стоит в том смысле, чтобы сайт в них не искажался до неюзабельности на слишком маленьких разрешениях, а вот верстать весь сайт под 640×480 без скролла уже не стоит.
13.10.2008, 11:04
Ответить
NO USERPIC

betaboy

Добрый вечер, подскажите, возможно ли реализовать на CSS 2 пропорциональный авто-ресайз фоновой картинки, как на этом сайте? http://www.alexandergusev.com/
07.08.2010, 22:37
Ответить

livsi

А там вовсе не ресайз фоновой картинки - пробовали в исходники глянуть:
<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow: hidden; z-index: -9999;"><img style="position: relative; width: 1032px; height: 645px; left: 0px; top: -195.5px;" src="http://habreffect.ru/files/29b/32b80fe33/alexandergusev_com.jpg"></div>


А собственно ресайз с помощью плагина jQuery Backstretch
http://int-systems.ru -- хостинг с cPanel, за разумные деньги
10.09.2010, 17:19
Ответить

sjd

Друзья, у меня существенный довод! Все нормальные люди читают текст на листах формата A4, потому что это удобно, а чем монитор отличается от листа бумаги? ;) Дерзайте.
20.09.2011, 20:43
Ответить
NO USERPIC

rgbeast

Люди читают разные форматы, например, книги в А4 не очень удобны. Непонятно в пользу или против чего довод.
20.09.2011, 21:17
Ответить

sjd

Вы же не читаете книги, формата A1 или A3, так ведь? Почему, в таком случае, это следует предлагать посетителям сайтов с разрешением экрана более 1024*768? Когда у меня был монитор 24', сайты я в нем никогда не просматривал, развернув браузер по всей ширине экрана.

Сайт вконтакте используют миллионы людей, он удобен, не смотря на фиксированную ширину.
20.09.2011, 21:32
Ответить
NO USERPIC

rgbeast

Все зависит от конкретного сайта и пределов применения. Например, разумно сделать сайт одновременно работающий на переносных устройствах (640х480) и настольных компьютерах.
21.09.2011, 01:29
Ответить
NO USERPIC

HD_team_ESQ

Вы же не читаете книги, формата A1 или A3, так ведь

А если шрифт будет большим ? Тот же текст , только буковки покрупнее соответственно пропроциям соотношения форматов ...

То же есть , большой 25 дюймовый , включен одновременно с 17 дюймовым .
На маленьком Контакт с его фиксированным типом макета ещё разглядеть можно , а вот на 25 дюймовом , находящимся на эргономическом расстоянии , контакт это размотанный рулон туалетной бумаги на фоне двери . Иного масштабного сравнения просто не найти .
Смысл эластичного макета , Динамично эластичного макета в его авто-адаптации под любое разрешение и размеры окна обозревателя ....
И на 17 дюймовом и на 25 дюймовом , естественно расположенных на растоянии от пользователя , в соответствии с эргономическими рекомендациями , эластичный тип макета будет иметь одинаковый угловой размер при любых разрешениях этих мониторов ..
Ваши определения и выводы носят чисто теоретический характер основанный на предположениях и допущениях . А фактически Динамично эластичный тип макета как реальность существует и развивается , далеко не по вашим определениям ....

Neo
08.12.2011, 04:01
Ответить

1234ru

В ваших терминах динамический макет - это либо рулон туалетной бумаги, размотанный поперек 1920 точек, либо, если на 1920 нормально выглядит, рулон туалетной бумаги, скомканный в гармошку на 1024 или 1280.
Универсальность динамического макета стала мнимой с тех пор, как крайние разрешения мониторов различаются почти в два раза.
Покажите мне хоть один сайт, где это не так.
То, что не убивает нас, делает нас инвалидами.
08.12.2011, 05:11
Ответить
NO USERPIC

rgbeast

Примеры удобных (ИМХО) динамических макетов: mail.google.com, livejournal.com, rbc.ru
08.12.2011, 10:37
Ответить

1234ru

Насчет gmail и livejournal, пожалуй, соглашусь. РБК динамический ограниченно - max-width:1280px.
То, что не убивает нас, делает нас инвалидами.
22.01.2012, 00:09
Ответить
NO USERPIC

SV_team_ESQ

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

Заблуждаетесь по большому счёту ...

Цитата:
Покажите мне хоть один сайт, где это не так

Раз уж вам было лень было набрать в Google фразу - динамично эластичный макет и ознакомиться с предметом вопроса , извольте :

runettex.clan.su

Если уж говорить совсем точно .

Суть макета в том что он автоматически подстаривается под любой размер окна обозревателя . Всегда во весь размер окна обозревателя а не экран монитора . Макет не масштабируется в окне обозревателя , соответствующими " командами " CTRL + / CTRL - .
Какой бы вы масштаб не сделали , макет всегда будет вписываться в окно .
При любом изменении размера окна обозревателя курсором , макет так же всегда будет вписываться в окно обозревателя .
На любом разрешении , если например окно обозревателя во весь экран , макет будет во весь экран монитора . Сохраняя при этом все пропорции соотношений размеров элементов страницы и шрифта . Именно сохранение соотношений пропорций размеров элементов и шрифта есть основное и главное преимущество Динамично эластичного типа макета - dynamically expandable elastic . Говоря доходчиво по простому , скриншоты страницы , сделанные например , на разрешениях 1024px , 1990px и 2048px ( по горизонтали ) , на мониторах с соотношением сторон 4:3 , при любых их размерах , 17" - 21" - 25" , будут как фотографии близнецов АБСОЛЮТНО идентичными ...
Ну а как выглядят Фиксированные и Резиновые макеты в таких случаях вам и без меня известно ..

Второй аспект преимущества динамично эластичного макетв состоит в его эргономичности . Если пожелаете и эту сторону вопроса можно будет раскрыть ...
22.12.2011, 23:30
Ответить

1234ru

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

Хм..
Первый раз такое вижу.

(выше я говорил об обычном эластичном макете, так что мы не о том спорили).

Вообще идея интересная..

Расскажите, как это достигается с технологической точки зрения
(я так понимаю, javascript вычисляет размер окна и меняет размер шрифта? ресайзятся ли картинки?)

По запросу в Google первая страница выдачи практически целиком занята вашим сайтом.
Динамично эластичный макет - ваша разработка?


Цитата:
Ваши определения и выводы носят чисто теоретический характер основанный на предположениях и допущениях
Ну, это понятно. Не судите строго. Я ведь практически ни одного сайта не сделал и опыта в веб-технологиях у меня ноль :D
То, что не убивает нас, делает нас инвалидами.
24.12.2011, 21:51
Ответить
NO USERPIC

SV_team_ESQ

Цитата:
Первый раз такое вижу.


Естествено , всего три сайта существует , и все шаши , на ucoz ...

Цитата:
(выше я говорил об обычном эластичном макете, так что мы не о том спорили).
Понятия Эластичный макет в чистом виде , по тем определениям что понаписаны по всему Internet_y , более не существует , как и не существовало сайтов ему соответствующих , точнее оно то есть как сокращение определения - Динамично эластичный макет .

Цитата:
ресайзятся ли картинки
Всё динамично пропорциолнально изменяется , обусловлено применением только EM и % , вместо PX , PT и прочего . Разумееться всё это работает в комплексе с коротеньким JS скриптом в заголовке шаблона страницы , основное назначение которого масштабировать шрифт по разрешению , точнее по размеру окна обозревателя ...
Цитата:

var propEsq = 100;function esqFont() { document.body.style.fontSize = parseInt(document.body.offsetWidth/propEsq) + 'px' }
onload = onresize = esqFont;

Цитата:
Динамично эластичный макет - ваша разработка?
Да ...
Так же на первом месте и по запросам типа
Домены Alpha 2 , Домены Alpha 2 Alpha 3 , Таблицы dBu , Таблицы dBu/V
ну а кто на вторм смотрите сами . Интеграция и партнёрство ...

Цитата:
Я ведь практически ни одного сайта не сделал
Это исправимо ..

Вчера классификацию дополнили обоснованием аспекта эргономичности Динамично эластичного типа , теоремой косинусов
runettex.clan.su/index/0-400
После патрулирования классификации продвинем выше ..
25.12.2011, 14:57
Ответить
NO USERPIC

rgbeast

Цитата:
Разумеется всё это работает в комплексе с коротеньким JS скриптом в заголовке шаблона страницы , основное назначение которого масштабировать шрифт по разрешению , точнее по размеру окна обозревателя


Возможно, этот скрипт как раз лишний. Сейчас на ноуте 1366х768, сайт читается. Меняю размер окна примерно до 700х700 и шрифт становится таким мелким, что прочитать ничего нельзя, причем сайт устроен так, что Ctrl+ работает некорректно и читабельного состояния добиться нельзя (Linux, Firefox 3.6.17).
25.12.2011, 15:12
Ответить

1234ru

Судя по всему, без этого скрипта хана всей задумке. На нем все и базируется: величинам, указанным в em, нужно от какого-то основания отталкиваться. Размер шрифта - и есть это основание.
Попробуй javascript отключи - увидишь, страница выглядит :D
То, что не убивает нас, делает нас инвалидами.
25.12.2011, 21:25
Ответить
NO USERPIC

SV_team_ESQ

Цитата:
Попробуй javascript отключи - увидишь, страница выглядит


А что пробовать и так знаю что будет ..

А если отключить поддержку Flash ??? и Java script заодно , сколько сайтов останется на 100% работоспособными ??
Так что отключение JS это не аргумент , за 2 с лишним года на сайт зашёл только один посетитель с отключенным JS .
А если у пользователя старая ОС и старый обозреватель , неподдерживает CSS 3 и HTML 5 а порой и HTML 4.01 толком не держат , что всё это в топку ??
26.12.2011, 01:32
Ответить

1234ru

Цитата:
Всё динамично пропорциолнально изменяется , обусловлено применением только EM и % , вместо PX , PT и прочего .

Ну да, я так и подумал.
Мне здесь не нравится вот что..

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

Во-вторых. Большинство сайтов сейчас сверстаны с фиксированными размерами шрифтов, причем диапазон этих размеров достаточно узкий (например, основной текст редко бывает меньше 12px и крупнее 14-16px). Это формирует у пользователей определенные ожидания, они привыкают к некоторому абсолютому размеру шрифта.
Шрифт же на сайте, сверстанном вашим способом, будет на больших мониторах выглядеть крупнее (а на маленьких - мельче), чем шрифты на других сайтах. От этого у пользователей наверняка сложится впечатление, что именно на этом сайте что-то не так, и пользоваться таким сайтом им будет непривычно.
То, что не убивает нас, делает нас инвалидами.
25.12.2011, 22:03
Ответить
NO USERPIC

SV_team_ESQ

Цитата:
Шрифт же на сайте, сверстанном вашим способом, будет на больших мониторах выглядеть крупнее (а на маленьких - мельче),


Ошибочное утверждение .
Размеры шрифта , отображаемого на разного размера/разрешения мониторах расположенных на эргономичном расстоянии в соответствии со своими размерами , будет по угловому размеру одинаковым ...

Это изложено в конце страницы , аспект эргономичности динамично эластичного типа макета

http://runettex.clan.su/index/0-400

Цитата:
Меняю размер окна примерно до 700х700
А зачем менять ??? А если это же сделать с фиксированным или резиновым сайтом ?? Страница обычно разваливается , из за привязки элементов к разным сторонам экрана или скроется за окном обозревателя , потребуется работа слайдера по горизонтали ...

Цитата:
Это формирует у пользователей определенные ожидания
Формировать нужно ожидания ..
Знаете как выглядит например контакт на мониторе в 25" ??? Чисто по " цветовой гамме " слившихся воедино элементов страницы можно сказать что это контакт ...
Например ваш сайт на мониторе в 25" ( ЭЛТ ) я разглядеть не могу , даже если сброшу разрешение до 2048 по горизонтали . А в упор смотреть , не имею ни какого желания портить зрение . Эргономика , ни чего тут не попишешь ..
Большие разрешения и мониторы делают не для того что бы уместить как можно больше элементов , а отобразить эти же элементы , например изображения , с гораздо лучшим разрешением .

Видео на большом мониторе с большим разрешением , например HD , вмещает в кадре столько же деталей как и на маленьком, но гораздо лучшего качества . Видео в данном случае есть динамично эластичный элемент , эргономичный ко всему прочему .
Не будете же вы смотреть фильм на мониторах в 15" и 25" на одном и том же расстоянии в 60 сантиметорв . Для 15" это нормальное растояние а для 25" нужно раза в 3 - 4 большая дистанция .
Не смотрите же видео на широкоформатном в упор , а на " эргономичном " расстоянии , так почему же сайт нужно на нём же просматривать в упор ? Только потому что он фиксированного типа ? и слишком всё мелкое на странице относительно размеров самого монитора ?? Это как раз и свидетельствует о недостатке фиксированных едениц измерения размеров , в свете большого разброса минимальных и максимальных размеров и разрешений мониторов ..

Конечно динамично эластиный макет воспринимается непривычно , но всё таки с учётом эргономики и usability это наиболее совершенный тип макета ...

Цитата:
а ресайз обычно плохо сказывается на том,
Вообще то если касаться качества изображений то на матричных мониторах , ЖК , плазма и др " плоских " отобразить изображение в надлежащем качестве не удастся никогда . Разрешение и размер ячейки отображения слишком велик для этого по сравнению с ЭЛТ мониторами ..
В этом свете , ресайз изображений не вносит заметного ухудшения в качество изображения , больше на изображения влияют обозреватели , как правило IE 9 отображает картинку гораздо лучше чем например Google Chrome 13 , у второго гораздот хуже алгоритм обработки отображаемого изображения , что сильно заметно при отображении наклонных шрифтов в частности .
Если бы в Google Chrome сделали бы нормальную обработку графики , он бы просто ползал как дохлая черепаха и был бы в хвосте по производительности ..
26.12.2011, 01:36
Ответить

1234ru

Цитата:
Конечно динамично эластиный макет воспринимается непривычно , но всё таки с учётом эргономики и usability это наиболее совершенный тип макета ...

Сам по себе - наверное, да.

Цитата:
Формировать нужно ожидания ..

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

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

В общем, до тех пор, пока не наметится тенденция и хотя бы 20-30% пользователей не будут видеть динамично-эластичные интерфейсы каждый день, это вряд ли будет успешным решением.
Если Вас это не смущает - дерзайте.
То, что не убивает нас, делает нас инвалидами.
30.12.2011, 05:14
Ответить
NO USERPIC

SV_team_ESQ

Цитата:
просто вызовет у своих пользователей неприязнь и потеряет аудиторию

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

Цитата:
это вряд ли будет успешным решением.

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

Цитата:
Если Вас это не смущает - дерзайте.

Нисколько , работаем только в этом напрвлении . Даже одно то , что раньше сайт воспринимался как чудо - юдо , теперь такой реакции не вызывает ..
30.12.2011, 10:50
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100