Эта статья может быть использована молодыми веб-дизайнерами для расширения своих взглядов.
Так же, это информация будет полезна потенциальным заказчикам сайтов, которые принимают активное участие в проектировании проекта, собирая основной пакет требований.
О «резиновой» верстке сайтов говорили и писали много. Говорили что она обязательна, и наоборот, что использование ее ошибка. Однозначно, были причины возникновения резиновости. И утверждать, что использование этой технологии на 99% ошибочно, однозначно нельзя. Любую технологию нужно применить, если она нужна. Я хочу очертить примерную границу применения резиновой верстки.
ЗАРОЖДЕНИЕ
Любой дизайн это решение задач: эстетика, которая должна сработать нужным образом; удобство, которое должно навести на определенный метод использования или расширить стандартные возможности и т.п. Верстка, это один из этапов реализации веб-проекта, который проектируется непосредственно дизайнером. Выбирая тип верстки, дизайнер решает конкретные задачи, давайте попробуем понять — какие именно.
Чтобы понять задачи, решаемые резиновостью, стоит начать с истории её возникновения.
Первые сайты с подстраивающейся к размеру экрана версткой (резиновые) появились в период исчезновения мониторов с разрешением 640-480, активного использования разрешения 800-600 и первыми представителями 1024-768. Стоит признать, что площадь 640-480 и 800-600 мала для полноценного восприятия информации. А еще и навигация, и банер повесить надо (в те времена они были эффективнее). Растянув наш сайт в 1,6 раза по горизонтали, мы хоть как то приблизим формат сайта к хорошо воспринимаемому всеми формату листа А4. Сделаем тем самым огромное одолжение владельцам новеньких дорогих «больших» мониторов. Тем более, что мы растягиваем не только элементы по странице, но еще и текстовые блоки, которые уменьшаются по высоте, а это иногда убирает скрол! (а это пикселей 30!). Выгоды очевидны!
Получается, главная задача «резиновости» — дать необходимое пространство для контента, не ущемив достоинство владельцев стареньких мониторов.
Так как мы рассматриваем «резиновую» верстку в наше время, стоит обратить внимание на современный парк мониторов, а это (если забыть про ноутбуки) от 1024 х 768 и до 2048 х 1152. Математически, мы получаем разницу в 2 раза, что не намного больше чем лет 10 тому назад.
Соотношение размеров между большими и маленькими мониторами почти сохранилось, сохранились ли ставящиеся перед дизайнерами задачи?
КАК ОНО РАБОТАЕТ
Для начала, я бы хотел разобрать основные методы масштабирования и их особенности. Отдельно стоит заметить, что масштабируются сайты, как правило по-горизонтали.
1. Текстовые блоки хорошо поддаются растяжению по горизонтали. Они несут, порою, до 90% всей информации на сайте (а значит, их много! Есть что тянуть!). Но бесконечно растягивать их просто нельзя. Наше внимание имеет определенный запас «усидчивости». Если текстовая строка становится слишком длинной, нам просто тяжело ее читать — мы устаем. Недаром, в газетах используют ограничения по ширине текстового блока примерно в 50-55 знаков, а это, даже при увеличенном межбуквенном расстоянии, меньше половины ширины листа А4. Вообще, самой оптимальной длиной строки для быстрого и удобного чтения считается 45 знаков. Минимум тоже есть, это порядка 20-25 знаков. То есть, текстовый блок может быть увеличен от минимума до удобочитаемого максимума не более чем в 2 раза. Разбивать один текст на несколько колонок, как в газете, не рекомендуется. Потому что когда мы просматриваем текст, скролируя сверху вниз, возвращаться наверх в начало второй колонки будет крайне неудобно. Исходя из этого, если текст это основной блок страницы, то мы не можем ее растягивать даже до 900 px! А лучше меньше.
2. Расстояние между различными элементами сайта. При должном уровне навыков, эти области сайта поддаются масштабированию, казалось бы, без потерь. Но есть одно «Но». Дело в том, что «пустое пространство» это не просто «довесок» на страничке. Промежутки между блоками выполняют вполне конкретные задачи: разделяют, группируют схожие блоки, создают акцент на самом важном. Все эти задачи решаются разницей размеров пробелов. например, несколько блоков, разделенных небольшими промежутками, визуально воспринимаются как родственные, или имеющие одинаковую ценность. Блок, имеющих вокруг себя много свободного пространства однозначно ценный, возможно, главный на странице.
Если исходить только из разницы размеров блоков, то совершенно не имеет значение насколько мы их растянем, ведь они будут растягиваться пропорционально. Вроде бы, они все должны справляться со своими задачами… Но тут появляется очередное «Но». Дело в том, что промежутки еще имеют и свой «характер». Возможно, кому-то, далекому от сферы дизайна, это покажется несущественным, но я напомню вам о работе танцора, музыканта, певца.
Непрофессионал-танцор может выполнять те же движения что и мастер, музыкант-новичок будет играть по тем же нотам, певец будет петь ту же песню. Мы будем узнавать произведение, но мы скорее всего почувствуем разницу. Если сделать промежутки между родственными блоками в 5 мм, они будут восприниматься как родственные, но если мы их растянем до 10-15 мм, то они начнут безвозвратно разделять «родственников». И ситуацию не спасет даже то, что пропорционально это самый маленький на странице промежуток.
Характер «пустых мест» может влиять и на общий характер страницы. Например, резиновые сайты частенько разрушают требуемое ощущение выверенности, стабильности и надежности. Я не стану сильно вдаваться в этот вопрос, просто потому, что это достаточно специфическая тема, которая хорошо освещается в литературе посвященной дизайну, композиции и изобразительному искусству.
3. Всевозможные графики и таблицы с текстовым наполнением. Если в таблицах много столбцов, а в графиках много точек, то лишнее пространство позволяет увидеть чересчур длинные для ячеек подписи. Расширенные графики удобнее показывают небольшие и частые изменения направления. В этих специфических случаях резиновость может оказаться необходимой.
4. Растровые картинки при растяжении дают искажения и муар при растягивании в одном направлении. Но можно изменять размер всего изображения, сохраняя пропорции. Либо можно менять размер «окна» картинки, сохраняя ее истинный размер. Увеличивать размер картинок нужно в случаях когда эти картинки нужно показывать в максимально большом размере, например в фотосервисах, в портфолио дизайнеров и фотографов… Однако, так или иначе, это сопряжено с дополнительными техническими усложнениями.
Видео. Могу ошибаться, но мне еще не приходилось встречать варианты простого масштабирования окна потокового ролика (в любом случае, это ресурсоемкая технология). Как правило, это окошко реального размера + возможность посмотреть ролик на весь экран.
Но, наши сети пока далеки от идеала, и говорить о тотальном переходе в видео-формат не приходится.
Виджеты, навигация. Как правило, это элементы на которые направлено достаточно много внимания пользователя. Их внутренние компоненты, конечно же поддаются масштабированию. Но изменение выверенных дизайнером пропорций часто ведет к потере читаемости этих компонентов. Эти компоненты вообще стоит рассматривать в отдельности каждый случай, главное не забывать об опасности визуально «развалить» компонент.
Ну и как всегда, требуются технологические ухищрения.
Кроме чисто художественных аспектов и законов восприятия информации, есть еще проблема «уставания» нашего глаза. Отчасти, это затрагивается выше в санитарных нормах для текстовых блоков. Не буду уходить в цифры. Простой пример: мало кто станет вешать на рабочем месте лист с важной информацией по текущему проекту за спину или сбоку от себя, частенько наброски, схемы и записки вообще клеят в районе монитора. Чем дальше мы бегаем взглядом, тем быстрее мы устаем.
В масштабах экрана это кажется менее существенным. Но чтобы рассмотреть 2 разные картинки у левого и правого края 22 дюймового монитора, нам уже приходиться чуть повернуть голову, мониторы уже стали слишком большие для движения только лишь глазами. Через 4-5 часов сетевого серфинга у пользователя достаточно расфокусируется внимание, чтобы на вашем растянутом сайте ему стало трудно найти нужную информацию.
Просмотрев основные методы масштабирования и ограничения связанных с ними компонентов, можно прийти к выводу, что сами по себе компоненты часто просто не имеют запаса «резиновости». Конечно, некоторыми ограничениями можно пренебречь, но это чревато созданием неудобств для пользователей, потерей заложенного в дизайн образа или необоснованной технической сложности страницы.
ЧТО ИМЕЕМ
Дизайнеры по прошествии 10 лет все еще решают проблему нехватки рабочего пространства, и решают ее использованием «резиновой верстки», растягивающей все имеющиеся материалы по экрану монитора. Но наши мониторы давно переступили черту нормального восприятия! С этим можно не соглашаться просматривая очередное продолжение саги «STAR WARS» или играя в одноименный шутер. Картинка фильма и игры похожи на то, что мы видим нашими глазами в жизни. В нем очень много лишней информации, даже максимально эффективный угол нашего зрения всего 5°. За счет уменьшенного угла мозг разгружается от лишней информации. Нас не интересуют все детали, а лишь картина в общем.
А не воспринимаемое пространство создает лишь дополнительный «антураж» — зеленая масса леса, толпа… Прибавьте к этому факт, о том что лучше всего мы воспринимаем именно центр экрана, и нам крайне неудобно изучать что либо на краях… А страничка сайта это детали, тексты, анонсы и навигация. Да, можно заставить искать человека это все по большому экрану. И как правило, он находит. Человек может читать текст даже в нижнем правом углу экрана 9-м кеглем. Только это происходит ценой дополнительных усилий зрения и внимания, хоть и небольших на первый взгляд. Присоедините к этому лишние часы работы верстальщика и дизайнера на разработку этого типа верстки.
Стоит заметить, очень многие дизайнеры пришли к выводу, что тянуть бесконечно контент нельзя, точно так же как и сжимать. Понимание этого породило «полу-резиновость». Если человеку достаточно комфортно воспринимать информацию на 900 px ширины (немного больше ширины листа А4), то ради решения какой задачи ее растягивать до 1100 px? И это при том, что даже минимальное разрешение современных мониторов укладывается в ширину 1024 px, а значит, и сжимать не придется.
Да, нельзя не согласиться, что с увеличением размеров мониторов, мы столкнулись с проблемой лишнего места, которое теперь приходиться скрывать (это те самые белые поля по бокам экрана). Но для этого можно использовать фон, дополнительную графику, которые не несут смысловой нагрузки и не требуют дополнительного внимания. Совсем необязательно трогать информационные блоки.
Получив «заряд бодрости» конца 20 века, когда проблемы с площадью действительно были, дизайнеры продолжают решать несуществующие проблемы, а уже «образованные» заказчики требовать эти проблемы решать.
Частенько можно услышать про «законы веба», вроде как они не имеют ничего общего с типографическими правилами. Однако, главное в типографии — подача печатного текста. А до тех пор, пока видео и звук не заменили текст (который составляет гораздо больше 50% контента сайтов), а мы все еще видим биологическими глазами, было бы глупо отказываться от исследований и опыта, накопленного за несколько сотен лет типографии. Тем более, что текст на мониторах из-за низкого разрешения гораздо хуже печатного (72 dpi против 200 dpi и более), да и сами мониторы не способствуют отдыху глаз.
Для тех, кто сомневается в реальности проблем восприятия, предлагаю посмотреть 4 варианта размещения текстов тут: www.nano.a5.ru
ОПРАВДАНИЕ
Однако, не стоит полностью отрицать использование резиновой верстки. Она прекрасно подходит в случаях, когда большая площадь представления дает преимущество. Например, динамически построенные таблицы с текстовым содержанием и большим количество столбцов, дополнительная длина ячеек которых позволяет проявить длинный текст.
Или при специфических требованиях портфолио дизайнеров, фотографов, художников, когда им необходимо представить сразу много своих работ, показать общий уровень, не акцентируя на какой либо в отдельности. Но это частные случаи, которые нужно рассматривать в отдельности.
Есть еще один случай использования масштабируемой верстки, который не требует каких либо аргументов для права на существования — резиновость, как художественный прием. Но в этом случае один знаменитый совет приобретает новую форму:
Делайте только резиновые сайты = Делайте только сайты красного (зеленого, синего, оранжевого, и т.д.) цвета!
P.S. Думаю, многим приходилось натыкаться на фразы типа: «Хороший дизайнер должен уметь делать правильную резину!». На мой взгляд, куда важнее умение правильно выбрать: резина или нет?
Всего: 5499
