3.1. Ответы на вопросы: «зачем» и «как»

3.1. Ответы на вопросы: «зачем» и «как»

Итак, мы убедились, что наш компьютер пригоден для верстки сайтов, а заодно оснастили его разнообразным ультраполезным «софтом». Теперь можно приступить к созданию пробного, ученического ресурса. Разумеется, куда более серьезного в сравнении с нашим первым шедевром – страничкой про образованных котят. Пусть этот ресурс будет сайтом издательства. Дело в том, что сайт издательства особенно сложен по устройству логической и физической структуры, а также наделен многочисленными функциями, которые не так уж просто сделать. Поэтому если браться за дело – то пусть это дело того стоит. Именно на издательском сайте мы многое изучим и освоим.

На начальном этапе главным является создать грамотный контент, вникнуть в его логическую структуру и расставить приоритеты при разработке. Эти три вопроса решаются комплексно. Прежде всего, нужно подумать, на кого рассчитан наш сайт, иными словами, «user forever»![11] Так, издательство работает главным образом с четырьмя группами посетителей:

1) читающая публика, которая забредает на сайт в стремлении узнать что-нибудь о книгах и авторах. Читатели являются одновременно и покупателями, вот еще почему заслуживают обхождения и внимания;

2) авторы – их трудами создается товарная продукция, которой и ведется торговля, приносящая издательству прибыль;

3) штатные работники на вакантные должности – верстальщики, корректоры, редакторы, иллюстраторы и все прочие люди, которые нетленное творение иного автора превращают в книгу;

4) партнеры – книготорговые организации, типографии, библиотеки и т. д.

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

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

Лапидарность при составлении контента главной странички (равно как и некоторых других) – это и великая радость и большое зло для веб-дизайнера. Радость потому, что маленький текст легко и быстро читается и возбуждает интерес, желание продолжить ознакомление с ресурсом. Зло состоит в том, что поисковая система тем быстрее и легче находит ваш сайт, чем крупнее и богаче его контент. Сразу скажу, что эта проблема решается использованием скрытого текста. Дизайнер берет большой кусок текста, объемом около 500 знаков, и вставляет его в открытый html-код главной странички сразу после слова ( тэга) ‹body›. Чтобы этот текст был скрытым, он заключается в кавычки вида: ‹! – здесь ваш текст– ›. На страничке этот кусок не объявится, зато поисковик будет его свободно читать и засчитывать. (Убрав лишнее, возмести ущерб!)

Вопрос: какой контент лучше всего выбрать для скрытого текста? Ответ: наиболее полно отражающий тематику сайта. В случае с издательским ресурсом проблема снимается сама собой: скрытый текст требуемого объема напишет любой редактор, рассказав в этом кусочке о книгоиздательской деятельности вообще и своего издательского дома в частности. Когда приходится работать с лесоперерабатывающим предприятием, у которого в штате нет редакторов, то в скрытый текст можно скопировать куски текста про деревообрабатывающую промышленность, современные технологии лесопереработки, использовав специальную литературу и/или статьи из электронной энциклопедии. Совет: когда копируете статьи из электронной энциклопедии, не забывайте заменять сокращения полным написанием слов. Поисковой системе неинтересен контент вида: «ДАВИД-ГОРОДОК, г. (с 1940) в Беларуси, Брестская обл., на р. Горынь. 7,7 тыс. жит. (1991). Инструмент. пр-во. Возн. в кон. 11 или нач. 12 вв.». Вы думаете, машина поймет эти сокращения?

Некоторые недобросовестные дизайнеры в целях повышения посещаемости своего ресурса вставляют в скрытый контент то, чего и в помине нет на их ресурсе, просто потому, что вставленные слова пользуются наибольшим интересом у юзеров: «скачать бесплатно», «мелодии на мобильник», «голые девушки», «секс без перерыва» и т. д. Поступать так не следует, поскольку поисковикам подобное жульничество сильно не по душе. Иными словами, если обещаете гостям показать голую девушку, убедитесь, что она действительно красуется хотя бы на одной из страничек вашего ресурса.

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

