О жестких и резиновых дизайнах

Lenta.ru - скриншот

Lenta.ru 800X600

Соображения, которые применяются при планировании дизайна, чаще всего разделяются на две группы. Первая группа относится к красоте, внешней привлекательности сайта. Другая - к функциональности, удобству использования ресурса. Фиксированный (жесткий) дизайн может применяться для достижения как первых, так и вторых целей. Дизайн, при котором размеры элементов страницы (чаще всего это таблицы) указываются в пикселях, и, соответственно, их размер никоим образом не зависит от разрешения экрана пользователя и размера окна браузера, называется фиксированным или жестким. Противоположностью его является так называемый "резиновый" дизайн, где размеры элементов являются относительными и задаются в процентах от ширины страницы. Название появилось из-за того, что размеры блоков (в пикселях) изменяются при изменении размера окна браузера.

Вопрос "а какой сайт лучше сделать - "резиновый" или фиксированный?" однозначного ответа не имеет. Исходить, в первую очередь, необходимо из удобства использования сайта. Использование фиксированного дизайна оправдано в следующих случаях:

при необходимости сохранения удобочитаемости текста; для отображения сайта в таком виде, в котором он задумывался дизайнером;
при наличии специфичных требований заказчика (оптимизация под малые расширения экранов - к примеру, под экраны КПК).

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

Таким образом, максимальная ширина колонки текста, не вызывающая усталости при продолжительном чтении и предназначенной для чтения с монитора, не должна превышать 120-150 символов. При этом сужение текстового поля сказывается на удобочитаемости значительно меньше, чем его расширение.

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

Здесь нельзя не отметить тот факт, что ширина строк текста является лишь одним из факторов, влияющих на удобочитаемость. Обращать внимание необходимо также на используемые шрифты (размер и начертание), межсимвольные расстояния и межстрочные интервалы, выравнивание, цвет и фон шрифта. Также желательно избегать символов, которые могут быть некорректно отображены. Чтение каши, в которую превращается любой текст при хоть сколько-нибудь вольном с ним обращении, едва ли кому доставит удовольствие, каким бы интересным материал ни был, и вдобавок может буквально "наградить" читателя головной болью.

Lenta.ru - скриншот

Lenta.ru - 1024X768

В свете всего вышеперечисленного, при создании сайта обращайте внимание не только на то, сколько места по ширине выделяется для текста, но и на то, как текст будет выглядеть и читаться в целом. Если объемы публикаций достаточно велики, вполне можно использовать "резиновый" дизайн с использованием полей (поля нивелируют расширение текстового блока при увеличении разрешения и позволяют придать сайту более аккуратный вид) или фиксированного дизайна, "заточенного" под разрешение экрана 800X600 пикселей. В том случае, когда публикуются различные короткие материалы, более рациональным выглядит использование фиксированной ширины колонок, с тем, чтобы на строку текста приходилось порядка 70 символов. На сайте Lenta.ru ширина строки составляет 65 знаков - при данной ширине весьма высока удобочитаемость, и не возникает проблем, связанных с выравниванием строк, когда взгляд спотыкается на больших пробелах между словами.

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

Однако надо помнить о следующем: на размере области отображения в браузере сказывается не только разрешение экрана, но и то, насколько велика панель задач (taskbar) в операционной системе, не установлено ли в Internet Explorer дополнительных панелей (к примеру, от Google). В итоге вполне может случиться такая ситуация, когда сайт, не имеющий у дизайнера ни одной линейки прокрутки, из-за недостатка места у пользователя (по причине установки того же Google-bar) не умещается в области просмотра по вертикали и обзаводится линейкой вертикальной прокрутки. Если дизайнер такого развития событий не предусмотрел и задал ширину страницы максимально приближенной к ширине области просмотра без вертикальной линейки прокрутки, появляется и горизонтальная линейка, которая позволяет просмотреть скрытые вертикальной линейкой 10-15 пикселей. Выглядит это очень плохо, если не сказать жестче, поэтому при использовании фиксированной ширины страниц неплохо оставлять небольшой запас по ширине. Также не надо забывать, что у многих пользователей и боковая панель браузера открыта... В итоге получается так, что надпись "Best viewed with IE 6 and 1024X768 resolution" необходимо переделывать в "Best viewed with IE 6 (without optional bars and closed side-bar)".

Автор: Юрий Синодов www.hostinfo.ru