Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 109
Сейчас я вижу все больше сайтов, ширина которых меняется, скажем, от 1000 до 1200. Мне кажется, это правильная резина, нет? :)
«Правильной» (все тянуться без потерь для блоков) может быть и 1000 — 2000, и с большим разлетом. Вопрос не в том, правильная ли, а скорее: нужна ли?
Поверьте, у них давным давно уже не 1024.
А мой опыт говорит о том, что у большинства директоров (принимающих решение) стоит ноутбук широкоформатный, или 19—20 дюмов с 1200px.
Тем более, что сайты делаются из расчета на ближайшие 3 года, а ситуация в форматах меняется очень быстро — можно пробежать по магазинам.
Единственное что остановит вторжение широких — рост доллара в России.
Потом рассуждения «У первого монитор 1024х768. У второго, все чаще, нетбук или ноут с монитором не более 14 дюймов.
Вопрос: и зачем же на таком сайте резина?» сродни «Я вчера и позавчера ездил на авто. Запаска, деньги на бензин, аптечка, заднее кресло, огнетушитель и куча дисков не понадобилось. Зачем они в моей машине вообще?»
Единственное что остановит вторжение широких — рост доллара в России.
Потом рассуждения «У первого монитор 1024х768. У второго, все чаще, нетбук или ноут с монитором не более 14 дюймов.
Вопрос: и зачем же на таком сайте резина?» сродни «Я вчера и позавчера ездил на авто. Запаска, деньги на бензин, аптечка, заднее кресло, огнетушитель и куча дисков не понадобилось. Зачем они в моей машине вообще?»
вот только если бы без хаков и проч. приблуд в CSS выставить такой диапазон, и при этом была бы кроссброузерность — было бы здорово… а сейчас приходиться исхитряться…
Для последнего проекта я делал резину от 1024 до 1280. :) Дальше не тянется.
450px — ширина, которую почему-то предпочли разработчики Wordpress, установив ее в скине по умолчанию… Как вам такое? :)
Согласен, неудобно. Но на такой монитор не будут влезать достаточно много число сайтов.
Мне кажется, ориентироваться на минимальное разрешение в 1000 пикселей по ширине нужно, а
остальные… Это либо обладатели старых мониторов, либо хозяева ультрапортативных устройств. Это их проблемы и решить они могут либо заменой железа, либо установкой специального браузера. В их случае говорить про нормальный дизайн сайта уже нельзя
Мне кажется, ориентироваться на минимальное разрешение в 1000 пикселей по ширине нужно, а
остальные… Это либо обладатели старых мониторов, либо хозяева ультрапортативных устройств. Это их проблемы и решить они могут либо заменой железа, либо установкой специального браузера. В их случае говорить про нормальный дизайн сайта уже нельзя
img-fotki.yandex.ru/get/2711/sairi-na-tenshi.10/0_1d67e_a4b9c7d6_orig
обладателям ультрапортативных устройств можно отдавать light/lynx style дизайн.
Возможно, из-за возрастающей популярности нетбуков в css media types вскоре будет красоваться новое значение. Что-то типа «netbook-screen». И вордпресс сочинит другой скин по умолчанию:)
Погодите-погодите, не пугайте меня так, на Eee PC 900 же 1024px? Вроде как стандартное разрешение, самое распространённое сейчас.
Вот 700-ом навыки игры в змейку должны быть действительно очень востребованы)
Вот 700-ом навыки игры в змейку должны быть действительно очень востребованы)
это не просто так а от разрешения 640х480 минус скроллбары и прочая и про запас немного видимо :) хотя примерно 30 пикселей как раз и надо убирать.
www.parallel.ua/carteblanche/ — там ограниченно резиновая верстка. а не просто резиновая
«это гораздо более сложная и трудоёмкая работа, результом которой является (как визуально, так и логически) отличнейший рендеринг страницы для вашего разрешения экрана.» — в двух словах, это сделать сложнее.
Я же в своей статье как раз обличаю более сложные, но бесполезные эффекты. В ответ скажу: нерезиновая верстка, это настоящая работа дизайнера, которая требует решить задачу читаемости в т.ч. на разных мониторах без лишних тех стредств, что приведет к удешевлению производства и уменьшению нагрузки на машины. В пример приведу www.msnbc.msn.com/ ru.youtube.com/ www.adobe.com/ store.apple.com/us — информации в 10 раз больше, понятнее вашего примера в 100 раз
Приведенный вами пример отличная демонстрация не очень правильного дизайна, но хороших навыков отрисовки и чувства цвета. Объясняю:
4 раза зашел на страницу, изучал по 2-3 минуты каждый раз. Без нажатия на кнопки, я так и не понял о чем вообще речь. Более того, я так и не понял куда нужно нажать чтобы началась «обработка меня» (читай, донесение главной мысли сайта)
Блок с лебедевскими «хоум, серч, сенд» резиниться ТАК коряво, что даже описывать не хочется.
Воровать с хабра НЛО… я бы не рисковал :)
Вобщем, глаза разбежались, графика порадовала, о чем вообще речь не понял.
P.S. А можно координаты отрисовщика в личку?
Я же в своей статье как раз обличаю более сложные, но бесполезные эффекты. В ответ скажу: нерезиновая верстка, это настоящая работа дизайнера, которая требует решить задачу читаемости в т.ч. на разных мониторах без лишних тех стредств, что приведет к удешевлению производства и уменьшению нагрузки на машины. В пример приведу www.msnbc.msn.com/ ru.youtube.com/ www.adobe.com/ store.apple.com/us — информации в 10 раз больше, понятнее вашего примера в 100 раз
Приведенный вами пример отличная демонстрация не очень правильного дизайна, но хороших навыков отрисовки и чувства цвета. Объясняю:
4 раза зашел на страницу, изучал по 2-3 минуты каждый раз. Без нажатия на кнопки, я так и не понял о чем вообще речь. Более того, я так и не понял куда нужно нажать чтобы началась «обработка меня» (читай, донесение главной мысли сайта)
Блок с лебедевскими «хоум, серч, сенд» резиниться ТАК коряво, что даже описывать не хочется.
Воровать с хабра НЛО… я бы не рисковал :)
Вобщем, глаза разбежались, графика порадовала, о чем вообще речь не понял.
P.S. А можно координаты отрисовщика в личку?
www.parallel.ua/ — слева, снизу :)
резина как резина на картбланше. скрипт мог бы и при изменении размера окна менять всё а не только при загрузке страницы. Да и то только если не меньше 1024 пикселей ширина. Если меньше-скроллбар появляется. Хотя это на сегодня и стандарт, все же сайт, который приводят как пример резины мог бы и меньшее разрешение учитывать.
есть еще очень красивый, на мой взгляд, прием при резиновой верстке, который вы не упомянули — отображение большего количества контента при большем разрешении экрана. Мы использовали это при создании интернет-магазина: если у пользователя разрешение 1024x768 — он видит три «новинки» на главной странице, если же 1440x900 — пять штук. Это не значит, что обладатель 24" монитора увидит экран, под завязку залепленный картинками — просто нужно задать рамки.
пример можно посмотреть на Deviantart
пример можно посмотреть на Deviantart
> Прибавьте к этому факт, о том что лучше всего мы воспринимаем именно центр экрана,
> и нам крайне неудобно изучать что либо на краях…
Позволю несогласиться (вот уж куда я не смотрю, так это в центр монитора) и приведу цитату Ромы Воронежского:
«Вот провели исследование, куда смотрят люди, когда ищут в гугле. Оказалось, они смотрят в левую верхнюю часть страницы. Опубликовали. И ей-богу, наверняка сидит сейчас какой-нибудь идиот и рассказывает кому-то, что все смотрят в левую верхнюю часть страницы, поэтому все важное надо размещать только там. Исследования сосут. То есть, они, конечно, бывают очень интересные, но законы из них выводить нельзя, потому что это вам не физика и алгебра. Люди смотрят туда, где им что-то показывают, а вовсе не куда-то туда всегда.»
> и нам крайне неудобно изучать что либо на краях…
Позволю несогласиться (вот уж куда я не смотрю, так это в центр монитора) и приведу цитату Ромы Воронежского:
«Вот провели исследование, куда смотрят люди, когда ищут в гугле. Оказалось, они смотрят в левую верхнюю часть страницы. Опубликовали. И ей-богу, наверняка сидит сейчас какой-нибудь идиот и рассказывает кому-то, что все смотрят в левую верхнюю часть страницы, поэтому все важное надо размещать только там. Исследования сосут. То есть, они, конечно, бывают очень интересные, но законы из них выводить нельзя, потому что это вам не физика и алгебра. Люди смотрят туда, где им что-то показывают, а вовсе не куда-то туда всегда.»
Можно оценить свои способности восприятия тут: nano.a5.ru
Попробуйте выбрать самый удобный для себя вариант, то лько максимально чество. Мы тут не право собственности доказываем :)
Есть еще куча исследований по поводу значимости нижнего правого угла листа (это из полиграфических разработок), но есть исследования по поводу важности в вебе скорее верхнего левого угла…
Люди смотрят туда где интересно, но долго смотрят туда где комфортнее.
Попробуйте выбрать самый удобный для себя вариант, то лько максимально чество. Мы тут не право собственности доказываем :)
Есть еще куча исследований по поводу значимости нижнего правого угла листа (это из полиграфических разработок), но есть исследования по поводу важности в вебе скорее верхнего левого угла…
Люди смотрят туда где интересно, но долго смотрят туда где комфортнее.
вы, кажется, совсем не прочитали приведенную цитату :)
что касается 1-го варианта он удобнее не потому что в центре, а потому что ширина небольшая, удобно читать
и в единственном экземпляре, глаза не разбегаются
что касается 1-го варианта он удобнее не потому что в центре, а потому что ширина небольшая, удобно читать
и в единственном экземпляре, глаза не разбегаются
Монитор 19" (ЭЛТ, то есть видимая область примерно 18"), разрешение обычное 1600х1200, браузер FF 3, наиболее удобное личное для меня:
— «теекст 3» (исправьте два «е»), левый нижний угол- когда сижу за компьютером — эргономика рабочего места ужасная, но на то есть свои причины
— «текст 2», когда читаю с дивана, но не идеальное, мало того, что масштабирование средствами браузера не работает, так и не нужные мне поля по бокам
— «теекст 3» (исправьте два «е»), левый нижний угол- когда сижу за компьютером — эргономика рабочего места ужасная, но на то есть свои причины
— «текст 2», когда читаю с дивана, но не идеальное, мало того, что масштабирование средствами браузера не работает, так и не нужные мне поля по бокам
как по мне резиновое должно быть всё, кроме основного информационного блока, который должен быть фиксирован по ширине на 800 точек.
Владельцы больших мониторов не разворачивают браузер на всю ширину, предпочитая тратить пространство на экране более рационально.
У меня три монитора на работе и на всех я разворачиваю браузер на весь экран, мне так удобней — фокус внимания, всё такое…
Я мог и ошибиться, выборка сравнительно небольшая.
Но, по-моему, всё-таки всё равно удобнее держать на экране несколько цещей одновременно, чем смотреть на растянутый до невозможности браузер.
Но, по-моему, всё-таки всё равно удобнее держать на экране несколько цещей одновременно, чем смотреть на растянутый до невозможности браузер.
Дело не в резине или ее отсутствии, а дело в адекватности пользователю.
Сайт должен отображаться адекватно в независимости от разрешения.
Считаю комбинированный вариант: масштабирование шрифтов + резина в «правильных» дозировках наиболее рациональным подходом.
Сайт должен отображаться адекватно в независимости от разрешения.
Считаю комбинированный вариант: масштабирование шрифтов + резина в «правильных» дозировках наиболее рациональным подходом.
Главная проблема, имхо, ограниченные средства связки контент/html/css/браузер (да и ос сюда же можно отнести) для удобной индивидуальной (и ручной, и автоматической) настройки отображения сайтов. Почему-то дизайнер (а то и верстальщик) решает, в частности, какой ширины (и в каких единицах) пользователь должен видеть нужный ему контент, причем решает ничего не зная о оборудовании и предпочтениях пользователя, в лучшем случае исходя из данных статистики.
Но это проблема глобальная, пока же наиболее удобной лично для себя, как для пользователя, для «серьезного» текстового контента (статьи, посты на форумах и блогах с ответами/комментами и т. п.) считаю «продвинутую резиновую верстку», когда при малой ширине (те самые 55-60 символов, именно символов, не в пикселях или дюймах ширина) окна (на маленьких экранах, не растянутых окнах или при большом масштабе) основной текстовый контент занимает 100% ширины окна (с небольшими отступами), а сайдбар(ы) за границей окна справа (желательно) или ниже. А на больших размерах окна основной текст порядка 2/3 его ширины (правая треть под сайдбар(ы). Правда вот реализовать (это особенно с правым размещением сайдбара на маленьких окнах) без JS у меня не получается :( Правда я верстальщик-любитель, даже дилетант
Но это проблема глобальная, пока же наиболее удобной лично для себя, как для пользователя, для «серьезного» текстового контента (статьи, посты на форумах и блогах с ответами/комментами и т. п.) считаю «продвинутую резиновую верстку», когда при малой ширине (те самые 55-60 символов, именно символов, не в пикселях или дюймах ширина) окна (на маленьких экранах, не растянутых окнах или при большом масштабе) основной текстовый контент занимает 100% ширины окна (с небольшими отступами), а сайдбар(ы) за границей окна справа (желательно) или ниже. А на больших размерах окна основной текст порядка 2/3 его ширины (правая треть под сайдбар(ы). Правда вот реализовать (это особенно с правым размещением сайдбара на маленьких окнах) без JS у меня не получается :( Правда я верстальщик-любитель, даже дилетант
Вот и вопрос, зачем нужны дополнительные средства?
Я бы высказал еще одну мысль: частенько (не все и не всегда) дизайнеры, перекладывают задачу компоновки сайта на плечи верстальщиков и программистов. Страдают от этого многие, по крайней мере, нагрузка ложиться на глаза пользователей и карманы заказчиков.
Я бы высказал еще одну мысль: частенько (не все и не всегда) дизайнеры, перекладывают задачу компоновки сайта на плечи верстальщиков и программистов. Страдают от этого многие, по крайней мере, нагрузка ложиться на глаза пользователей и карманы заказчиков.
Плохо читается текст, если в строке более 66 символов, если его ширина более 10 см (цифры, естественно, примерные, субъективные, но суть в этом). В глазах рябит от отсутствия естественных ограничителей (пустоты). Пока дочитаешь конец пятнадцатой строки, потеряешь начало шестнадцатой, будешь рыскать в его поисках.
Именно поэтому текст в газетах принято разбивать на колонки. В книгах большого формата — тоже.
А чем хуже, скажем, сайт, который мы рассматриваем на мориторе с диагональю 22 дюйма? Да, хабр неудобно читтаь — строки длииииииииииииииииииииинные. Если бы сообщения автоматически делились на две, три колонки, в зависимости от ширины окошка браузера — было бы гораздо удобнее.
Именно поэтому текст в газетах принято разбивать на колонки. В книгах большого формата — тоже.
А чем хуже, скажем, сайт, который мы рассматриваем на мориторе с диагональю 22 дюйма? Да, хабр неудобно читтаь — строки длииииииииииииииииииииинные. Если бы сообщения автоматически делились на две, три колонки, в зависимости от ширины окошка браузера — было бы гораздо удобнее.
Я считаю правильным подходом сочетание резиновости и эластичности.
Делать сайт строго фиксированным по ширине + поля по бокам — не лучший вариант, ИМХО. Так как при увеличении разрешения монитора и сохранении его геометрических размеров (при условии одного и того же dpi) текст начинает уменьшаться. Что заставляет пользователя увеличивать его принудительно. В результате, жесткая колонка, в которой дизайнер надеялся увидеть 50-60 символов в ширину, будет вмещать лишь 30-40.
Другой вопрос, что из нерезинового макета сверстать хороший резиновый шаблон в большинстве случаев практически невозможно. Резиновость, как и эластичность, должна закладываться на этапе проектирования макета.
Делать сайт строго фиксированным по ширине + поля по бокам — не лучший вариант, ИМХО. Так как при увеличении разрешения монитора и сохранении его геометрических размеров (при условии одного и того же dpi) текст начинает уменьшаться. Что заставляет пользователя увеличивать его принудительно. В результате, жесткая колонка, в которой дизайнер надеялся увидеть 50-60 символов в ширину, будет вмещать лишь 30-40.
Другой вопрос, что из нерезинового макета сверстать хороший резиновый шаблон в большинстве случаев практически невозможно. Резиновость, как и эластичность, должна закладываться на этапе проектирования макета.
Про уменьшение текста на больших мониторах верно. Многие про это забывают. Не только веб-дизайнеры, но и разработчики ПО.
И про закладывание на этапе проектирования тоже верно. Сталкивался с этим.
И про закладывание на этапе проектирования тоже верно. Сталкивался с этим.
>при условии одного и того же dpi.
Изменение разрешения при фиксированном физическом размере — тут dpi не может остаться неизменным. Наверное, вы имели в виду сохранение размера шрифта в пикселях.
Изменение разрешения при фиксированном физическом размере — тут dpi не может остаться неизменным. Наверное, вы имели в виду сохранение размера шрифта в пикселях.
Я имел в виду, настройки dpi для шрифтов у Виндоуз. Есть такая настройка, которая позволяет выбрать между 96 тнд и 120 тнд для экранных шрифтов. При выборе 120 тнд шрифты становятся заметно крупнее.
Правда, я ещё не встречал ни одного человека, кто бы пользовался значением тнд, оличным от установленного по умолчанию. Но при верстке надо исходить из предположения, что такие люди все-таки есть. :)
Как дело обстоит с другими ОС — не знаю, к сожалению.
Правда, я ещё не встречал ни одного человека, кто бы пользовался значением тнд, оличным от установленного по умолчанию. Но при верстке надо исходить из предположения, что такие люди все-таки есть. :)
Как дело обстоит с другими ОС — не знаю, к сожалению.
Я нашел эту настройку у себя — действительно, я ею никогда не пользовался (да и мои знакомые тоже).
Хочу заметить, что в данном случае господа из Microsoft несколько превратно использовали формулировкy dpi («точек на дюйм»). То, что Microsoft называет в этом случае изменением dpi — это просто масштабирование размера шрифта. В таких условиях говорить о привязке к настоящему (физическому) дюйму им вообще не стоило. Ибо dpi как был 72 (к примеру), так и остался.
Никакой софт не может изменить физическую плотность размещения пикселей монитора на площади — он может только эмулировать такое изменение, да и то это актуально в основном только для ЭЛТ — там иногда полезно уменьшить разрешение экрана, если нас не устраивает мелкий текст в максимальном разрешении. Для повсеместно распространенных ЖК менять разрешение смысла особого нет — разве только, чтобы глаза себе сломать об интерполированные пиксели в неродном для монитора разрешении. А вот масштабировать таким образом шрифты может быть очень даже полезно для пользователей ЖК.
Хочу заметить, что в данном случае господа из Microsoft несколько превратно использовали формулировкy dpi («точек на дюйм»). То, что Microsoft называет в этом случае изменением dpi — это просто масштабирование размера шрифта. В таких условиях говорить о привязке к настоящему (физическому) дюйму им вообще не стоило. Ибо dpi как был 72 (к примеру), так и остался.
Никакой софт не может изменить физическую плотность размещения пикселей монитора на площади — он может только эмулировать такое изменение, да и то это актуально в основном только для ЭЛТ — там иногда полезно уменьшить разрешение экрана, если нас не устраивает мелкий текст в максимальном разрешении. Для повсеместно распространенных ЖК менять разрешение смысла особого нет — разве только, чтобы глаза себе сломать об интерполированные пиксели в неродном для монитора разрешении. А вот масштабировать таким образом шрифты может быть очень даже полезно для пользователей ЖК.
>в данном случае господа из Microsoft несколько превратно использовали формулировкy dpi («точек на дюйм»).
А что собственно не так? Запустили на семнашке 1600х1200 сделали 120, 1280х1024(960) — 960 1024x768 -72 и при любом разрешении шрифты размеры которых заданы в абсолютных единицах(дюймы(пункты)б см и т. п.) выглядят одинаков (ну плюс-минус). Не удивлюсь даже если GDI использует эту настройку для отоброженния графики в абсолютных единицах
>Никакой софт не может изменить физическую плотность размещения пикселей монитора на площади
Свойства: Экрана — Параметры — Разрешение экрана тоже физическую плотность не изменит? хоть ставь 800х600, хоть 2048х1536? :) Ну это так, бурчание ;)
А что собственно не так? Запустили на семнашке 1600х1200 сделали 120, 1280х1024(960) — 960 1024x768 -72 и при любом разрешении шрифты размеры которых заданы в абсолютных единицах(дюймы(пункты)б см и т. п.) выглядят одинаков (ну плюс-минус). Не удивлюсь даже если GDI использует эту настройку для отоброженния графики в абсолютных единицах
>Никакой софт не может изменить физическую плотность размещения пикселей монитора на площади
Свойства: Экрана — Параметры — Разрешение экрана тоже физическую плотность не изменит? хоть ставь 800х600, хоть 2048х1536? :) Ну это так, бурчание ;)
Да все нормально — я говорю о том, что термин dpi неправильно использован. В продуктах Microsoft многие вещи неправильно сделаны или названы, но это ведь не мешает людям их использовать, верно?
Если менять эту настройку «точек на дюйм», не меняя разрешение экрана, то размер шрифта в пикселях поменяется, а отображаемый dpi останется тем же самым, оттого и увеличение будет видно. Если же мы размер шрифта в пикселях не поменяем, а только увеличим отображаемый dpi (этот способо как раз описан мной в последнем абзаце про эмуляцию разрешений — и вами в «бурчании»), то логическое разрешение экрана становится больше, а физическое отображение шрифта — мельче.
Насчет бурчания — оно ведь про логическую плотность размещения пикселей, зависящую от логического разрешения. На экране с в 1024x768 _физических_ пикселей можно устроить отображение 800x600 логических (потому что это меньше физического разрешения, при этом физических пикселей все равно будет 1024x768), но увидеть на нем 2048х1536 логических пикселя не получится никак — потому что 1024x768 — для этого монитора будет «потолок». Точно так же не получится смотреть HD video в HD качестве на обычном (не-HD) телевизоре. Потому что физических пикселей больше не станет, хоть ты в три раза логическое разрешение увеличь.
Если менять эту настройку «точек на дюйм», не меняя разрешение экрана, то размер шрифта в пикселях поменяется, а отображаемый dpi останется тем же самым, оттого и увеличение будет видно. Если же мы размер шрифта в пикселях не поменяем, а только увеличим отображаемый dpi (этот способо как раз описан мной в последнем абзаце про эмуляцию разрешений — и вами в «бурчании»), то логическое разрешение экрана становится больше, а физическое отображение шрифта — мельче.
Насчет бурчания — оно ведь про логическую плотность размещения пикселей, зависящую от логического разрешения. На экране с в 1024x768 _физических_ пикселей можно устроить отображение 800x600 логических (потому что это меньше физического разрешения, при этом физических пикселей все равно будет 1024x768), но увидеть на нем 2048х1536 логических пикселя не получится никак — потому что 1024x768 — для этого монитора будет «потолок». Точно так же не получится смотреть HD video в HD качестве на обычном (не-HD) телевизоре. Потому что физических пикселей больше не станет, хоть ты в три раза логическое разрешение увеличь.
>На экране с в 1024x768 _физических_ пикселей
Вот чеcтно говоря не знал, что на моем экране есть физические пиксели, знаю, что есть зерна люминофора и что сфокусированный поток электронов отображая логические пиксели на разрешениях вплоть до 2048x1536 по любому захватывает не одно такое зерно, по крайней мере чередующиеся черные и белые линии шириной один пиксель не сливаются (если под лупой рассматривать :) ), есть некоторая расфокусировка RGB по краям экрана, но не более
Если рассматривать экраны имеющие физические пиксели, такой экран бОльшие или меньшие разрешения будет эмулировать, и именно поэтому я свой монитор (пока он показывает нормально) на ЖК или плазму не поменяю, в крайнем случае дополню, если вдруг 1600x1200 пикселей мне будет не хватать (все-таки 100Гц глаз очень чувствует), хотя бы потому что никаких денег не напасешься на железо, чтобы современный игры с нормальным качеством на 1600х1200 (или большем) гонять, а если переключаться на меньшие, то ЖК начнет эмулировать, что картинку еще больше испортит.
Вот чеcтно говоря не знал, что на моем экране есть физические пиксели, знаю, что есть зерна люминофора и что сфокусированный поток электронов отображая логические пиксели на разрешениях вплоть до 2048x1536 по любому захватывает не одно такое зерно, по крайней мере чередующиеся черные и белые линии шириной один пиксель не сливаются (если под лупой рассматривать :) ), есть некоторая расфокусировка RGB по краям экрана, но не более
Если рассматривать экраны имеющие физические пиксели, такой экран бОльшие или меньшие разрешения будет эмулировать, и именно поэтому я свой монитор (пока он показывает нормально) на ЖК или плазму не поменяю, в крайнем случае дополню, если вдруг 1600x1200 пикселей мне будет не хватать (все-таки 100Гц глаз очень чувствует), хотя бы потому что никаких денег не напасешься на железо, чтобы современный игры с нормальным качеством на 1600х1200 (или большем) гонять, а если переключаться на меньшие, то ЖК начнет эмулировать, что картинку еще больше испортит.
Не знаю, тот же Хабр читаю при разрешении 1920x1200 и не испытываю затруднений.
Зато, к примеру, статьи на iXBT так и хочется взять за уши и растянуть по ширине :-)
Зато, к примеру, статьи на iXBT так и хочется взять за уши и растянуть по ширине :-)
В вашем примере не все гладко с типографикой. Текст имеет увеличенное межбуквенное растояние + приравнен по обоим краям. В тексте образовались дыры, а вот они то и мешают нормальн очитать текст, хотя блоки и смотряться ровнее.
Да просто выравнивание по ширине — это великолепно, но только когда есть средства переноса (автоматического, полуавтоматического). Иначе дырки неизбежны.
Вставить бы в, скажем, Firefox модуль расстановки переносов из TeX — вот был бы идеально выравнивающий по ширине браузер.
Вставить бы в, скажем, Firefox модуль расстановки переносов из TeX — вот был бы идеально выравнивающий по ширине браузер.
Речь не о выравнивании по ширине (хотя оно мне тоже не нравится). Чисто визуально смотрится некрасиво узенькая колоночка в середине белого поля. Чем больше разрешение, тем хуже смотрится :-)
А вот это кривые руки дизайнера, а не минусы колонки текста :) Это дизайнер не постарался сделать так, чтобы текст смотрелся хорошо (фоны, графика, работа со шрифтом, все бы это сняло «одинокость»)
Я думаю, что никакая работа со шрифтом не исправит ситуацию, в которой ширина сайта почти в четыре раза меньше ширины монитора :-) Всё равно смотрится одиноко.
А проблемы растягивающихся сайтов я не вижу. Можно же не открывать на весь экран окно браузера. Кому как удобно, тот так и сделает.
Вот :-)
А проблемы растягивающихся сайтов я не вижу. Можно же не открывать на весь экран окно браузера. Кому как удобно, тот так и сделает.
Вот :-)
Проблема с разворачиванием/не разворачиванием окон в том, что если бы все делали сайт по одному образцу, то да, настроил один раз и все, а так, у одних сайтов верстка фиксированная (причем на разных ширинах у разных), у других полная резина, третьи используют min/max-width, четвертые еще что-нибудь.
Согласен, насчет ixbt, мне тоже убить хочется :) Вообще идеальным решением было бы такая «резиновая верстка», чтобы я сам мог мышкой взять и растянуть или сузить нужный мне столбец настолько, насколько мне нужно. Но увы ни браузеры, ни плагины к ним, пока такой функциональностью не обладают (хотя к некоторым плагинам FF, прикрутить должно быть не сложно, динамическое изменение CSS они поддерживают, но только ручками надо цифры вбивать). Для пары наиболее посещаемых мною сайтов (не включая хабр, хабр и так на 1600 нормально показывает) написал свои CSS, но муторно.
Согласен, насчет ixbt, мне тоже убить хочется :) Вообще идеальным решением было бы такая «резиновая верстка», чтобы я сам мог мышкой взять и растянуть или сузить нужный мне столбец настолько, насколько мне нужно. Но увы ни браузеры, ни плагины к ним, пока такой функциональностью не обладают (хотя к некоторым плагинам FF, прикрутить должно быть не сложно, динамическое изменение CSS они поддерживают, но только ручками надо цифры вбивать). Для пары наиболее посещаемых мною сайтов (не включая хабр, хабр и так на 1600 нормально показывает) написал свои CSS, но муторно.
Все сайты студии Лебедева резиновые, и говорить, что они все одного (красного, зеленого или синего) цвета было бы как минимум не профессионально.
Делайте только резиновые сайты!!!
Делайте только резиновые сайты!!!
«через чур» исправьте плз: gramota.ru/slovari/dic/?word=%F7%E5%F0%E5%F1%F7%F3%F0&all=x
В общем и целом согласен. Добавлю только, что современные мониторы (20 дюймов и выше) прекрасно подходят для чтения, поскольку могут отобразить один газетный разворот (два листа А4 рядом).
То есть, по идее, сайт можно сделать двухколоночным, где слева начало текста, а справа его продолжение. Но технологически это осуществить сложно, потому и не делают.
Кстати, ещё дополнение: владельцы широких мониторов редко растягивают браузер на весь экран по ширине. Мне кажется, ширина в районе 1200 пикселей самая комфортная — как раз удобная колонка с текстом, плюс 1 или 2 колонки для навигации и рекламы.
То есть, по идее, сайт можно сделать двухколоночным, где слева начало текста, а справа его продолжение. Но технологически это осуществить сложно, потому и не делают.
Кстати, ещё дополнение: владельцы широких мониторов редко растягивают браузер на весь экран по ширине. Мне кажется, ширина в районе 1200 пикселей самая комфортная — как раз удобная колонка с текстом, плюс 1 или 2 колонки для навигации и рекламы.
Ну, колонки трудно реализовать из за скролов.
А как часто вы видите что человек читает именно полностью развернув газету? частенько, она складывается по-максимуму для чтения статьи а разворот просматривается чтобы понят ьсодержание газеты.
А как часто вы видите что человек читает именно полностью развернув газету? частенько, она складывается по-максимуму для чтения статьи а разворот просматривается чтобы понят ьсодержание газеты.
Газету складывают, потому что развернутой её держать неудобно.
А как много людей, при чтении за столом разворачивают ее на столе? Даже при условии что он свободен.
Думаю, что если вам принесут и положат на стол развернутую газету вы вряд ли будете её специально складывать, а вот то что вы её развернете, если захотите посмотреть что в ней есть еще интересного это факт.
Современный сайт должен тянуться.
Согласен с автором статьи в том, что не все надо воспринимать на верну и чаще стоит руководствоваться здравым смыслом. Зачастую полностью резиновые сайты при достаточно большом расширение превращаются в нечто неудобоваримое. Иногда стоит использовать растяжение в пределах некоторого интервала.
Вот так вот наш дизайнер решил данную проблему:
test.stroyhim.com/
test.stroyhim.com/floor.html
Согласен с автором статьи в том, что не все надо воспринимать на верну и чаще стоит руководствоваться здравым смыслом. Зачастую полностью резиновые сайты при достаточно большом расширение превращаются в нечто неудобоваримое. Иногда стоит использовать растяжение в пределах некоторого интервала.
Вот так вот наш дизайнер решил данную проблему:
test.stroyhim.com/
test.stroyhim.com/floor.html
Не дописал.
test.stroyhim.com/gallery.html
test.stroyhim.com/handmade.html
Если походить по сайту, можно обратить внимание на то что есть два типа страниц: «нормальные» и «широкие».
Т.е. часть страниц тянется вместе с сайтом до конца (главная, галерея, страницы с картами цветов), а текстовые страницы тянутся до определенного момента, после чего начинают центрировать относительно родительского блока.
test.stroyhim.com/gallery.html
test.stroyhim.com/handmade.html
Если походить по сайту, можно обратить внимание на то что есть два типа страниц: «нормальные» и «широкие».
Т.е. часть страниц тянется вместе с сайтом до конца (главная, галерея, страницы с картами цветов), а текстовые страницы тянутся до определенного момента, после чего начинают центрировать относительно родительского блока.
Статья очень и очень полезная.
Истина «все хорошо в меру» работает и здесь.
Про границы между блоками и их растяжение, чувствовал и знал где-то на подсознании, теперь при случаи смогу подтвердить свои доводы в защиту рационального растяжения страницы вашей статьей.
Истина «все хорошо в меру» работает и здесь.
Про границы между блоками и их растяжение, чувствовал и знал где-то на подсознании, теперь при случаи смогу подтвердить свои доводы в защиту рационального растяжения страницы вашей статьей.
Я за то, чтобы была максимальная и минимальная ширина. И то, максимальная часто бывает не нужна.
Посмотрите сюда: prom-k.ru. Здесь дизайн сайта растягивается по-максимуму, а контент-зона от ~1000px до 1200px. И на 1200px на больших мониторах читать вполне удобно.
Посмотрите сюда: prom-k.ru. Здесь дизайн сайта растягивается по-максимуму, а контент-зона от ~1000px до 1200px. И на 1200px на больших мониторах читать вполне удобно.
Все гораздо проще и мысль можно выразить всего-навсего одним предложением:
Если информации много — резина. Мало — фикс.
Если информации много — резина. Мало — фикс.
Следующий шаг развития верстки после резиновой — адаптивная. Чтобы понять что это, можно посмотреть страницу opera:about или какое-нибудь сообщение об ошибке HTTP в опере при ширине от 100 до 1400 пикселей. Особенно интересно смотреть, как блочные элементы становятся инлайновыми, а загаловки при этом становятся жирными.
>многие дизайнеры пришли к выводу, что тянуть бесконечно контент нельзя
давайте уже пользователь сам решит, как ему удобнее.
Если пользователю комфортно читать на широкоэкранной 24дюймовке в развернутом окне — резиновый сайт позоляет ему это сделать. Если не комфортно — окно можно не разворачивать и резиновый сайт опять будет ровно той ширины, которую хочет пользователь.
Все остальные варианты — фикс, фикс с полями, ограниченная резина, ограниченная резина с полями — будут навязывать пользователю, что ему делать.
Если же у вас супер-пупер дизайн, делайте — вариант для печати, на котором будет только контент.
И владельцы КПК тоже спасибо скажут.
давайте уже пользователь сам решит, как ему удобнее.
Если пользователю комфортно читать на широкоэкранной 24дюймовке в развернутом окне — резиновый сайт позоляет ему это сделать. Если не комфортно — окно можно не разворачивать и резиновый сайт опять будет ровно той ширины, которую хочет пользователь.
Все остальные варианты — фикс, фикс с полями, ограниченная резина, ограниченная резина с полями — будут навязывать пользователю, что ему делать.
Если же у вас супер-пупер дизайн, делайте — вариант для печати, на котором будет только контент.
И владельцы КПК тоже спасибо скажут.
А что делать, если у пользователя рябит в глазах от располшегося контента, но он не хочет сжимать экран своего 24" мониторчика? Может быть тогда уж кнопку делать на сайте с различными типами рестки, пусть каждый под себя подберет, как ему удобно. Вообще, хороший вариант, зачем же дизайнерам напрягаться в поисках лучшего решения, когда можно слить на пользователя все сразу!
Растянув наш сайт в 1,6 раза по горизонтали, мы хоть как то приблизим формат сайта к хорошо воспринимаемому всеми формату листа А4.
Разрешение увеличивается пропоционально и ни к какому иному формату приближаться не будет, тк соотношение сторон сохраняется:
640÷480 = 800÷600 = 1024÷768 = 1,(3)
Крылья, ноги… главное — во… ХВОСТ!
Резиновый, статичный. главное — информация. Даже если черный по черному текст — выделю и буду читать, если необходимо. Или в блокнот скопирую)
Резиновый, статичный. главное — информация. Даже если черный по черному текст — выделю и буду читать, если необходимо. Или в блокнот скопирую)
Для прикидки ужимаемости дизайна можно пользоваться оперовской кнопкой Fit to width (ужать по ширине).
Меня, как пользователя, иногда раздражает необоснованное нижнее ограничение по ширине в угоду дизайну.
Меня, как пользователя, иногда раздражает необоснованное нижнее ограничение по ширине в угоду дизайну.
Мда =) Резина/не резина.
Во-первых, есть отраслевые стандарты. Они были выработаны далеко не тупыми товарищами и учитывали эргономические показатели для чтения. Например, Ширина полосы набора по ОСТ 29.124-94
И пример из жизни: обратите внимание на поведение страницы с результатами поиска в Гугле. У неё вполне явное ограничение по максимальной ширине. А товарищи из Гугл крайне трепетно относятся к своему основному источнику доходов. И юзабилити исследования в этом направлении проводят постоянно.
p.s. У Яндекса, кстати, все не так. И мне очень интересно почему, ибо я больше склонен к варианту Гугла: субъективно легче сканирование взглядом.
Во-первых, есть отраслевые стандарты. Они были выработаны далеко не тупыми товарищами и учитывали эргономические показатели для чтения. Например, Ширина полосы набора по ОСТ 29.124-94
И пример из жизни: обратите внимание на поведение страницы с результатами поиска в Гугле. У неё вполне явное ограничение по максимальной ширине. А товарищи из Гугл крайне трепетно относятся к своему основному источнику доходов. И юзабилити исследования в этом направлении проводят постоянно.
p.s. У Яндекса, кстати, все не так. И мне очень интересно почему, ибо я больше склонен к варианту Гугла: субъективно легче сканирование взглядом.
Западный мир не любит резину. Гугл хороший пример. Резина есть, но она не совсем резина…
Есть и обратные примеры. Gmail, например. Предполагаю, что а) нет такого идейного вдохновителя как Лебедев, б) умеют считать деньги и не страдают перфекционизмом.
Еще, они очень ценят работу дизайнеров, которые очень ценят традиции и опыт накопленный за сотни лет. Всетаки, нужно признать — последние годы в России дизайн как бы «родился» с нуля. А технологии многих заставили закрыть глаза на культурный багаж (а у кого то просто не было возможности или желания чтобы его изучить)
P.S. Искренне люблю Gmail и docs.google за функционал. Но интерфейсы…
P.S. Искренне люблю Gmail и docs.google за функционал. Но интерфейсы…
столько текста…
на мой взгляд, суть отношения к фиксированной и «резиновой» верстке укладывается всего в два предложения:
Да, дизайн может быть «резиновым», однако с обязательным ограничением по максимальной ширине таким образом, чтобы длинна текстовой строки контентной части не превышала 80 знаков).
Сайты, подразумевающие чтение больших материалов (более 3000 знаков в одном контентном сегменте) лучше делать фиксированными по ширине.
на мой взгляд, суть отношения к фиксированной и «резиновой» верстке укладывается всего в два предложения:
Да, дизайн может быть «резиновым», однако с обязательным ограничением по максимальной ширине таким образом, чтобы длинна текстовой строки контентной части не превышала 80 знаков).
Сайты, подразумевающие чтение больших материалов (более 3000 знаков в одном контентном сегменте) лучше делать фиксированными по ширине.
Такие вещи как чрезмерно большая ширина строки или плотность информации не зависят напрямую от того, фиксированный дизайн или резиновый. Вопрос исключительно в прямоте рук дизайнера и верстальщика. Тут почти нет концептуальных проблем, больше практических.
Нужно понимать, что резиновая верстка — это всегда более трудоемкий процесс. Если нет объективных задач, для которых действительно требуется резиновое решение, то и не нужно усложнять процесс разработки и поддержки. Сайт шириной в 960 пикселей очень часто выглядит на больших экранах гораздо лучше, чем плотная резина.
Автор правильно пишет про «расстояние между различными элементами сайта». Если называть вещи своими именами, то резиновая верстка идет несколько вразрез с традиционной работой с сеткой, подразумевающей четкую систему горизонтальных и вертикальных пропорций. Именно поэтому у хороших западных дизайнеров, как правило имеющих релевантное образование, резиновых сайтов почти не встречается.
В нашей стране несомненно наблюдается большой интерес к резиновой верстке, корни которого уходят видимо к Лебедеву. Насколько я понимаю, в Студии хорошо контролируется процесс разработки, и их сайты от резины скорее выигрывают. Если им удается это продавать — замечательно, но нужно понимать, что резина увеличивает стоимость их проектов.
В большинстве же случаев у нас, в отличие от запада, дизайнер и верстальщик — это две разные профессии. А еще сроки поджимают и бюджет жмет. Вот и получается, что верстальщик делает резину так, как умеет, вооружившись парой мактов и комментами от дизайнера. Ну и результаты соответствующие. А по уму-то, резиной должен заниматься сам дизайнер своими руками копаясь в CSS'е, причем долго, вдумчиво и постоянно экспериментируя.
Так что я считаю, что делать резину можно, если есть:
— необходимость
— деньги
— время
— руки
В противном случае лучше делать сайт фиксированным и все от этого только выиграют.
Нужно понимать, что резиновая верстка — это всегда более трудоемкий процесс. Если нет объективных задач, для которых действительно требуется резиновое решение, то и не нужно усложнять процесс разработки и поддержки. Сайт шириной в 960 пикселей очень часто выглядит на больших экранах гораздо лучше, чем плотная резина.
Автор правильно пишет про «расстояние между различными элементами сайта». Если называть вещи своими именами, то резиновая верстка идет несколько вразрез с традиционной работой с сеткой, подразумевающей четкую систему горизонтальных и вертикальных пропорций. Именно поэтому у хороших западных дизайнеров, как правило имеющих релевантное образование, резиновых сайтов почти не встречается.
В нашей стране несомненно наблюдается большой интерес к резиновой верстке, корни которого уходят видимо к Лебедеву. Насколько я понимаю, в Студии хорошо контролируется процесс разработки, и их сайты от резины скорее выигрывают. Если им удается это продавать — замечательно, но нужно понимать, что резина увеличивает стоимость их проектов.
В большинстве же случаев у нас, в отличие от запада, дизайнер и верстальщик — это две разные профессии. А еще сроки поджимают и бюджет жмет. Вот и получается, что верстальщик делает резину так, как умеет, вооружившись парой мактов и комментами от дизайнера. Ну и результаты соответствующие. А по уму-то, резиной должен заниматься сам дизайнер своими руками копаясь в CSS'е, причем долго, вдумчиво и постоянно экспериментируя.
Так что я считаю, что делать резину можно, если есть:
— необходимость
— деньги
— время
— руки
В противном случае лучше делать сайт фиксированным и все от этого только выиграют.
— Всегда ли нужна «резиновая» верстка?
Не всегда.
Могу сказать о статистике. Всего сверстанных макетов было около 150. Резиновая верстка примерно 70%, фиксированная 30%.
Не всегда.
Могу сказать о статистике. Всего сверстанных макетов было около 150. Резиновая верстка примерно 70%, фиксированная 30%.
Но все чаще и чаще резиновая верстка делается не на всю ширину экрана.
Потому что, например, при разрешение в 2000px, многие дизайны будут плохо давать воспринимать информацию.
Поэтому ставится ограничитель, до какой максимальной ширины растягивать сайт.
В моей практике этот ограничитель чаще всего — 1280px
Потому что, например, при разрешение в 2000px, многие дизайны будут плохо давать воспринимать информацию.
Поэтому ставится ограничитель, до какой максимальной ширины растягивать сайт.
В моей практике этот ограничитель чаще всего — 1280px
Что бы лучше воспринималась картинка. Остается сделать, что бы лучше воспринималась информация.
Пример, сайт в 1000px фиксированный по центру.
На разрешение 1600, будет полно свободного места по бокам.
Сделав резину, то куда более приятна картинка в броузере.
Пример, сайт в 1000px фиксированный по центру.
На разрешение 1600, будет полно свободного места по бокам.
Сделав резину, то куда более приятна картинка в броузере.
Графика не поможет. Сайты приводить не стоит, все мы итак видели целую дюжину разных сайтов фикс дизайна с графикой по бокам, появляющейся все отчетливее при больших разрешениях экрана.
Я За резиновые макеты.
Я За резиновые макеты.
www.nbc.com/ пример, очень хороший.
Всегда ли нужна всегда «резиновая» верстка? Конечно же, нет. Важно понимать, где это будет работать хорошо, а где это не к чему.
В мире есть много прекрасных решений реализованных различными способами.
В мире есть много прекрасных решений реализованных различными способами.
И куда же делась резиновая верстка хабра?
Жутко неудобно читать, особенно комментарии.
Жутко неудобно читать, особенно комментарии.
Видео, кстати, тоже масштабируют. Вконтакте, например. Довольно часто при выборе качества отображения ролика (240/360/480/720 пунктов), изменяется только ширина на указанное количество пискелей. У них там стоит iframe (ширина которого и выбирается) и в него грузится видео, растягиваемое по всей ширине. Выцепив любую ссылку из этого iframe'а и перейдя по ней, можно задать ролику любую ширину.
Очень интересовал вопрос про резиновость вёрстки, интересно было прочитать мнение опытного человека.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Всегда ли нужна «резиновая» верстка?