Итак, с контентом мы определились: это должно быть небольшое приветствие, которое объясняет посетителю, куда он попал и что здесь может получить. Неброские, но вместе с тем удобные, эргономичные элементы навигации подсказывают, где и как можно получить обещанное. Рассмотрим несколько готовых решений по оптимизации навигации, которых следует держаться в большинстве случаев (исключение можно делать для персональных сайтов или сайтов с необычным контентом и потому с необычной навигацией).

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

> «Об издательстве» – оно и правильно, чтобы никто не подумал, будто перед ним какие-нибудь шарлатаны, пригревшиеся на книжном бизнесе. Здесь рассказывается, сколько издательству лет, какие награды и заслуги оно имеет, чего добилось за годы своего существования, на чем оно специализируется, а также немного сухой юридической информации – организационно-правовая форма и иные выдержки из Устава;

> «Наши книги» – знакомство с продукцией чрезвычайно важно, поскольку фирма познается по товарам ее, равно как лев – по когтям;

> «Авторам» – тоже верный подход, поскольку чем больше авторов, тем больше продукции хорошей и разной;

> «Магазин» – то есть электронный, если таковой имеется. А если нет, то ссылке придается вид «Магазины» и здесь указываются адреса и телефоны книготорговых организаций, осуществляющих сбыт продукции данного издательства;

> «Контакты» – раздел представляет всех контактных лиц издательства, готовых к общению с вами по любому вопросу.

В меню второго уровня могут и должны значиться следующие, менее важные в плане влияния на доходность пункты:

> «Приветствие директора» – открытое письмо директора посетителям ресурса и друзьям издательства. Большой пространный документ, полный слоганов и теплых слов, вроде американского The President’s Letter, который никто и никогда читать не станет, но который все посмотрят. Приятно все-таки. Размещать эту вещь на главной страничке нелепо;

> «Вакансии» – вакантные должности издательства. Сюда не следует относить авторов, но только верстальщиков, менеджеров, корректоров, уборщиц и прочий персонал. Автор – это особый человек, так что, по традиции, пишущей братии выделяется отдельная ссылка;

> «Партнерство» – информация для деловых партнеров: финансовая, юридическая, контактная и прочая, какая только уместна;

> «Наши баннеры» – здесь, после предложения обменяться рекламными картинками-баннерами, при клике на который можно перейти на другой ресурс. Здесь же даются баннеры для скачивания и коды к ним;

> «Ссылки» – сайт предлагает обменяться ссылками с другими заинтересованными ресурсами;

> «Скачать» – халява от издательства: картинки и тексты (обычно: отдельные главы из собственных книг), которые могут живо заинтересовать гостей.

Главное меню рекомендуется располагать вверху странички, под главным рисунком и логотипом, причем желательно все пункты разложить в строку. Второстепенное меню встраивается сбоку, обычно слева. Главное меню иногда, при развитой структуре сайта, стоит снабдить выпадающими, или всплывающими подменю (см. рис. 10). Единственный минус подменю состоит в сложности реализации, поскольку для этого требуется писать скрипты, то есть команды. Но зато и публику удастся порадовать, поскольку выпадающее подменю повышает скорость работы с сайтом. Например, писателям очень удобно пользоваться меню, в котором пункт «Авторам» разбивается в подменю на три подпункта: «Постоянным авторам»,[12] «Новым авторам», «О наших авторах». Заметим, что пункт «О наших авторах» должен присутствовать и в подменю к пункту «Об издательстве»: хорошие авторы – это живая реклама.

Рис. 10. Выпадающее подменю (образец)

Далее следует упомянуть о сквозной навигации, которую по-другому называют «хлебные крошки»: когда путеводные ссылки «рассыпаны» по тексту в нужных местах и позволяют свободно менять старую тему на смежную новую, смотря по интересам читателя. На «хлебные крошки» похожи якоря, то есть ссылки, размещенные внутри одной страницы. Дополняют навигацию ссылки на документы «по теме», такие ссылки уводят на соседние сайты. Размещать такие ссылки в первом абзаце текста да еще на главной страничке несколько нелепо. Гость еще толком не познакомился с компанией и не понял, куда именно попал, а его уже уводят, как потом выяснится, совсем в другую сторону.

