x
 
Андрей Колпаков
23 июля 2007

Зачем нужны резиновые сайты?

Я считаю, что убеждение в том, что сайт должен быть резиновым — одно из самых вредных устоявшихся убеждений в веб-дизайне. Сайт может быть резиновым, но вовсе не должен быть таковым. И «тянуться» должно вовсе не все.

К примеру, можно «от балды» набрать адреса самых крупных мировых компаний: microsoft.com, apple.com, ibm.com, bbc.com, bmw.com, mercedes.com. Все они фиксированные по ширине.

Что дает тот факт, что сайт тянется в ширину? Большее количество информации мы не поместим — мы просто увеличим отступы и ширину текстовых блоков. В редких случаях (магазин Студии Лебедева) мы действительно используем ширину экрана — при увеличении разрешения справа появляются новые товары.

При определении экранных разрешений, для которых предназначен сайт, я предлагаю действовать следующим методом:

  1. Определить разрешение, при котором сайт будет выглядеть наилучшим образом. Например, это 1024×768.
  2. Определить диапазон разрешений, при которых сайт будет «выглядеть хорошо». Допустим, от 800×600 до 1600×1200.
  3. Если сайт наилучшим образом выглядит при разрешении 1024×768, зачем его растягивать до 1600? Пусть и выглядит себе хорошо при 1024 пикселях в ширину. Редкий сайт становится лучше, когда его растягивают свыше 1024 пикселей.
  4. Если это нужно и если это возможно, сверстать сайт таким образом, чтобы он приемлемо выглядел при меньшем разрешении (800 пикселей). Если ради такой цели придется пожертвовать удобством тех пользователей, у кого мониторы поддерживают 1024 и более пикселей, стоит еще раз подумать, стоит ли доставлять подавляющему большинству неудобства ради меньшинства?

На картинке — кусочки скриншотов сайта www.artgorbunov.ru при разных разрешениях. Мы видим, что шрифт, кегль и интерлиньяж не изменяются в зависимости от разрешения. Но зачем, в таком случае, изменять длину строки? Ведь она имеет вполне определенный оптимальный диапазон удобочитаемости.

Ведь даже при разрешении 800×600 страница легко вместит такую строку, какой она становится при разрешении 1280×1024. Длина строки близка к оптимальной при разрешении 1024×768. Зачем ее уменьшать для меньших разрешений и увеличивать для больших?

Единственное оправдание, которое я здесь вижу — это гармоничное взаимодействие пропорций текстового блока с пропорциями страницы (монитора или окна браузера). «Большой стиль» в типографике, возможно, ничуть не менее важен, чем удобочитаемость, однако он не должен ухудшать удобочитаемость. (Пример ухудшения — растянуть строку; пример симбиоза — набор в несколько колонок).



Андрей!

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

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

Физическое разрешение экрана — это еще не размер окна браузера, а только верхнее ограничение. На экране с разрешением 1024×768 может быть открыто окно размером 752×698.
Главная опасность поверхностного представления о статистике — использование средних значений для принятия решений. Среднее — это грубая абстракция, которая не применяется в настоящей статистике без других параметров распределения.

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

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

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

Блок телефонных номеров на сайте ОАО «Медицина» адаптируется к ширине окна

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

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


Поделиться
Отправить

Комментарии

Попов Максим
23 июля 2007

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

Евгений Неверов
23 июля 2007

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

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

Юра Ткаченко
23 июля 2007

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

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


23 июля 2007

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

Артур Чафонов
23 июля 2007

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

Иван Власов
24 июля 2007

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

Сергей Евсеев
24 июля 2007

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

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

Сергей Сташкевич
25 июля 2007

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

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

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


26 июля 2007

Сергей!

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

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

Карпинский Александр
27 июля 2007

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

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

HTML:


………

nemecfc
24 августа 2007

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

Cooluck
12 сентября 2007

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

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

Сергей Красильник
21 августа 2010

Если у вас небольшой монитор (например 1280×800), а вы хотите посмотреть, как будет вести себя разрабатываемый вами или любой другой резиновый сайт на большом мониторе (например 2560×1600), то не спешите искать монитор с большим разрешением, ведь достаточно просто уменьшить размер шрифта в два раза, и получится, что как бы сайт открыт на в два раза большем мониторе. Станет видно, как разные блоки некрасиво раздвигаются и между ними образуются большие пустые «дыры». Эталоном резиновой вёрстки можно считать сайт бюро, так как он выглядит хорошо при любом разрешении.

Алексей Станков
15 февраля 2012

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

Вот хотя бы взять сайт: http://cuponplus.ru

Автор сделал упор на простоту и расширяемость.

Максим
17 августа 2007

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

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

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

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 Год назад запустил личный проект «Либретто опер» 2 Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4




Недавно всплыло

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Как написать хорошее резюме? 7 1