Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 22. Шаблоны сайтов

Огромный процент пользователей интернета для экономии трафика отключает загрузку изображений, и если посетители видят вместо текстов и навигационного меню пустую белую или черную страницу с намеками на изображения, то им делать на этой странице нечего. (Некоторые разработчики по им одним ведомым причинам, не всегда объяснимым логически, не просто вставляют изображения и помощью тэга <img />, а исполняют его фоном блока или ячейки таблицы.) Посетители не обязаны вникать в технологию построения сайтов и загружать все изображения, чтобы добраться до небольшого фрагмента текста, который они ищут.

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

Близка к этому проблема и второго полюса: чувство стиля и внимание к эстетической составляющей не всегда присуще и разработчикам-минималистам. Например, часто встречаются таблицы, где текст не отбит от границ и слипается с ними, а изображения сверстаны вплотную к тексту. То есть создателю ресурса в принципе оказывается не важным оформление его детища: ему достаточно выложить информацию и поставить ссылки.

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

Сайты — те же книги. Только с оглядкой на возможности, предоставляемые интернет-технологиями. И делать их нужно так же хорошо.

Сравнение с книгой совершенно не случайно. Большинство принципов работы с данными на веб-странице унаследованы из полиграфии. Принципиально новыми по отношению к книгам являются только гипертекст и возможность делать страницы интерактивными.
Еще раз вернемся к книге. Допустим, есть возможность сделать у книги золотой обрез, закладку из ткани, вклеить на форзац компакт- диск, а на цветные вклейки (разворачивающиеся) прикрепить пробники свежих духов. Технологически это все возможно, но нужно ли? Соответственно, и на отдельно взятой веб-странице изначально нужно исходить не из понятий «возможно», «круто» и «нереально красиво», а из понятий «целесообразно», «действительно нужно» и «удобно». А красота — это сопутствующий и неотъемлемый фактор.

С другой стороны, не стоит впадать и в обратную крайность и делать все сайты в спартанском стиле. Впрочем, даже спартанский стиль тоже хорош, если все сделано аккуратно.
Читать мятые брошюрки с криво напечатанным текстом не очень приятно.

Что хорошего в шаблонном решении

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

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

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

Дело осложняется тем, что ни один из современных браузеров не поддерживает абсолютно все рекомендованные стандарты до конца. А иногда наоборот: содержит возможности, не описываемые в стандартных документах.

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

Шаблонность и новаторство проявляется в первую очередь в нескольких вещах: текстах ссылок, построении меню и общего каркаса страницы, наличии «шапки» и «подвала», виде кнопок и иных интерфейсных элементов. Рассмотрим несколько примеров.

Первым экспонатом нашей выставки служит сайт одной из студий веб-дизайна (atilekt.ru). Посмотрите наверх. Кроме симпатичной и жизнерадостной девушки, не подозревающей, что рядом кружат акулы (может, конечно, это и дельфины, утверждать ничего не буду), мы видим довольно посредственно сделанное меню.
Однако, несмотря на низкий уровень графики, служащей фоном к меню, не разобраться в нем сложно. Это и было целью — посетителю, впервые зашедшему на сайт, не составит труда найти нужный раздел. Шаблон номер один — строчка меню вверху страницы. Шаблон номер два — «шапка» над меню: очень многие владельцы сайтов не представляют себе жизни без «шапки». Правда, ответить на вопрос, как соотносится плавающая девушка с веб-дизайном, непросто.

Удручает обилие орфографических и пунктуационных ошибок на сайте, начиная с содержимого тэга <title> — «Студия веб дизайна Атилект— создание сайтов. От дизайн сайта до заполнения. Лучшая веб дизайн студия в Москве.».

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru