Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 109
Прокомментирую так.
У меня 22-дюймовый монитор и дома, и на работе. На таком мониторе просто неудобно разворачивать картинку на всю ширину — слишком далеко приходится таскать мышку. Как правило, работаешь с окном на 1/2-3/4 ширины, т.е. 900-1200 px, а сбоку (слева и справа) лежит какая-нибудь ещё информация — «навечно» уложенная туда справка, или аська, или перетащенное вправо меню «пуск».
Так что вот не заботит меня вёрстка, которая разъезжается на таком разрешении — я просто более оптимально использую ресурсы монитора.
У меня 22-дюймовый монитор и дома, и на работе. На таком мониторе просто неудобно разворачивать картинку на всю ширину — слишком далеко приходится таскать мышку. Как правило, работаешь с окном на 1/2-3/4 ширины, т.е. 900-1200 px, а сбоку (слева и справа) лежит какая-нибудь ещё информация — «навечно» уложенная туда справка, или аська, или перетащенное вправо меню «пуск».
Так что вот не заботит меня вёрстка, которая разъезжается на таком разрешении — я просто более оптимально использую ресурсы монитора.
Хороший подход. У меня на работе такая же ситуация. Я пользуюсь двумя мониторами. Соответственно максимум сайт открывается на 1280. Но это мы с вами такие, а существует еще огромное количество пользователей. А верстку мы делаем не только для себя, но и для пользователей.
Именно по этому, при работе с большим монитором трекбол существенно удобнее чем мышь :)
Я делаю точно так же даже со своим 1440х900. У меня окна располагаются по диагонали из нижнего левого к правому верхнему. У меня Мак, и поэтому при таком расположении у всех окон всегда видны кнопки закрытия окна. Слева сверху, в пустом углу находится аська и некоторое количество места для значков. Значки никогда не упорядочиваю, а кидаю кучками на одну тему. Окна которые не очень мне нужны передвигаю в низ экрана, чтобы было видно только верхнюю панель окна. Окно со скачиваемыми файлами из интернете в пустом месте справа внизу.
Если честно никогда об этом не задумывался, но оказывается у меня есть своя система расположения окон!
Если честно никогда об этом не задумывался, но оказывается у меня есть своя система расположения окон!
1440х900 — браузер у меня назвёрнут на 1024х900, потому как справа iChat, а под браузером другие окна. Поэтому люди, разворачивающие окна на 30" мониторах вызывают у меня удивление.
Вы такой не один.
в англоязычных статьях на тему возможной ширины макета мне не раз (и не два и не 10) встречалось упоминание того, что пользователи с разрешением более 1280* довольно редко разворачивают окно браузера на всю ширину экрана — или видимы одновременно другие окна, или боковые служебные панели (типа закладок). (если не изменяет память, у Нильсена — точно встречал)
признаться, сам так делаю.
лично для себя давно решил, что оптимальным является резиновый макет с указанием минимальной и максимальной ширины. увы, не во всех проектах удается реализовать такой вариант, иногда проще и быстрее сделать фикс (основное спасибо — великому говнобраузеру всех времен и народов).
таким образом, при разработке сайтов на данный момент использую:
1. «резиновый» вариант с макс. шириной 1200 пикс (указываю в em, перерассчитывая от базового размера шрифта) и минимальной — 750-950 пикс (зависит от содержимого сайта (его типа, проще говоря)
2. фиксированный вариант — около 950 по ширине, так же, в em-ах.
кончено же, для обоих вариантов проверяю как выглядит на 800*, ибо нетбуки, все такое… :)
собственно, на мой взгляд, это все, что можно сказать о ширине макетов в общем случае. (впрочем, рад буду дискуссии.)
предложение автора делать макеты для разных разрешений считаю неприемлемыми (все в том же общем случае), ибо при прочих равных имеет большие трудо-временные затраты и технические трудности. а вот менять размер шрифта — это хорошо, только тогда все ширины блоков, не содержащих картинки нужно указывать в em — этаких «размеро-шрифто-зависимых» единицах :).
в англоязычных статьях на тему возможной ширины макета мне не раз (и не два и не 10) встречалось упоминание того, что пользователи с разрешением более 1280* довольно редко разворачивают окно браузера на всю ширину экрана — или видимы одновременно другие окна, или боковые служебные панели (типа закладок). (если не изменяет память, у Нильсена — точно встречал)
признаться, сам так делаю.
лично для себя давно решил, что оптимальным является резиновый макет с указанием минимальной и максимальной ширины. увы, не во всех проектах удается реализовать такой вариант, иногда проще и быстрее сделать фикс (основное спасибо — великому говнобраузеру всех времен и народов).
таким образом, при разработке сайтов на данный момент использую:
1. «резиновый» вариант с макс. шириной 1200 пикс (указываю в em, перерассчитывая от базового размера шрифта) и минимальной — 750-950 пикс (зависит от содержимого сайта (его типа, проще говоря)
2. фиксированный вариант — около 950 по ширине, так же, в em-ах.
кончено же, для обоих вариантов проверяю как выглядит на 800*, ибо нетбуки, все такое… :)
собственно, на мой взгляд, это все, что можно сказать о ширине макетов в общем случае. (впрочем, рад буду дискуссии.)
предложение автора делать макеты для разных разрешений считаю неприемлемыми (все в том же общем случае), ибо при прочих равных имеет большие трудо-временные затраты и технические трудности. а вот менять размер шрифта — это хорошо, только тогда все ширины блоков, не содержащих картинки нужно указывать в em — этаких «размеро-шрифто-зависимых» единицах :).
Совершенно верно замечено. Пользователи с большими диагоналями и форматом 16:10 довольно часто открывают много окон и иногда браузер может быть «узким», и у того же пользователя может стать «широким». Поэтому и должны быть сайты «резиновыми». Это обычное уважение к пользователю — фактически юзабилити
Лично я смотрю сайты как на 22", на EeePC900 с его 1024 так и через миниоперу на расширени 320точек. Так вот к чему я. Меня бесят слудующие аспекты которые верстальщики додумывают за меня: бесит когда на 22" увеличивают шрифт, когда привычный интерфейс на 1280 переделывается (это к горизонтальному\вертикальному меню), когда к-то за меня решает что через миниоперу я должен смотреть все в одну колонку и без графики.
А с чем связано это раздражение. Только с тем, что разработчик сайта решил для какой платформы, как будет видоизменяться сайта или с тем, что эти изменения вредят комфорту пользования сайтом?
Это связано за частую с тем что разработчик думает что он умнее пользователя и сам решает как ему надо смотреть этот сайт. Присоединяясь merlin_rterm опять же, если мне нужно смотреть суженый сайт я посмотрю его на 2/3 окна браузера, если мне нужнен мобильный вид, то я нажму на кнопку «мобильный вид», а не когда приходится наоборот возвращаться сайт из задуманых разработчиков «удобств» в первоночальный.
В 90% случаев разработчик действительно умнее пользователя. При разработке абсолютного большинства интерфейсов (и дизайна сайтов в том числе) надо изначально исходить из того, что пользователь глуп и ленив.
Если же вы умнее разработчика, и вас бесит, что вас относят к группе глупых юзеров — придумывайте как обойти ухищрения разработчика, излишне упрощающие интерфейс (дизайн, функционал) или делайте собственный продукт.
Если же вы умнее разработчика, и вас бесит, что вас относят к группе глупых юзеров — придумывайте как обойти ухищрения разработчика, излишне упрощающие интерфейс (дизайн, функционал) или делайте собственный продукт.
Работаю за 20" маком, при этом практически никогда не разворачиваю браузер на всю ширину экрана т.к. во-первых как вы уже сказали большинство сайтов ориентируются на ширину 1024 и 1280, а во-вторых справа ещё остаётся место для виджетов, скайпа, блокнота и прочих радостей жизни.
И вообще, резиновый дизайн нужен только в том случае, когда сайт должен произвести впечатление на каждого пользователя. Вот к примеру Яндексу резина при ширине 1680 ни к чему: читабельность уменьшается, а толку от этого никакого, так что здесь уместны лимиты.
Что касается трёх макетов — идея неплохая, но что если я захочу поменять размер экрана? Не отслеживать же javascript'ом размер окна браузера и перегружать страничку с новыми темплейтами! :)
И вообще, резиновый дизайн нужен только в том случае, когда сайт должен произвести впечатление на каждого пользователя. Вот к примеру Яндексу резина при ширине 1680 ни к чему: читабельность уменьшается, а толку от этого никакого, так что здесь уместны лимиты.
Что касается трёх макетов — идея неплохая, но что если я захочу поменять размер экрана? Не отслеживать же javascript'ом размер окна браузера и перегружать страничку с новыми темплейтами! :)
а почему бы и нет?)
Технически вполне можно реализовать.
В свое время наткнулся на статью про адаптивную разметку, тогда меня очень впечатлило: sovaworks.blogspot.com/2008/01/blog-post_24.html
Примеры из статьи:
designformasters.info/stuff/adaptive-layout/transition_layout_news.html
designformasters.info/stuff/adaptive-layout/transition_layout_tab.html
Примеры из статьи:
designformasters.info/stuff/adaptive-layout/transition_layout_news.html
designformasters.info/stuff/adaptive-layout/transition_layout_tab.html
тут недавно была тема «Электронные сигареты».
Вот и подумал, что эта темя про «Электронные презервативы»
Вот и подумал, что эта темя про «Электронные презервативы»
А забываем про распространение EeePC и других девайсов с 800х480? Или можем их проигнорировать? :)
Кстати надо посмотреть статистику, ибо если асус распространил таки более 2 млн. девайсов, как они заявили, учитывая что это нетбуки, то на результатах статистики должно отобразиться плотно :)
Кстати надо посмотреть статистику, ибо если асус распространил таки более 2 млн. девайсов, как они заявили, учитывая что это нетбуки, то на результатах статистики должно отобразиться плотно :)
Автору спасибо, очень хороший, скомпилировавший много информации пост, побольше бы такого на хабре! По поводу, создания под каждое разрешение своего макета — это увеличение затрат и количества работы для дизайнера и верстальщика, я нахожу в этом смысл, только, если заказчик за это платит.
P.S. Ну зачем вы скрина с пиццей у меня потекли слюнки=) Посмотрел ваше портфолио — понравилось! С меня + =)
P.S. Ну зачем вы скрина с пиццей у меня потекли слюнки=) Посмотрел ваше портфолио — понравилось! С меня + =)
Моё мнение таково: сайт должен состоять из разных элементов (как «резиновых», так и с фиксированной шириной). Скажем, можно изменить размеры меню, в то время, как основные формы или даже блоки с основным контентом остаются без изменений. А кое-где указывать минимальную/максимальную ширину.
Звучит это, может быть, не очень… Но посмотрите на тот же Яндекс.
Звучит это, может быть, не очень… Но посмотрите на тот же Яндекс.
На фрилансе эта серая полоска-меню при 1024 и т.п. выглядит незначащим элементом интерфейса. Ну не привлекает она глаз совсем. А при увеличении разрешения она получается еще заметнее чем логотип.
Мне кажется, что это не очень верный подход.
Мне кажется, что это не очень верный подход.
По-моему мониторы высокого разрешения предназначаются, в основном, для работы с несколькими окнами одновременно и я не очень понимаю, зачем верстать еще и для 1680.
Кстати, я на своем 19" мониторе в браузере всегда оставляю открытой панель с закладками/историей/etc, сужая область просмотра — мне так привычнее и, как мне кажется, удобнее.
Кстати, я на своем 19" мониторе в браузере всегда оставляю открытой панель с закладками/историей/etc, сужая область просмотра — мне так привычнее и, как мне кажется, удобнее.
Речь о том, что максимально хороший вариант растягивать до 1200 максимум а дальше пускать неотвлекающую графику
Для разрешений от 1024 до 1280 можно применять один и тот же макет.
Верстка под мобильные устройста с маленькими разрешениями нужна отдельная, контролировать ширину экрана вполне можно яваскриптом. Последнее время есть тенденция верстать отдельно под айфон, иногда это оправданно.
Верстка под большие разрешения у нас заключается в центровке макета шириной 1440 пикселей. Такой подход позволяет минимизировать затраты и оставить довольными большинство пользователей.
Верстка под мобильные устройста с маленькими разрешениями нужна отдельная, контролировать ширину экрана вполне можно яваскриптом. Последнее время есть тенденция верстать отдельно под айфон, иногда это оправданно.
Верстка под большие разрешения у нас заключается в центровке макета шириной 1440 пикселей. Такой подход позволяет минимизировать затраты и оставить довольными большинство пользователей.
у меня получилось нечто среднее между первым и вторым пунктами — www.log.by
причём к этому я пришёл только через три года работы и 5 различных макетов, была и резина и 1000px
однако хочется добавить что решающим будет всё-таки количество информации на странице. кому-то и 1280 пикселов ширины будет много — в таком случае обычно все заголовки пишут x-large :)
на wide-мониторых, которыми я обеспечен чуть менее чум полностью, броузер всегда раскрываю на 70-80% ширины экрана — справа висит qip или skype, как у killerdesign
причём к этому я пришёл только через три года работы и 5 различных макетов, была и резина и 1000px
однако хочется добавить что решающим будет всё-таки количество информации на странице. кому-то и 1280 пикселов ширины будет много — в таком случае обычно все заголовки пишут x-large :)
на wide-мониторых, которыми я обеспечен чуть менее чум полностью, броузер всегда раскрываю на 70-80% ширины экрана — справа висит qip или skype, как у killerdesign
тут, по моему, дело не в ширине монитора а в отношении к людям. я, например, предпочитаю никому не создавать неудобств типа горизонтального скролла и по старой привычке делаю на всех своих сайтах информационную часть с фиксированной шириной в 800 точек.
Первый вариант, с постоянной фиксацией сайта под определённую ширину хорош, для узких макетов, которые слабо насыщены информацией, если их растягивать на весь экран, то пользователь просто не сможет сфокусироваться на всем сайте сразу.
apple.com
apple.com
Хорошее начинание с наглядных примеров, но второй — одновременно и показатель того, какой фон не надо делать. Фоновая картинка тяжёлая (327 КБ), с неиспользуемой серединой, и недорисована, будто на скорую руку.
Кстати, при ограниченной ширине полоска (с фоном или просто цветом) на всю ширину редко смотрится красивой. Надо делать чтобы сайт растягивался, но не разъезжался.
Кстати, при ограниченной ширине полоска (с фоном или просто цветом) на всю ширину редко смотрится красивой. Надо делать чтобы сайт растягивался, но не разъезжался.
Никто не заметил в win7, в kde4 — много усилий делается сейчас как раз на то, чтобы не открывать окна во весь экран (а при сей попытке — растяягивать на половину).
Да и много кто уже вверху сказал — на больших мониках люди, которые понимают что такое большой моник — не растягивают почти ни одно окно, акромя видео, на весь экран.
Да и много кто уже вверху сказал — на больших мониках люди, которые понимают что такое большой моник — не растягивают почти ни одно окно, акромя видео, на весь экран.
плохо. нельзя к пикселям привязываться.
конечно, если важнейшее на ресурсе — графика, понять можно. и только.
конечно, если важнейшее на ресурсе — графика, понять можно. и только.
у меня 24'' экран и я всегда распахиваю окно на полный экран, привычка
и рабочий стол не утомляет зрение
и рабочий стол не утомляет зрение
Вот когда-то давно было про полу-резиновую верстку.
habrahabr.ru/blogs/webdev/19328/
А по поводу разных версия для разных расширений — можете глянуть на google image search. Если откроете его с отключенным яваскриптом, то увидите слегка непривычную картину — пять рядов картинок по 4 штуки, оформленные в таблицу. А вот если включите яваскрипт, то гугл динамически подстроит количество картинок в ряду к вашему текущему разрешению, даже если вы будете таскать край окна мышкой.
Отличное решение, которое, я думаю, легко можно приспособить и для своих проектов.
habrahabr.ru/blogs/webdev/19328/
А по поводу разных версия для разных расширений — можете глянуть на google image search. Если откроете его с отключенным яваскриптом, то увидите слегка непривычную картину — пять рядов картинок по 4 штуки, оформленные в таблицу. А вот если включите яваскрипт, то гугл динамически подстроит количество картинок в ряду к вашему текущему разрешению, даже если вы будете таскать край окна мышкой.
Отличное решение, которое, я думаю, легко можно приспособить и для своих проектов.
По теме — в большинстве случаев страница, тянущаяся более 1280 по ширине не имеет смысла, так как информационного наполнения попросту недостаточно, чтобы заполнить такое пространство, а обычный текст (статьи например) — на большой ширине колонки просто неудобно читать. Резина резиной, но меру надо знать. Так что max-width — наше всё.
Рисовать три дизайна — очень накладно, имхо, дизайнер должен рисовать один вариант + указывать, что где тянется (если тянется) + минимальный и максимальный рамеры. Этого достаточно
P.S. Кто-то очень добрый пришел и проставил всем каментам в этой теме по минусу. И чем интересно, не угодила? Пришлось восстановить статус-кво :)
Рисовать три дизайна — очень накладно, имхо, дизайнер должен рисовать один вариант + указывать, что где тянется (если тянется) + минимальный и максимальный рамеры. Этого достаточно
P.S. Кто-то очень добрый пришел и проставил всем каментам в этой теме по минусу. И чем интересно, не угодила? Пришлось восстановить статус-кво :)
Я лично предпочитаю делать тянущуюся сетку, а для элементов, которые при большой длине будут выглядеть некрасиво (те же текстовые блоки, например) ограничивать максимальную ширину.
Последний вариант, должен стать самым распространёнными.
такая второстепенная графика иногда сильно отвлекает.
А идея с добавлением контента при расширении окна вам как?
Интересное замечание — iPhone рендерит «резиновые» страницы как если бы они были в ширину 980px, и затем уже пропорционально уменьшает, чтобы страница поместилась в экранчик девайса.
Это означает, что инженеры в Apple решили, что 980px — это средняя ширина сайта на сегодняшний день.
Я и сам стараюсь минимальную ширину разрабатываемых страниц держать примерно в этом пределе, чтобы влезало в разрешение 1024 (минут бордюры/скроллбары/пр).
Это означает, что инженеры в Apple решили, что 980px — это средняя ширина сайта на сегодняшний день.
Я и сам стараюсь минимальную ширину разрабатываемых страниц держать примерно в этом пределе, чтобы влезало в разрешение 1024 (минут бордюры/скроллбары/пр).
Уже года полтора пользуюсь ноутбуком с расширением 1920x1200, недавно взял 24" монитор с тем же разрешением, так как это просто… удобно… =) По наблюдениям — лучше всего смотрятся сайты с большими шрифтами (возможно, масштабируемыми при необходимости) в содержательной части.
Вроде бы уже мониторы 2560 пикселов в ширину показывают, интересно, чем можно набить сайт для такого монстра?))
Вроде бы уже мониторы 2560 пикселов в ширину показывают, интересно, чем можно набить сайт для такого монстра?))
Мне нравится как drive.ru поступили с «резиной»: если окно браузера растягивать на большом мониторе от нормального до полного, то видно как, с помощью JS, справа добавляются новые блоки анонсов. Их может быть 4 (1024 px) 6 (1280 px) или 8 (1600 px)
удачно подметили
Да, сайт офигенный. Там-то действительно много нюансов. Можно ведь и поля справа и слева тянуть так же, как и основные колонки, или одни колонки фиксированые, другие растягивающиеся в зависимости от содержания в них.
видно как, с помощью JS, справа добавляются новые блоки анонсов
Действительно клёво. Кстати, работает и с отключенным JS. Что еще на порядок круче :)
Спасибо за статью, как раз вчера столкнулся с проблемой «больших разрешений».
Имеется сайт, отлично выглядящий на 1024х768, но вчера поглядев, что с ним становится на 22дюймах — просто ужаснулся.
Вывод для себя сделал такой: растягивать в зависимости от разрешения ничего не буду(куча дополнительных проблем, и, как мне показалось, не всем понравится, комментирии в данной ветке подтверждают это предположение), буду использовать фиксированную ширину ~900-1000pх и сделаю шрифты слегка больше и чётче(поменьше светлых и серых цветов).
Имеется сайт, отлично выглядящий на 1024х768, но вчера поглядев, что с ним становится на 22дюймах — просто ужаснулся.
Вывод для себя сделал такой: растягивать в зависимости от разрешения ничего не буду(куча дополнительных проблем, и, как мне показалось, не всем понравится, комментирии в данной ветке подтверждают это предположение), буду использовать фиксированную ширину ~900-1000pх и сделаю шрифты слегка больше и чётче(поменьше светлых и серых цветов).
Я вообще не понимаю этого тотального сдвига на резиновости. Почему каждый сайт должен быть резиновым? Потому что Лебедев так говорит? В результате-то, как справедливо замечено, сделать резину от 800 до 1600 просто невозможно, фактически уже надо делать разные макеты. Поэтому все делают для галочки ту самую «резину в пределах 200 пикселей» и гордятся, что мол у меня резиновая вёрстка! А на самом деле резина с такими пределами вообще ничего не даёт, разумнее уж тогда сделать макет фиксированной ширины.
Вот такие сайты должны быть резиновыми и занимать всю полезную площадь окна браузера, я не спорю. Но если на сайте в основном текст, да ещё и в несколько колонок, то растягивание его на всю ширину большого монитора просто взорвёт мозг чрезмерным количеством буковок. Для информационных сайтов имхо гораздо лучше фиксировать ширину и оставлять поля, пустые или с «второстепенной графикой».
Вот такие сайты должны быть резиновыми и занимать всю полезную площадь окна браузера, я не спорю. Но если на сайте в основном текст, да ещё и в несколько колонок, то растягивание его на всю ширину большого монитора просто взорвёт мозг чрезмерным количеством буковок. Для информационных сайтов имхо гораздо лучше фиксировать ширину и оставлять поля, пустые или с «второстепенной графикой».
Ни в коем случае не ограничивать максимальную ширину. Если пользователь считает нужным смотреть сайт именно при 1680 пикселей в ширину, то пусть смотрит. Считаю, что один из критериев профессионализма дизайнера как раз умение делать удобные резиновые дизайны.
P.S. Идеально было бы вообше не привязываться к пикселям.
P.S. Идеально было бы вообше не привязываться к пикселям.
Вопрос №1
Так ли всегда нужна резиновость? Нужно ли выкладывать на страницу все скопом, чтобы потом придумывать как бы это все уместилось (вот тут вспоминаем про «бич» всех дизайнеров и причина плохого сна всех заказчиков — «пустые места»).
Вопроc №2
Почему подавляющее большинство «забугорных» западных сайтов нерезиновая или их резиновость выражена в растягивании фона (за редкими исключениями чисто функциональных страниц). Или их богатая культура и опыт дизайна и веб дизайна безнадежно отстал от разработок знаменитой российской студии?
Так ли всегда нужна резиновость? Нужно ли выкладывать на страницу все скопом, чтобы потом придумывать как бы это все уместилось (вот тут вспоминаем про «бич» всех дизайнеров и причина плохого сна всех заказчиков — «пустые места»).
Вопроc №2
Почему подавляющее большинство «забугорных» западных сайтов нерезиновая или их резиновость выражена в растягивании фона (за редкими исключениями чисто функциональных страниц). Или их богатая культура и опыт дизайна и веб дизайна безнадежно отстал от разработок знаменитой российской студии?
#1 — Всегда надо «резиновость» 90% (10% — на всякий случай ;) (напомню: сайт — это в первую очередь «передача информации». А она должна быть преподнесена явно и в понятной форме. И не надо отвлекать от неё «не понятными» элементами. имхо все гениальное просто)
#2 — По оценкам самих же западных специалистов, 90% сайтов сделаны не профессионально и ужасно. (самоделкиных очень много там, все думают что, если они могут елозить мышкой — то они уже дизайнеры :)
#2 — По оценкам самих же западных специалистов, 90% сайтов сделаны не профессионально и ужасно. (самоделкиных очень много там, все думают что, если они могут елозить мышкой — то они уже дизайнеры :)
Давайте не сравнивать х с пальцем.
Сами знаете кто говорит и я с ним согласен полностью: полиграфия — это полиграфия. WEB — это WEB.
Экран монитора — это не книга. Не верите ;)?
Сами знаете кто говорит и я с ним согласен полностью: полиграфия — это полиграфия. WEB — это WEB.
Экран монитора — это не книга. Не верите ;)?
Вот тут вы зря. Вы обращали внимание на то, что в газетах информация подается колонками? А знаете почему? Просто человеческому глазу тяжео бежать по длиииииинной строчке текста. По сути, ширина листа А4 является пределом восприятия. Не верите? Возьмите какой-нибудь занудный для себя текст и а) прочтите его растянув на весь экран, б) сделайте тоже самое, но «запихнув» в формат А4. Для проверки дайте другу. То что это WEB не меняет законов восприятия информации.
Тексты на всю страницу (а еще и синем на темно-голубом фоне) возникли благодаря неграмотности создателей, а не из-за «законов» WEB.
Тексты на всю страницу (а еще и синем на темно-голубом фоне) возникли благодаря неграмотности создателей, а не из-за «законов» WEB.
Можно сделать вариант с увеличением шрифтовой группы, или ограничить ширину «главной» колонки, или…
Знаете я не хочу переубеждать, я написал 90% сайтов должны быть резиновыми.
Ну в крайнем случае иметь вместе min. width и max. width
Вариантов резиновости очень много, просто никто не хочет этим заморачиваться, так как при этом надо думать чуть больше )
Все таки не надо сравнивать полиграфию и web.
Поверьте в полиграфии у меня очень большой опыт, поэтому и не сравниваю ;)
Знаете я не хочу переубеждать, я написал 90% сайтов должны быть резиновыми.
Ну в крайнем случае иметь вместе min. width и max. width
Вариантов резиновости очень много, просто никто не хочет этим заморачиваться, так как при этом надо думать чуть больше )
Все таки не надо сравнивать полиграфию и web.
Поверьте в полиграфии у меня очень большой опыт, поэтому и не сравниваю ;)
www.msnbc.msn.com — отличная подача информации. Великолепно выделено главное и второстепенное без лишних картинок.
www.adobe.com — ну, у этих специалисты повыше уровнем чем в некоторых конторах.
store.apple.com — всем пасть ниц!
ru.youtube.com — …
Что общего в этих ссылках?
1. Я их нашел наобум за 1 минуту
2. В них нет резиновости.
3. Они как по одному лекалу в отношении ширины.
4. Ими очень «неудобно» пользоваться (боже, оторвите руки этим недоучкам)
5. Все они ни в какое сравнение не идут с великим творением www.artlebedev.ru/
www.adobe.com — ну, у этих специалисты повыше уровнем чем в некоторых конторах.
store.apple.com — всем пасть ниц!
ru.youtube.com — …
Что общего в этих ссылках?
1. Я их нашел наобум за 1 минуту
2. В них нет резиновости.
3. Они как по одному лекалу в отношении ширины.
4. Ими очень «неудобно» пользоваться (боже, оторвите руки этим недоучкам)
5. Все они ни в какое сравнение не идут с великим творением www.artlebedev.ru/
Википедия не самый хороший пример, даже, я бы сказал, отвратительный. Если тебе на понимание что твориться на странице нужно 10 секунд… это плохая страница. Туда же могу приплюсовать gmail почту. Оба ресурса великолепны по функционалу… но первый месяц, на полном серьезе ищешь кнопку «отправить письмо», а на вики без опыта не сразу втыкаешь что происходит вообще.
Яндекс спасает то, что в его «рабочем сотоянии», на странице один главный блок — список результатов. Кстати, на фоне обсуждения иностранных сайтов, он не котируется :)
Хабрахабр правильно сбалансирован по нагруженности страниц, хотя, длинный текст на широких мониторах читать тяжеловато.
Яндекс спасает то, что в его «рабочем сотоянии», на странице один главный блок — список результатов. Кстати, на фоне обсуждения иностранных сайтов, он не котируется :)
Хабрахабр правильно сбалансирован по нагруженности страниц, хотя, длинный текст на широких мониторах читать тяжеловато.
«Не согласен. см»…? не совсем понял что цитируется. Опять же, напомню про психологическое ограничение ширины максимально читаемого отекста примерно в ширину формата А4 (это не я придумал) Но повторюсь, хабр это скорее хороший пример реализации резины.
Вики… я могу вам рассказывать про те же законы восприятия, про «правила хорошего тона» в веб дизайне, опять же, если избегать правил, то про какие то советы в этой области… мог бы сказать, что 10 блочков равнозначного текста и 5 равнозначных же меню, опять же, весь текст пронизан с главной страницы гиперссылками различного формата… Все это не вносит понятности на сайте. Не верите? Почитайте уважаемого всеми Лебедева :)
Опять же, сравните с www.msnbc.msn.com/ Где больше на галвной странице действительно полезной информации (а не ссылок на какие то «статьи дня») и где ее проще найти.
Википедией я тоже начал пользоваться нормлаьно, хоть со скрипом, но захожу туда в крайнем случае, из-за неудобства.
Ну, мы вернулись к вопросу о баллансе. Хотя, мои примеры вполне доказывают, что даже сложные порталы могут быть удобными и без резиновости.
Задам вопрос снова: почему именно в России так популярны резиновые сайты, почему это считается панацеей, хотя весь мир спокойно обходиться минимумом из арсенала гутаперчивых верстальщиков?
Вики… я могу вам рассказывать про те же законы восприятия, про «правила хорошего тона» в веб дизайне, опять же, если избегать правил, то про какие то советы в этой области… мог бы сказать, что 10 блочков равнозначного текста и 5 равнозначных же меню, опять же, весь текст пронизан с главной страницы гиперссылками различного формата… Все это не вносит понятности на сайте. Не верите? Почитайте уважаемого всеми Лебедева :)
Опять же, сравните с www.msnbc.msn.com/ Где больше на галвной странице действительно полезной информации (а не ссылок на какие то «статьи дня») и где ее проще найти.
Википедией я тоже начал пользоваться нормлаьно, хоть со скрипом, но захожу туда в крайнем случае, из-за неудобства.
Ну, мы вернулись к вопросу о баллансе. Хотя, мои примеры вполне доказывают, что даже сложные порталы могут быть удобными и без резиновости.
Задам вопрос снова: почему именно в России так популярны резиновые сайты, почему это считается панацеей, хотя весь мир спокойно обходиться минимумом из арсенала гутаперчивых верстальщиков?
Ладно, про вики, о вкусах не спорят, но как дизайнер скажу — такое не будет номинироваться на награды по юзабилити и дизайну.
Насчет блоков, очень даже относиться — чем больше лишних ненужных пользователю блоков, тем хуже разобраться в огромной массе информации.
Если без чего-то можно сделать что-то хорошое, то это что-то совсем не обязательно ;)
Почему голословны? возьмите 10 крупных порталов России и по 5 порталов зарубежных из 3-4 крупных стран. Минимальное статистическое исследование будет у вас на руках :)
Насчет блоков, очень даже относиться — чем больше лишних ненужных пользователю блоков, тем хуже разобраться в огромной массе информации.
Если без чего-то можно сделать что-то хорошое, то это что-то совсем не обязательно ;)
Почему голословны? возьмите 10 крупных порталов России и по 5 порталов зарубежных из 3-4 крупных стран. Минимальное статистическое исследование будет у вас на руках :)
«Это эмоции.» из нас двоих я, как специалист в области, компитентнее в этом вопросе, так что оставим без обсуждения ;)
«как дизайнеру, проще рисовать макеты, не предусматривая «тянучесть» — тут ты не прав.
Как ни парадоксально, но мне проще как раз сделать „тянучий“ сайт. От меня потребуется лишь учесть в верстке несколько „резиновых“ блоков и промежутков. Это задача не сложная абсолютно. Куда сложнее всю структуру сайта скомпоновать так, что бы не было перебора с информацией и не требовалось ухищряться для размещения всего нужно го на странице. Всегда проще кинут ьвсе скопом и так чтобы оно потом „растекалось“ по странице. А вот нечто вроде сайта Эн Би СИ, вот это настоящая работа. Причем, не требующая дополнительных технических разработок.
То есть, ты доверяешь статистике, но напрочь отрицаешь простые личные наблюдения?
«как дизайнеру, проще рисовать макеты, не предусматривая «тянучесть» — тут ты не прав.
Как ни парадоксально, но мне проще как раз сделать „тянучий“ сайт. От меня потребуется лишь учесть в верстке несколько „резиновых“ блоков и промежутков. Это задача не сложная абсолютно. Куда сложнее всю структуру сайта скомпоновать так, что бы не было перебора с информацией и не требовалось ухищряться для размещения всего нужно го на странице. Всегда проще кинут ьвсе скопом и так чтобы оно потом „растекалось“ по странице. А вот нечто вроде сайта Эн Би СИ, вот это настоящая работа. Причем, не требующая дополнительных технических разработок.
То есть, ты доверяешь статистике, но напрочь отрицаешь простые личные наблюдения?
Истина ближе к резиновости ;)
Совершенно верно, ширину печатной строки надо ограничивать, но при резоновости не кто не запрещает делать например другие увеличенные блоки. Или увеличивать количество блоков и т.п.
Главное не лениться. Я понял одно — когда сайт не резиновый — или его «быстро» делали или делали «лентяи» :) (не надо принимать лично, можете принять к слову «быстро» :)
Совершенно верно, ширину печатной строки надо ограничивать, но при резоновости не кто не запрещает делать например другие увеличенные блоки. Или увеличивать количество блоков и т.п.
Главное не лениться. Я понял одно — когда сайт не резиновый — или его «быстро» делали или делали «лентяи» :) (не надо принимать лично, можете принять к слову «быстро» :)
Я не хочу кого либо переубедить, я хочу сказать что не резиновый сайт надо делать, когда другого выхода нет :)
Если в проекте можно сделать резиновость, то её надо делать.
Кстати имхо, youtube прекрасно бы смотрелся резиновым и был бы лучше. Просто его изначально делал человек, который решил его сделать таким. Google решила не вмешиваться, так как проект успешный и многие привыкли. Но. Покажите мне сайты googlе которые не резиновые ;)
Про msn.com говорить не надо, люди не соблюдают не одни стандарты. И в пример таких ставить не то что не корректно, но и не красиво.
Adobe- это ребята полиграфисты, они всегда имеют рамки ;) (кстати резиновым бы он был бы не порядок лучше)
Apple — это совсем другой дух ;)
Насчет Лебедева.
Свято верить одному человеку не надо, но когда он говорит правильные и обоснованные вещи, то к ним стоит прислушиваться. А Лебедев тоже извините мудак. Знаете почему? Так как «он» (его технологи) верстают сайты — это просто ужас с точки зрения не дизайна, а стандартов и технологий.
За «лучший валидатор — браузер» вообще по балде надо линейкой стучать. Смотрим новые его работы и дико смеёмся над «разлазившейся» версткой в новых проектах в разных браузерах. Если бы его пионеры верстали по стандартам — такого бы не было.
Да и вообще не боги горшки обжигают :)
Если в проекте можно сделать резиновость, то её надо делать.
Кстати имхо, youtube прекрасно бы смотрелся резиновым и был бы лучше. Просто его изначально делал человек, который решил его сделать таким. Google решила не вмешиваться, так как проект успешный и многие привыкли. Но. Покажите мне сайты googlе которые не резиновые ;)
Про msn.com говорить не надо, люди не соблюдают не одни стандарты. И в пример таких ставить не то что не корректно, но и не красиво.
Adobe- это ребята полиграфисты, они всегда имеют рамки ;) (кстати резиновым бы он был бы не порядок лучше)
Apple — это совсем другой дух ;)
Насчет Лебедева.
Свято верить одному человеку не надо, но когда он говорит правильные и обоснованные вещи, то к ним стоит прислушиваться. А Лебедев тоже извините мудак. Знаете почему? Так как «он» (его технологи) верстают сайты — это просто ужас с точки зрения не дизайна, а стандартов и технологий.
За «лучший валидатор — браузер» вообще по балде надо линейкой стучать. Смотрим новые его работы и дико смеёмся над «разлазившейся» версткой в новых проектах в разных браузерах. Если бы его пионеры верстали по стандартам — такого бы не было.
Да и вообще не боги горшки обжигают :)
Забыли упомянуть еще один вариант — продуманное выстраивание блоков. То есть при больших разрешениях некоторые блоки, выстроенные друг под другом, выстраиваются в ряд. Самый простой пример — гугл имаджес, не увеличивает расстояние между картинками, а увеличивает количество картинок в ряду.
Да и как уже заметили, в зависимости от разрешения, можно добавлять дополнительные блоки на страницу, которые будут и пользователю полезны, и владельцу.
В общем панацеи нет, надо просто включать мозги и находить компромисс.
Да и как уже заметили, в зависимости от разрешения, можно добавлять дополнительные блоки на страницу, которые будут и пользователю полезны, и владельцу.
В общем панацеи нет, надо просто включать мозги и находить компромисс.
У меня 24" с вытекающими 1920 на 1200. Я люблю разворачивать окошка браузера на все 100% (ну ненавижу я пестрящие окона браузера, аськи, скайпа, десктопа от гугл).
Хочу поблагодарить дизайнеров и верстальщиков хабра. После того как я купил большой монитор читать ваш сайт стало еще удобнее.
Не то что бы дизайн хабра меня особо поражает своей красотой. За то в аккуратности и удобстве он даст фору многим ресусам рунета как минимум.
То как растягивается сайт должны определять дизайнеры. И ориентироваться нужно именно на удобную подачу материала. Пользователь платит деньги за большой монитор рассчитывая на более удобную и продуктивную работу, так зачем вставлять ему палки в колеса? Сайт должен тянуться (в расчет не берутся визитки и промо странички, хотя, думаю хороший дизайнер может и тут что-нибудь придумать)!
А теперь впечатления:
yandex:
resize на 1024 и 1280. Все видно, но это же какая-то информационная каша! Дальнейшее растягивание делает сайт удобнее, информацию доступнее. (и это только главная, в выдаче при 1024 и 1280 я вижу 2-4 строки в зависимости от запроса, на родном разрешении экрана умещается до 10 позиций).
vkontakte:
На большом разрешении сайт смотрится смешно (сосулька на белом фоне).
Для того что бы посмотреть написал ли кто-нибудь что-то у меня на стене необходимо либо свернуть все вышестоящие панельки, либо скролить, скролить, скролить. Этому сайту точно бы не помешала резина. Очень неудобно читать обсуждения в группах или комментарии на стенах (у них как раз антихабровый пример). Да и небольшая разряженность в друзьях тоже не помешала бы (слишком пестрят аватарки).
Хочу поблагодарить дизайнеров и верстальщиков хабра. После того как я купил большой монитор читать ваш сайт стало еще удобнее.
Не то что бы дизайн хабра меня особо поражает своей красотой. За то в аккуратности и удобстве он даст фору многим ресусам рунета как минимум.
То как растягивается сайт должны определять дизайнеры. И ориентироваться нужно именно на удобную подачу материала. Пользователь платит деньги за большой монитор рассчитывая на более удобную и продуктивную работу, так зачем вставлять ему палки в колеса? Сайт должен тянуться (в расчет не берутся визитки и промо странички, хотя, думаю хороший дизайнер может и тут что-нибудь придумать)!
А теперь впечатления:
yandex:
resize на 1024 и 1280. Все видно, но это же какая-то информационная каша! Дальнейшее растягивание делает сайт удобнее, информацию доступнее. (и это только главная, в выдаче при 1024 и 1280 я вижу 2-4 строки в зависимости от запроса, на родном разрешении экрана умещается до 10 позиций).
vkontakte:
На большом разрешении сайт смотрится смешно (сосулька на белом фоне).
Для того что бы посмотреть написал ли кто-нибудь что-то у меня на стене необходимо либо свернуть все вышестоящие панельки, либо скролить, скролить, скролить. Этому сайту точно бы не помешала резина. Очень неудобно читать обсуждения в группах или комментарии на стенах (у них как раз антихабровый пример). Да и небольшая разряженность в друзьях тоже не помешала бы (слишком пестрят аватарки).
Попробовал. :)
Очень мне нравятся артефакты на пожатых градиентах. А самое главное нет выигрыша в подаче информации (элементы стали больше, а кол-во информации на экране не изменилось). Zoom — это для плоховидящих (я им не пользуюсь — сижу в очках).
Так что я за резину (не сомтря на то, что я сам занимаюсь именно версткой)!
Очень мне нравятся артефакты на пожатых градиентах. А самое главное нет выигрыша в подаче информации (элементы стали больше, а кол-во информации на экране не изменилось). Zoom — это для плоховидящих (я им не пользуюсь — сижу в очках).
Так что я за резину (не сомтря на то, что я сам занимаюсь именно версткой)!
Есть ещё один немаловажный фактор — изменяемый маштаб страницы.
В Opera с самых первых версий, в Firefox c 3-й версии, в Internet Explorer с 7-й есть возможность изменять маштаб всей страницы, а не только текста.
Неплохо учитывать это при вёрстке…
В Opera с самых первых версий, в Firefox c 3-й версии, в Internet Explorer с 7-й есть возможность изменять маштаб всей страницы, а не только текста.
Неплохо учитывать это при вёрстке…
Добавьте ещё и для 1920 — если вы хотите, чтобы ваш сайт хорошо работал в будующем на 24" мониторах, которые в 2010 станут нормой. :)
Меня лично прикалывают сайты, на которых информация даётся по центру, а справа и слева пустые поля размеров страницы :) (http://www.ag.ru/ яркий пример). По этому я делаю сайты максимально растягивающиеся, которые будут смотреться нормально и на 1024 и на 1920.
Меня лично прикалывают сайты, на которых информация даётся по центру, а справа и слева пустые поля размеров страницы :) (http://www.ag.ru/ яркий пример). По этому я делаю сайты максимально растягивающиеся, которые будут смотреться нормально и на 1024 и на 1920.
А вот вопрос по теме, прежде всего к обладателям больших широкоформатных мониторов, не разворачивающих окно браузера на весь экран.
Пускай фиксированная верстка 980px, а окно у вас, скажем, 1200 шириной, какие собственно отступы делать, равные слева и справа или прижимать (не вплотную, конечно) в какому-либо краю, и к какому?
Пускай фиксированная верстка 980px, а окно у вас, скажем, 1200 шириной, какие собственно отступы делать, равные слева и справа или прижимать (не вплотную, конечно) в какому-либо краю, и к какому?
я люблю просматривать сайты на ширину всего 22'' монитора, на автомате начинаешь тестить какие нить мелочи, чтобы в своих проектах это исключить.
Tсть еще один тип резиновой верстки, с использованием Flash.
Можно целиком сделать сайт целиком умещающийся в одну флешку, или несколько рядомстоящих. Тогда при изменении размеров сайта флешка может увеличиваться пропорционально размерам экрана. Естественно, с полным сохранением пропорций того, что внутри этой флешки находится. Отдельные личности даже перезагружают текстуры при изменении размера окна браузера, чтобы на большем мониторе графика выглядела красивее. Самый простой способ достичь такого эффекта: поставить стопроцентную ширину флешки в html.
Часто видел такое в зарубежном интернете, и когда-то творил сам. Flash-редактор умеет делать такие html автоматически. Подходит для «визиток» и промо-сайтов: быстрый способ сделать простенький сайт, который тем не менее приятно смотрится на большом разрешении.
Комрады, что думаете по поводу сего непотребства? :)
Можно целиком сделать сайт целиком умещающийся в одну флешку, или несколько рядомстоящих. Тогда при изменении размеров сайта флешка может увеличиваться пропорционально размерам экрана. Естественно, с полным сохранением пропорций того, что внутри этой флешки находится. Отдельные личности даже перезагружают текстуры при изменении размера окна браузера, чтобы на большем мониторе графика выглядела красивее. Самый простой способ достичь такого эффекта: поставить стопроцентную ширину флешки в html.
Часто видел такое в зарубежном интернете, и когда-то творил сам. Flash-редактор умеет делать такие html автоматически. Подходит для «визиток» и промо-сайтов: быстрый способ сделать простенький сайт, который тем не менее приятно смотрится на большом разрешении.
Комрады, что думаете по поводу сего непотребства? :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Правильная «резина»