Юзабилити: как сделать сайт удобным

Виды верстки

В языке HTML существуют два способа задавать размеры эле­ментов страницы: в относительных величинах, например, в про­центах от предоставленного элементу пространства, и в абсо­лютных, например, в пикселях.

На самом деле пиксель — величина тоже в некоторой степени отно­сительная. Текст, написанный шрифтом 12 п, будет разной величи­ны при различных разрешениях монитора.

Если размер (ширина/длина) элемента задается в процентах, на­пример, 100 %, то такой элемент занимает всю предоставленную ему площадь и будет расширяться или сужаться до тех пор, пока позволяет обрамляющий элемент. Такую верстку (или дизайн) называют «резиновой».

Если размер элемента задается в абсолютных величинах (в пик­селях), то в большинстве случаев его изменить нельзя. Такую верстку называют жесткой, или фиксированной. Основное сред­нестатистическое разрешение монитора у пользователей интер­нета считается равным 1024x768, поэтому размеры элементов определяют исходя из этого разрешения. В действительности их размер чуть меньше, т. к. учитывается ширина полосы прокрутки и элементов окна браузера.

Смешанный способ, верстки позволяет содержимому растяги­ваться на всю длину и ширину окна браузера, но конечный раз­мер должен быть не меньше определенного предела (800x600); Иногда в одну из ячеек таблицы с основным содержимым поме­щают изображение шириной около 800 пикселей, чтобы меньше этого размера сайт «не скручивался».

Теперь подробнее о плюсах и минусах этих способов с точки зрения пользователя.

Плюсы жесткой верстки:

• если композиция сайта проработана очень тонко и малейшее нарушение положения элементов может ее разрушить, то при жесткой верстке этого не произойдет;

• страница одинаково приемлемо выглядит при всех разреше­ниях монитора;

• содержимое страницы ведет себя гораздо более предсказуемо. Минусы жесткой верстки:

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

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

Плюсы «резиновой» верстки:

• страницы гибко подстраиваются практически под любое раз­решение монитора;

• пустого места не остается, следовательно, поместится больше информации, не будет лишних пустот;

• всегда возможно использование элементов с абсолютным по­зиционированием (при условии, что они будут выровнены влево).

Минусы «резиновой» верстки:

• поведение содержимого в принципе непредсказуемо, текст и картинки переносятся как получится и где получится, под­страиваясь под размеры окна;

• некоторые элементы не всегда корректно ведут себя (точнее, зависят от многих факторов), если они заданы в процентах.

Смешанный способ верстки, сочетая в себе достоинства обоих предыдущих способов, устраняет многие их недостатки. Я счи­таю его лучшим из трех.

У