Что хорошего в шаблонном решении
Посмотрим, что нам дал XHTML. Тысячи сайтов, построенные по принципу: колонка с постами (новостями, заметками, анонсами) посреди страницы. И меню сверху или сбоку. Потому что во избежание конфликтов с валидаторами не хочется верстать сложные страницы. Даже блоги (для которых такая верстка, в принципе, оправдана) можно делать более изобретательными по дизайну. Лень
Посмотреть на хорошо сверстанные книги, обратить внимание, что можно располагать текст на широких полях, делать врезки, цитаты, а картинки вставлять не только как отдельные абзацы. XHTML сам по себе призван только немного упорядочить данные, и он накладывает не так уж много ограничений. Но чтобы сверстать по-настоящему интересную страницу, приходится идти на ухищрения, часто нарушая пресловутую валидность кода. Вследствие этого модное веяние — делать по стандартам — порождает одноликие страницы. Заходя на сайт, сверстанный по стандартам, либо не запоминаешь его дизайна совсем, либо удивляешься убогости дизайна.
В соблюдении стандартов ничего плохого нет. Плохое — в сознательном ограничении себя только стандартами. Например, в самом HTML не заложена возможность рисования вертикальных линий, но с помощью таблиц это можно сделать. А сочетание HTML и CSS дает вообще очень широкие возможности по оформлению страниц, и главное — увидеть возможность там, где о ней создатели языков и не думали. А тут уже стандартами не пахнет. Тут пахнет интерпретацией заложенных возможностей.
Дело осложняется тем, что ни один из современных браузеров не поддерживает абсолютно все рекомендованные стандарты до конца. А иногда наоборот: содержит возможности, не описываемые в стандартных документах.
И при всем при этом шаблонные решения тоже полезны. Они позволяют посетителю практически не думать, заходя на веб-страницу, а сразу находить там нужный материал. Этой теме посвящены две книги, ставшие классическими трудами по веб-дизайну — «Веб-дизайн» Якоба Нильсена и «Веб-дизайн: Не заставляйте меня думать» Стивена Круга. Вопросы выработки у посетителей условных рефлексов описаны там с большой скрупулезностью с анализом всех элементов страниц.
Шаблонность и новаторство проявляется в первую очередь в нескольких вещах: текстах ссылок, построении меню и общего каркаса страницы, наличии «шапки» и «подвала», виде кнопок и иных интерфейсных элементов. Рассмотрим несколько примеров.
Первым экспонатом нашей выставки служит сайт одной из студий веб-дизайна (atilekt. ru). Посмотрите наверх. Кроме симпатичной и жизнерадостной девушки, не подозревающей, что рядом кружат акулы (может, ко
Нечно, это и дельфины, утверждать ничего не буду), мы видим довольно посредственно сделанное меню. Однако, несмотря на низкий уровень графики, служащей фоном к меню, не разобраться в нем сложно. Это и было целью — посетителю, впервые зашедшему на сайт, не составит труда найти нужный раздел. Шаблон номер один — строчка меню вверху страницы. Шаблон номер два — «шапка» над меню: очень многие владельцы сайтов не представляют себе жизни без «шапки». Правда, ответить на вопрос, как соотносится плавающая девушка с веб-дизайном, непросто. Удручает обилие орфографических и пунктуационных ошибок на сайте, начиная с содержимого тэга <^^1е> — «Студия веб дизайна Атилект— создание сайтов. От дизайн сайта до заполнения. Лучшая веб дизайн студия в Москве.». Шаблон номер три — названия пунктов меню. «Портфолио» или «Работы» называются так на большинстве сайтов. Сложно встретить корпоративный сайт без раздела «Компания» или «О компании». Редкие сайты обходятся без «Новостей».
Для сравнения посмотрим на другой сайт (foxie. ru):
|
|
Высокий уровень обработки графики. Замечательная идея (что-то вроде «моя полочка на доске почета дизайна»). Большинство графических элементов (книги, телефон) являются ссылками, причем темы страниц, на которые ведут ссылки, очевидны. Принцип «у кого больше монитор, тот больше увидит». Мелкие забавные детали (например, пузырек с «йадом»). Сайт можно долго и с удовольствием рассматривать. Однако при отключенной загрузке графики текст практически не виден — а ведь это сайт не только для владельцев высокоскоростных линий. Как в расположении элементов, так и в решении ссылок — полное отсутствие шаблонов. Хорошо это или плохо? С одной стороны, прежде чем начать пользоваться сайтом, надо в нем разобраться. Не все бросается в глаза с первого раза. С другой стороны, уровень исполнения настолько высок, что это искупает отступление от правил интуитивности интерфейса. Сайт обладает своим лицом, и посетитель его не забудет.
Создатели сайта grasaro. ru нашли компромисс: с одной стороны, необычно и стильно, есть на что посмотреть, а с другой стороны — все
Интуитивно понятно. Все ссылки выглядят как ссылки, информация не собрана в одном месте, а грамотно распределена по странице. Несмотря на обилие графики, ничего лишнего, а точнее — все кстати. Графика выполнена на очень высоком уровне, и на сайты приятно просто смотреть. Пользоваться ими — тем более. Хороший подбор цветов, кегля и гарнитуры шрифта, умеренное использовование флэша. На странице много информации, но она организована правильно, и глаза не разбегаются. Главные достоинства — лаконизм, уместность и красота.
Нешаблонные решения могут касаться не только общего вида, но и отдельных фрагментов.
В принципе, сайт «Пятьсот пикселов» (Www.500Px.Com) почти ничем не отличается от остальных фотосайтов: есть галереи, голосования, рейтинги, возможность комментирования, список авторов и все полагающееся. Однако форма входа, например, выполнена вот так:
Такой же принцип (отказ от привычных формулировок) последовательно выдерживается и на некоторых других страницах.
Например, на странице «Регистрация»:
«Эти данные мы разместим на всех сайтах знакомств и продадим спамерам».
«Торжественно клянусь
- Мне больше 14 лет.
- Я не буду ругаться матом, грубить другим пользователям и размещать здесь детскую порнографию.
- Я никогда не поддамся Темной Стороне Силы.
- У меня нет родственников за пределами Солнечной Системы.
- С понедельника... нет, со вторника я начну худеть, займусь спортом и буду голосовать за Единую Россию.
- Я умею читать».
Не скажу
Не скажу
Мальчик
Девочка
Ющенко
Или на странице «Пресс-служба»:
«Это свершилось. Мы переехали. Спасибо вам за ваше терпение и нам за нашу скромную гениальность.
За несколько дней тестирования нового сервера тысячей специально обученных обезьян не было не выявлено ни одной ошибки».
Или, например, на странице «Контакты»:
«Контактная информация, и иные способы вступить в порочную связь с администраторами».
«Что вообще происходит?
Да ничего страшного. К Земле приближается комета, скоро мы все умрем. Но вообще, у нас все под контролем. Сайт 500рх вырос до большого фотопроекта, отрастил себе самостоятельный сервер и теперь сам его танцует».
«Если вы им уже пользуетесь, то отписываться категорически не советуем, иначе мы нашлем на вас скрипт с проклятием».
«Так что, регистрируйтесь на здоровье, но помните, что от частых занятий регистрацией ухудшается здоровье».
«Но если вдруг ваше имя занято, то есть два варианта действий. Первый - набить морду тому, кто занял ваше имя, и второй - сменить имя. Например, на Бонифаций. Мы вас не подталкиваем ни к одному из вариантов, но если что, то один наш друг делает замечательные бейсбольные биты с глушителем. Всего за 36,95$!»
«Я пытаюсь нажать на серые ссылки в меню, но они меня никуда не приводят.
Не трогайте их, они отравлены».
«Модераторы рассмотрят вашу фотографию, после чего примут коллективное решение - одобрить ее (и тогда эта фотография попадет в 500рх), либо отказать ей, спалить, а
|
|
Пепел развеять над Тихим океаном. (...) Отбор очень строг и суров. Тихий океан уже на 17,3% покрыт пеплом от сожженных фотографий, экологи бьют тревогу...»
«Все модераторы (5 человек и 17 тараканов без права голоса) голосуют "За" или "Против" каждой фотографии». «спамоприемник: info@500px. com»
Резюме: помимо большого количества очень хороших фотографий и аскетичного дизайна, не мешающего их восприятию, на сайте приятно читать справочно-сопроводительные тексты: почти все они написаны с юмором. Это плюс. Орфография и пунктуация (это минус) в цитатах сохранена. Грубых ошибок в юзабилити не отмечено.
Сложно назвать шаблонным решение дизайна вот этой страницы (Www.Drugaya.Ru/Promopages/Dog/):
|
ПмбДОё
|
Особенно хороши «закладки» в виде закладок. Иногда смысл терминов настолько «затирается», что на его изначальное значение не обращают никакого внимания. Стоит воспринять значение термина буквально, как тут же рождается идея для оформления.
Например, что стоит в блоке адресов электронной почты нарисовать собаку с письмом в зубах? (Правда, название «собака» для знака «@» — российская традиция. В разных странах знак называют то обезьяной, то свиным хвостиком, то ухом, то змеей. Но в большинстве случаев русскоязычные сайты рассчитаны на российскую аудиторию, так что метафора останется понятной.)
Следующий сайт — elementy. ru — не использует никаких нешаблонных решений, кроме намека на имитацию журнального разворота. Такие решения (сайт в виде журнала) встречаются достаточно часто, но не всегда они выполнены с подобной элегантностью:
|
|
|
|
Шаблонности легко избежать, если идея оформления ориентирована на содержимое:
"
Борис Лкунин.
О D 'О и DIII ІІ
^ V
»—__ читальні
|
|
Поскольку это (akunin. ru) собрание сочинений, то и внешний вид стоит сделать книжный. Главная страница выглядит как обложка библиотечной книги. Внутри — хорошая структура, навигация в стиле «bread crumbs», забавные бонусы в стиле второй половины XIX столетия и большое количество акунинских текстов.
А теперь перейдем к следующему экспонату. Это сайт мехового салона, расположенный по адресу kat-krasnodar. ru.
|
|
Верстка по-настоящему необычна, изобразительный ряд прямо сообщает о том, чему посвящен сайт. Но при первом взгляде на сайт неясно, как же добраться в салон. Адрес дан только внизу страницы, да и то картинкой без альтернативного текста. Телефонов и электрон-
|
Что хорошего в шаблонном решении |
N |
|
Ного адреса нет. Большое количество свободного пространства съедено иллюстративно-декоративной графикой, а на текст места почти не осталось. Выводов может быть только два: если вы делаете шаблонные сайты, прекрасно построенные с точки зрения юзабилити, ими будет удобно пользоваться, но на них будет скучно смотреть. Если же вы решили сделать из сайта произведение искусства, не забудьте, что сайт — это также интерфейс, то есть инструмент для обмена данными, а значит, стоит позаботиться о том, чтобы им было удобно пользоваться (чтобы декоративные элементы не уводили из поля зрения ссылки, текст и прочую полезную информацию). Шаблонность и новаторство проявляются в первую очередь в нескольких вещах: текстах ссылок, построении меню и общего каркаса страницы, наличии «шапки» и «подвала», виде кнопок и иных интерфейсных элементов. Как построить навигационное меню, чтобы посетитель смог пользоваться им, почти не думая? Тут работает несколько принципов. Во-первых, «длина» меню. Если меню состоит из десяти пунктов — это перебор, и в нем легко запутаться. Семь пунктов — допустимый максимум (а три — допустимый минимум). Не последнюю роль тут играет глубина вложенности, если меню иерархическое (неважно, выпадающее или нет, но в случае с выпадающим меню вложенностью более двух уровней просто неудобно управляться) — более трех уровней вряд ли стоит использовать. Во-вторых, названия пунктов меню должны быть внятными. Это либо действия («Написать письмо», «Сделать заказ», «Прочитать документацию»), либо понятия («Компания» или «О компании», «Новости», «Заказ»): нужно быть последовательным, но не доводить это до крайности («Почитать о компании», «Познакомиться с руководством»). Некоторые разработчики создают нестандартные пункты меню («Наше все» вместо «Портфолио»), что допустимо, только если сайт достаточно популярный. В-третьих, что логически связано со вторым, в пунктах меню должны отсутствовать повторяющиеся смыслы. Например, если вы сделаете пункты «Сервис» и «Услуги», то посетителю нелегко будет с первого раза догадаться, по какой ссылке идти. Если же получаются такие перекрывающие друг друга по смыслу пункты меню, то стоит подумать о сокращении количества разделов или об их переименовании. Название пункта меню должно однозначно говорить о том, что скрывается за ссылкой. В-четвертых, активный пункт меню должен отличаться от неактивного. У каждого пункта меню стоит предусмотреть несколько состояний, которые будут видны при разных условиях. Так, если посетитель |
|
Дизайн |
|
|
Перешел по одной из ссылок в меню, то эта ссылка перестает быть ссылкой: страница не должна ссылаться сама на себя, потому что в этом нет смысла. Совсем удалять этот пункт из меню удалять нежелательно, чтобы не менять размер меню. Визуально этот «неактивный пункт меню» должен выделяться: если упор делается на неактивности, то цвета пункта должны быть более бледными, если этот пункт меню по совместительству и заголовок страницы, то он должен быть более активным по цветам и размеру, возможно, полужирный или с рамкой. Иногда дизайнеры используют для неактивных пунктов меню бледный фон. Несомненно, если посетитель находится в разделе, дочернем по отношению к выделенному пункту меню, то этот выделенный пункт меню должен снова стать ссылкой, поскольку посетитель должен иметь возможность попасть в иерархически более высокий пункт меню не только с помощью браузерной кнопки «Назад» (особенно если он пришел на эту страницу напрямую из поисковой системы). Наконец, часто пункты меню меняют свой вид при наведении мыши, подсказывая, что они — именно пункты меню, а не что-то иное (на самом деле особого смысла в таком «подсвечивании» нет, потому что курсор и сам вид меню говорят сами за себя, но использование псевдокласса :hover стало уже почти традицией). Таким образом, нужно придумать стили: для пункта меню, для пункта меню с наведением курсора, для активного пункта меню (без ссылки), для активного пункта меню при нахождении в дочернем разделе. Наконец, в-пятых, следует всегда сохранять меню в одном месте страницы, чтобы не затруднять его поиск посетителем. Эти правила созданы в основном для того, чтобы их нарушать. Судите сами: если вы с помощью выпадающего меню глубиной в 17 уровней хотите просто поиграть с посетителем, чтобы он уже не чаял, когда доберется до его конца, неужели вы откажете себе в этом удовольствии и лишите такого удовольствия визитера? А если в одном из разделов меню состоит из 24 пунктов одного уровня просто потому, что каждый пункт меню ведет на страницу с описанием того или иного устройства, которое производит компания, почему нужно урезать это меню и придумывать искусственное деление? Далее, если в основу дизайна сайта положена какая-то идея (концепция), которой подчиняется каждый элемент, разве вы захотите следовать догмам и использовать шаблонные наименования? И если навигационное меню имеет характерный запоминающийся вид, почему бы, если это соответствует задумке, не размещать его в разных частях страниц? Как правило, веб-дизайнер, не знающий, какую схему построения страницы принять за основу, использует один из немногочисленных шаблонов: двух - или трехколоночная верстка, обязательное наличие «шапки» и чаще всего использование «подвала». Если верстка двухколоночная, то слева располагается узкая колонка меню, а все остальное пространство занимает содержимое страницы (заголовок, |
|
|
78 |
|
Что хорошего в шаблонном решении |
N |
|
Текст, иллюстрации). Если трехколоночная — то в третьей, такой же узкой, как первая, колонке находятся дополнительные пункты меню, формы голосования и баннеры. В шапке чаще всего располагается логотип и околосмысловая графика, иногда форма поиска и дублирующее меню. В подвале — контактная информация, чаще, чем реже, — поисковая форма, авторские права и дополнительная информация. Иногда (особенно в блогах) вообще применяется одноколоночная верстка с таким расположением материала (сверху вниз): шапка-логотип, меню, контент (содержимое), подвал. Что мы получаем в итоге? Всего-навсего очередной безликий сайт, ничего больше. Иногда сайт раскрашивается в приятные для глаз цвета, и это немного выделяет его из общей массы. Иногда при такой шаблонной верстке используется хорошая графика, и это скрывает убогость верстки, но часто даже пункты меню оформлены стандартными иконками, взятыми напрокат с других сайтов. Такие ситуации бывают, когда очень некогда, когда заказчик попросил именно так или когда лень подумать, но в последнем случае результат выдается за модные тренды и современные стандарты. Хотя со стандартами это ничего общего не имеет: просто лень думать. Следование моде — это, как правило, следование типичным решениям, когда нет желания найти свой стиль. Например, в последнее время стал очень популярным стиль дизайна, почему-то соотносимый с понятием «Веб 2.0». Стиль этот заключается в имитации глянцевой поверхности объектов с засветом сверху и более темным цветом снизу, причем под объектом делается его отражение (достаточно интенсивное по цветам), как если бы объект стоял на непрозрачной отражающей поверхности: Сгеа1г Г* 1 СГ1Г| При взгляде на такие логотипы, несомненно, выглядящие привлекательно, вспоминается фраза: «Все побежали, и я побежал» (фильм «Джентльмены удачи»). Необязательно копировать то, что использует половина Рунета. Нужно хорошо понимать, когда необходимы шаблонные элементы, а когда допустимы нестандартные решения. В первую очередь это зависит от аудитории сайта: если сайт нужен только для предоставления информации (новости, погодные и биржевые сводки, рейтинги, официальные документы), то вряд ли стоит экспериментировать с названиями пунктов меню и помещать на страницы много графики. Очень вероятно, что сайт будет читаться в первую очередь через RSS, где есть только текст и ссылки, не каждая из которых удостоится чести быть |
|
Нажатой. Напротив, молодежь часто ждет даже от информационных ресурсов развлечений, поэтому не стоит обманывать их в ожиданиях: молодежные и развлекательные сайты — хорошая площадка для экспериментов веб-мастера. 2.3. Как изобрести велосипед: ширина сайта |
|
|
Чтобы не изобретать велосипед совсем уж с педалей, стоит сразу сказать, что существует три основных решения ширины сайта: минимальная фиксированная ширина, тянущаяся верстка и привлечение самооткрывающегося окна фиксированных размеров, размер которого высчитывается автоматически в зависимости от среды. Первые два, конечно, преобладают, а на третьем я даже не буду останавливаться. Первый случай остался как наследие времен маленьких мониторов (разрешением 640 на 480 и 800 на 600 пикселов), хотя многие делают такие сайты и до сих пор из соображений совместимости с теми же старыми мониторами. В этом случае достаточно учесть, что у полосы прокрутки и границ браузера есть своя ширина, и сделать сайт шириной 750 пикселов или около того (про разрешение 640 на 480 можно забыть). Только не все (Www.Saratov.Ru) почему-то понимают, что красивее сайт не станет, если колонка 500-пиксельной ширины будет ютиться слева в верхнем углу на мониторе 1200-пиксельной ширины. С другой стороны, это всегда можно выдать за дизайнерский изыск. Компромиссное решение найти легко: либо располагать колонку с содержимым по центру (на маленьких экранах она просто займет почти весь экран), либо сбоку, но тогда тщательно сопоставить ее с рисунком фона. Фон в любом случае нужно продумать досконально. Особо же узкая колонка будет дизайнерским изыском без иронии. Чтобы сделать тянущуюся (резиновую, эластичную, подвижную) верстку, когда содержимое страницы занимает все окно браузера целиком при любой ширине экрана и даже при изменении размеров окна браузера, существует масса приемов. Среди популярных — применение векторной графики, процентные значения ширин блоков страницы, скрытые элементы (появляющиеся только на больших экранах), а также несколько т. наз. «хаков» — обманных путей. Флэш-ролики являются образцом векторной графики на вебстраницах. Однако их чаще всего помещают как графические вставки фиксированной ширины, например, по центру страницы. Намно- |
|
|
80 |