В добавление к сказанному назовем особый вид навигации – пейджинг, то есть перелистывание страничек. Пейджинг пригоден для ориентации в большом и сложном тексте, который заведомо представляет интерес для внушительной части вашей аудитории. В навигационной панельке для листания страниц выдеяются в оптимуме две строки, которые имеют вид:

«ПЕРВАЯ, ПРЕДЫДУЩАЯ, СЛЕДУЮЩАЯ, ПОСЛЕДНЯЯ» – верхняя и

«Вы на ‹…›-й странице. Все страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10» – нижняя. И рад бы сделать удобнее, но это предел вирутального комфорта.

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

Как видно, главная страничка – одна из самых проблемных на сайте, поскольку она является его лицом и визитной карточкой. Встречают по «домашней», если перефразировать известную пословицу. Обратим внимание на тот неприятный момент, что последующие странички не должны быть похожи на главную визуально, хотя стиль и основные конструкционные элементы всегда требуется сохранять. С сохранением стиля все ясно – единство графики обеспечивает целостность восприятия ресурса. Но вот требование различий немного смущает. Однако если крепко подумать, то данное требование покажется справедливым. Читатель, кликая на ссылки, должен ясно видеть, что перешел на новую страничку. Если он перепутает странички, то решит, будто сайт «не работает», и благополучно покинет ресурс. И уж тем более упаси вас Господь сделать страничку «О компании» точной копией домашней странички! Половину посетителей вы потеряете окончательно и бесповоротно.

Чтобы получить хорошую страничку, полезно чертить эскизы от руки или на компьютере. Электронные эскизы можно готовить непосредственно в Web Page Maker, ибо он словно специально создан для веб-экспериментирования. А можно и в CorelDraw, поскольку это одинаково удобно и даже имеет некоторые преимущества. Такой эскиз можно экспортировать в файл растровой графики для распечатки, задав необходимые параметры, тогда как с эскиза из Web Page Maker нужно сначала сделать скриншот (снимок с экрана, выполняется нажатием на клавишу Print Screen, сокращенно PrtScr), а потом еще вставлять этот скриншот в Фотошоп (Crtl + V) и обрабатывать там. На рис. 11 вы видите эскиз, выполненный в Кореле. На лицо явные ляпы при симпатичном, в целом, дизайне:

> слишком много графики – причем графики на главной страничке, отчего ждать ее загрузки, видимо, тридцать лет и три года;

> надписи не кликабельны, жать приходится на картинки, а это плохо для сайта (особенно если навигационные картинки скверно грузятся);

> наряду с активными соседствуют неактивные иллюстрации, что сбивает с толку посетителя;

> нет ни имени URL, ни намека на контактную информацию, ни даже традиционной ссылки «Контакты» (я предположил, что гость, кликнув на нужную рубрику, увидит сразу контактную форму и e-mail, но думать за других – не самое благородное занятие);

> текст неотредактирован (въедливый посетитель заметит досадную опечатку «ПРОДКТОВ» и вознегодует: ладно бы ошиблись в большом куске из инструкции к какой-нибудь кофемолке, так нет – допустили ляп в крохотном контенте, причем на главной страничке!).

Рис. 11. Эскиз сайта, выполненный в CorelDraw

Несомненные плюсы эскиза, которые мы сохраним в новом варианте сайта:

> классное, запоминающееся название;

> удачный логотип;

> эффектное обрамление текста, обеспечивающее запоминаемость сайта;

> верно подобранные украшательские иллюстрации, делающие очевидной тематику ресурса и интригующие посетителя (романтика, удовольствие, ночная жизнь).

Стоит ли расстраиваться? Отнюдь, радоваться надо, так как на ошибках учатся. Не пугайтесь, если у вас поначалу что-то пойдет не так! И не стремитесь к полному идеалу, ибо идеальность – понятие относительное. Что хорошо для одного ресурса, то будет погибелью для другого. Не питайте иллюзий, не корите себя, не повышайте планку день ото дня: за те два дня, что вы читали эту книжку, вы и так добились невероятно многого. С чем вас и поздравляю. А чтобы добиться большего, нам придется познакомиться поближе с языком HTML-программирования.