Правило, которое будет рассказано ниже в этой статье, можно было бы смело вынести на первую страницу этого сайта — такое оно важное. Но! Незадача — мое любимое число — девять — и я не собираюсь в связи с этим изменять количество «простых правил» еще на одно. Посему предлагаю вам ознакомиться с текстом данной заметки и выписать его на прилипающую бумажку, которую вы с легкостью прилепите на ваш монитор.
Во всех ныне известных мне броузерах существует воистину мощная опция. Только почему-то многие о ней не знают или забывают. Казалось бы, один лишь флажок — зато каков эффект! Обычно, он находится в свойствах броузера. На иллюстрации представлен вид на этот флажок в MS IE 5.0. При очень большом желании вы найдете нечто подобное во всех графических «смотрелках» веб-страниц.
Для чего предназначен сей флажок? Функция его — разрешать или запрещать загрузку всех изображений, расположенных на веб-странице. По-моему, использование его в домашних условиях очевидна: скорость низкая, провайдер злой, интернет пока не бесплатен, время ограничено оставшимися пятью минутами… Короче, нужно получить страницу быстро и весело. Да и зачем постоянно созерцать те картинки, которые вы уже сто (а то и больше) раз видели? Еще одна полезная вещь получается, если флажок этот снят: не показываются баннеры…
Вот когда изобретут флажок, отключающий еще и flash-ролики, броузеру, его внедрившему, цены не будет. Его будет уже не стыдно и продавать — но в мире, полной «халявы», этот номер не пройдет.
Самое интересное то, что броузер, при выключенном флажке, не загружает и, естественно, не показывает абсолютно все картинки — будь то обычное изображение или фоновое. Вот как раз по поводу последнего мне бы хотелось поговорить с вами, дорогие читатели.
Многие разработчики сайтов (а настоящими дизайнерами таких людей назвать нельзя) забывают, что не у всех широкий интернет. Поэтому они автоматически забывают и про этот флажок. И тогда… начинается полный беспредел на сайтах, ими созданных. Почему-то темный текст находится на темном фоне, или совершенно наоборот, когда светлый текст покоится на светлом же фоне. Особенно внимательно нужно подходить к этому вопросу, когда у вас часть страницы отведена на меню (соответственно, с более темным фоновым изображением), а другая часть — основному содержимому, помещенному на светлом фоне. Схема, конечно, зависит от вашего конкретного сайта, но суть остается той же.
Тут стоит отметить, что даже с включенной графикой, страницы, если они умело сделаны, отображаются намного быстрее, чем графические элементы. Поэтому если вы где-то вставили темное фоновое изображение, сделайте (сюрприз! ручками) поправку в коде страницы, прописав там темный цвет заливки для этой области, и, естественно, светлый оттенок основного текста.
Здесь мне бы очень хотелось привести пару примеров, просто выключив графику и сохранив понравившиеся мне скриншоты в виде иллюстраций к статье. Но — я не буду этого делать, потому что не хочу получать ворох претензий от горе-разработчиков. Но, поверьте, у меня есть на примете пара-тройка сайтов, имеющих как раз такой вот недостаток. Даже не недостаток — слово неподходящее… Я бы назвал это «косяком», причем огромных размеров. Для удовлетворения любопытства вы можете сами найти этот флажок в своем броузере и пройтись по своим ссылкам в закладках. Уверен, что хотя бы на одном сайте вы встретите подобное. Лишь бы это был не ваш собственный сайт!
Да, кстати, учитывайте это правило, когда будете создавать свои сайты. Гораздо проще изменить что-то в исходном коде страницы, еще при написании первой из них. Особенно стоит обратить внимание на теги <BODY>, <TR>, <TD>.
P.S. На сайте компании Microsoft расположены удобные и совершенно бесплатные утилиты для их броузера, позволяющие не лезть в настройки, а выбрать всего лишь одну команду в меню. Я пошел дальше — и вытащил эту команду на панель ссылок, тем самым создав для себя удобную функцию по избавлению себя от ненужного мусора.

Вопрос в заголовке очень спорный — кто-то, например, Якоб Нильсен, утверждает, что это все — лишь изыски, никому не нужные. Кто-то, например, все художники (кроме абстракционистов — хотя, и это спорный момент), говорят то же самое, но с точностью до наоборот. Что думают конечные пользователи, или, если угодно, зрители шедевров графического дизайна?
Самое забавное то, что и они делятся на две категории — тем, кому дизайн в виде дизайна нужен, и на тех, кому безразлично. К какой категории относите себя вы сами?
Такие, как вышеупомянутый Я. Нильсен, твердо уверены: пользователям должно быть удобно. Удобно при их доступе к искомой информации. Согласен — с этим не поспоришь. Но удобство — это тоже своего рода дизайн — дизайн с целью предоставления этого удобства, а не ради дизайна как такового.
Конечно, Сеть — это прежде всего информация. Информация бывает разной — это практически все изучали в школе. Но вот подаче информации не учат в школе — обидно. А надо бы, по-хорошему.
Можно, для удовлетворения любопытства, пройтись по наиболее информативным порталам — начиная от электронных версий печатных газет, и заканчивая элементарными online-каталогами продукции какой-либо фирмы, производящей электронику. В первом случае все понятно — тонны информации поджидают нас на их сайте. А во втором — различные данные, технические характеристики продукции будут неизменно представлены в текстовом виде. Здесь акцент нужно сместить на другое: как эта информация представлена. Либо же это просто текст, готовый для печати на принтере, либо же это изысканный и ультраизящный дизайн, в котором эти данные и покоятся.
Разработчику сайта всегда бывает сложно — очень трудная задача выбрать тот стиль подачи информации, который будет уместен в рамках этой информации и этого сайта. Ведь не сделаешь же портал какой-нибудь газеты в стиле «Привет, Китти!» (хотя, с другой стороны, как на это посмотреть — вот вам наглядный пример сомнений дизайнера; см. также страницу Рекомендую для поиска книги, в которой этот и другие стили рассматриваются.)
В любом случае, выбор, как и всегда, за разработчиками. Их цель — сделать прежде всего удобно, а уж потом красиво. И сделать нужно, при всем этом, правильно. А уж пользователи обязательно покажут вам, удобно и красиво ли это, или нет. Хотя бы посредством записей в гостевой книге.

В самом начале веб-дизайнерской мысли, разработчики сайтов постоянно ставили ссылки на сайт всемирно известной корпорации Б. Гейтса, в частности, на страницу, где можно было получить готовую версию их броузера. Оформлялись эти ссылки по-разному, но суть их была в следующем: «не входи, пока у тебя нет нужного нам броузера».
Возможно, именно поэтому сайт Microsoft зашкаливает по рейтингам поисковых серверов до сих пор.
Потом был период молчания. Дизайнеры наконец-то осознали, что кроме «великого и могучего», есть еще и другие конкурентноспособные броузеры, и перестали ставить ссылки. Как перестали ставить ссылки вообще. Они думали, что подборка ссылок на другие, подобные сайты по тематике, не достойна присутствовать на их портале. Сие есть неправильно, ибо тогда возникает абсолютно логичный вопрос: «А для чего вообще нужен интернет?»
После этого периода, ссылки (ура!) вернулись на сайты. Но! Разработчики стали уделять им большое внимание, дабы в их «списках избранного» были только проверенные и надежные ресурсы. Интернет приобрел второе рождение, без ссылок на известные броузеры, но со ссылками на хорошие дополнительные источники информации. Да и пользователи, надо отдать им должное, стали ценить те сайты, на которых есть подчеркнутые слова, ведущие на хорошие ресурсы.
Это был краткий экскурс в историю синусойдного существования гиперссылок. Теперь о реальности. Надеюсь, вы извлекли урок из вышенаписанного, и поняли, что ставить ссылки на другие сайты нужно, но надо делать это с умом. Конечно, на первой странице ставить ссылки — по меньшей мере, глупо. Но кто мешает сделать еще одну страничку, на которой вы перечислите всех, кто вам нравится? Никто.
Помните только, что ваша работа по подбору ссылок, их соответствие тематике вашего сайта (конечно, если это не сайт о вашей кошке — хотя, и там могут быть ссылки на другие сайты о кошках), играет некоторую роль при оценке вашего портала в глазах ваших зрителей.
Не исключение и этот сайт — у него тоже есть страница избранного. Эта страница имеет и соответствующее ей название — «Рекомендую». Там для закуски перечислены книги, которые так или иначе помогают мне в работе; более того, они могут помочь вам. Кроме этого, на десерт — список из некоторого количества ссылок на известные (и не очень) порталы, где можно найти массу полезной информации по веб-дизайну и юзабилити. Да и не только в этих областях — многие сайты предлагают вашему вниманию еще и другие материалы. Какие? Зайдите туда, и сами все узнаете.
Кстати сказать, некоторые поисковые сервера определяют рейтинг вашего сайта исключительно по тому, насколько часто ссылка на ваш сайт встречается на других порталах интернета. Не это ли тот стимул для создания хороших, информативных и полезных сайтов для ваших пользователей?

Вот есть у вас сайт. Вот есть у вас ссылка на гостевую книгу. Вот там иногда кто-то появляется и пишет вам различные хвалебные (и не очень) послания. А вы их читаете?
Разумеется, их надо читать. Пусть даже не очень лицеприятные, они отражают мнения народа о вашем ресурсе. Насколько он полезен, информативен, красив в конце концов. Даже ради того, чтобы потешить свою любовь к себе.
Помимо «гостевух», существует еще множество различных способов получения сведений от ваших зрителей. Это могут быть и форумы, и голосования, и опросы (в свободной форме) и так далее. И все они требуют вашего внимания. Во-первых, вам нужно периодически (и как можно чаще) их прочитывать и кое на что даже отвечать. Во-вторых, нужно как-то следить там за порядком и убирать старые (и давно уже закрытые) темы. В-третьих, нужно оценивать релевантность записей по отношению к тематике портала, безжалостно удаляя все записи, типа «Осел был здесь».
Еще один вид интерактива — комментарии пользователей на какой-либо материал. Очень полезная штука, особенно если нужно собрать мнения по какому-то конкретному вопросу. И за этими записями тоже нужно следить — удалять старые и слишком матерщинные.
Но! Это вовсе не значит, что вы должны удалять все записи, которые так или иначе окрашивают ваш сайт в светло-коричневый цвет. Такие записи просто должны быть — ну не бывает идеальных проектов, которые нравятся всем!
Теперь о технике. Если у вас собственный сайт, вами разработанный «от и до», включая все эти интерактивные примочки, вам будет довольно просто создать себе страничку, в которой вы один будете разделять и властвовать. Такая комната называется «администраторская», вход исключительно по виртуальным пропускам, приватная — исключительно для вас. И уж там-то вы развернетесь на полную, удаляя все ваши драгоценные комментарии.
А как быть тем, кто разработал сайт «от и до», но не имеет возможности создать свои интерактивные штучки? Регистрироваться на бесплатные счетчики, гостевые книги и форумы. В настоящее время в интернете полно таких ресурсов, предлагающих все это бесплатно (или почти бесплатно, требуя лишь показа их вездесущего баннера — а что поделаешь?) В любом случае, на таких вот условно-бесплатных форумах-гостевухах существует возможность запереться одному в приватной комнатке и подумать над смыслом жизни. Как правило, там работают еще и специальные программы-фильтры, которые так или иначе занимаются модерацией ваших записей, отсеивая уж слишком матерные…
Короче, «фишка» такова: нужно следить за своими ресурсами, какими бы они не были. А если нет возможности следить — ставьте просто ссылку на ваш почтовый ящик. Дешево и сердито. А кому уж очень нужно будет донести до вас свою мысль, обязательно вам напишет. Пускай это и неудобно — открывать почтовую программу, писать там сообщение, потом его еще и отправлять — все равно напишут. И будут жутко ругаться по поводу отсутствия элементарной гостевой книги. И будут правы.

Решил я посвятить отдельную статью созданию сплэш-страниц. Многие, признайтесь, любят их делать только для того, чтобы показать, что они умеют это делать. На самом деле, многие делают это неправильно. Как те пчелы, которые делают неправильный мед.
Итак, сплэш-страница — это своего рода «входная дверь» вашего портала. Иногда, дверь, натыкаясь на которую, пользователь захлопнет окно броузера. Иногда — стильная заставка, привлекающая зрителей и побуждающая их к дальнейшему просмотру вашего сайта. Зависят эти два «иногда» исключительно от вас. Либо вы сделаете как нужно, либо нет.
Первый момент в создании заставок — их целесообразность. Многие говорят, что они на фиг не нужны, мотивируя свои слова тем, что это лишние «килограммы» вашего трафика, лишний мусор на сайте и прочее. Другие же двумя руками «за» эту страницу; она им нужна для того, чтобы сразу определить тематику сайта (и вовремя уйти с того сайта, который им сейчас не нужен.)
Второе, и чисто техническое — сайт, посещаемый одним и тем же человеком несколько раз, скажем, в неделю. Стоит ли показывать заставку вашему зрителю во второй раз? Однозначно, нет. Стоит лишь сделать ссылку на эту страницу и предложить пользователю самому решить, смотреть ли в n-ный раз вашу анимацию (кстати сказать, это необязательно анимация. Есть великолепные заставки без грамма анимации. Просто и со вкусом) или нет.
Очевидно, что заставку на второе пришествие пользователя надо спрятать. Как? Это ваша техника. Большинство правильных сайтов (включая этот сайт) запрещают автоматическое отображение сплэш-страницы с помощью «печенья» — файлов cookies, мирно хранящихся на вашем компьютере. Здесь есть один камень преткновения: а если пользователь запретил сохранение бисквитных файлов? Что ж, его проблемы. Будет каждый раз, стучась на сайт, попадать не сразу в коридор, а на коврик с надписью «Добро пожаловать» (и всякий раз вытирать ноги о ссылку.)
Третий момент: ставить ссылку на «коридор» — первую страницу сайта — или нет? Однозначно — да. Даже если ваш зритель еще не «озаставился» — ему надо дать возможность пропустить просмотр и перейти непосредственно к содержанию того, что находится под глянцем обложки. Его нежелание смотреть вашу заставку может быть вызвано многими причинами, среди которых — медленный доступ к Сети (см. также статью Время загрузки.)
Четвертый момент: размер сплэш-страницы. Не делайте ее слишком большой. Чем меньше, тем лучше (желательно, если вы хотите заинтриговать пользователя обложкой, нужно сделать заставку столь маленькой, чтобы она загрузилась еще до того, как он обнаружит ссылку «пропустить заставку» внизу вашей страницы. Тогда — гарантировано — он заинтересуется и просмотрит анимационный ролик до конца.)
Пятый момент — техника. Где создать заставку? Отвечаю — в вашей голове. Прежде всего, как и при создании сайтов (см. также статью Рисуем сайты), должна родиться идея. Ее вы перенесете в любое техническое средство за считанные часы. Для удобства же (и к вопросу «Причем тут лист бумаги и карандаш?») можно набросать основные идеи интриги вашей обложки (так их потом проще будет рисовать и воплощать в жизнь.)
Для создания заставок подойдет все, что есть у вас среди программ. Это может быть и Photoshop, и Flash! (см. также статью В поддержку нового) и еще куча других. Минимум заставки можно сделать даже в блокноте — создать простую страницу, в середине которой поместить логотип сайта. Или не в середине — его можно выровнять как-нибудь оригинально. Чем мне нравится Flash? Тем, что ролики, созданные с его помощью: а) занимают мало места и, как следствие, быстро загружаются; б) растягиваются и сжимаются как угодно без потерь качества. Для примера, заставка на этом сайте: занимает файл анимации 3,51 КБ, файл страницы «весит» 1,77 КБ (итого, если я правильно учился в школе, 5,28 КБ.) Если еще вспомнить рекомендации по размеру обложек, получается вообще «полный ништяк»! И все это, заметьте, абсолютно не зависит от размеров экрана пользователя.
Шестой момент — автоматический переход на главную страницу без воли пользователя через какое-то время. Дело в том, что ваш зритель может набрать адрес вашего сайта и пойти покурить. А заставка так и будет висеть на мониторе. Согласитесь, обложка не столь важна пользователю — он ведь идет к вам за полезной информацией, а не за красотами. Так что, извольте сделать автоматическое перенаправление на главную страницу сайта.
Вот, в принципе, и все о заставках. Надеюсь, больше к этому вопросу возвращаться не придется.

Скорей всего, эту статью вы читаете, находясь в новом дизайне проекта «слово». Как не заметили? Неужели все поменялось так, что моих стараний вовсе и не видно? С одной стороны это даже хорошо.
Итак, прошло уже несколько сот тысяч секунд с момента вашего появления в Сети с собственным «лицом» — сайтом о вас, вашем коте или еще о чем-нибудь. И вы решаетесь изменить дизайн страниц портала кардинальным образом. Или не кардинальным — все зависит… да просто все зависит. В любом случае вам потребуется некоторый особый настрой ваших мозгов на то, чтобы создать нечто, что доселе было неизвестно публике. Берите лист бумаги, карандаш (см. также статью Рисуем сайты) и начинайте набрасывать очередной шедевр.
Тут можно столкнуться с камнем из той русской сказки: направо пойдешь — сайт сделаешь, налево пойдешь — дома прибью (твоя Василиса.) Шутка. На самом деле, можно все изменить так, что потом долго будете сами искать какой-то элемент сайта (как в анекдоте про какого-то абстракциониста, который захотел изменить цвет глаз натурщицы, но забыл, где он нарисовал глаза.) А можно внести лишь некоторые поправки к уже существующему дизайну и спокойно лечь спать. Так сказать, обновить, сделать косметический ремонт — как хотите. Но, как известно, и косметику надо накладывать с умом.
Вот, к примеру, сей портал, находящийся у вас под указателем «мыши». Казалось бы, ничего нового я не сделал. Кардинально страницы не изменились. Но предыдущий вариант (увы, но вы можете взглянуть на него лишь в виде скриншота в одной из предыдущих статей — Linux и мебель), выполненный мной почти в монохромной небесно-голубой палитре, заиграл новыми цветами благодаря чудесному атрибуту BgColor тега <TD>. Как видите, ничего сверхестественного.
Конечно, это только внешне; но внутри сайт сильно изменился. Если можно так сказать, изменилась философия его работы, основная концепция. Но слишком вдаваться в технический аспект я не буду — здесь не та область для таких рассуждений. Факт остается фактом — что-то изменилось.
Теперь поговорим о вашем сайте. Главное, что должно остаться от прежнего сайта — конечно же, удобство его использования. Если такового не наблюдалось, нужно срочно менять подход к организации и представлению информации на вашем портале (для проверки на юзабилити посадите перед монитором человека, мало общающегося с компьютером в целом, и попросите его найти что-то важное, с вашей точки зрения, на сайте или заказать какую-нибудь услугу через ваш портал. Если кампания провалилась — ваш сайт, мягко скажем, был неудачен.) Проще говоря, начните с самого начала.
Если же с юзабилити «все в ажуре», продолжайте работать над тем, чтобы было красиво, понятно и все еще при этом оставалось удобно. То есть, не наделайте слишком всего: слишком красиво, слишком завитиевато. Должно быть слишком удобно, но на должном уровне — не уподобляйтесь консультантам в любой заштатной лавке, подбегающим к вам с единственным выученным вопросом «Чем могу помочь?». Деньгами, отвали!
А дальше уже начинается простор для полета мысли — косметический или капитальный ремонт сайта. В любом случае, нужно делать его так, чтобы потом было не до слез обидно получать негативные отзывы с просьбами о том, чтобы вы высылали пакетики вашим же зрителям. Подумайте и о себе, любимом: насколько проще будет вам обновлять сайт, добавлять новые и удалять старые страницы.
Еще подумайте о том, правильно ли вы все делаете. Проверьте, если у вас темное фоновое изображение (ну, вдруг, если вам так захотелось его все-таки влепить), прописаны ли в коде страницы темный цвет фона и светлый оттенок текста (очень раздражает, когда сидишь с выключенной графикой в Сети — приходится постоянно искать ссылку на гостевую книгу, дабы написать автору сайта свои впечатления.) Желательно, если вы вспомните об этом еще в процессе создания только первой страницы — потом будет поздно, да и жутко неудобно изменять все страницы из-за такой мелочи.
Заодно, в процессе переноса старых материалов в новое место гнездования, проверяйте их актуальность и выкидывайте безжалостно то, что уже не релевантно текущим событиям. Если у вас все еще там поздравления милых дам с праздником весны милленниума — этой страницы более не должно быть на вашем портале. Да и вчитывайтесь в тексты — вычитывайте возможные орфографические и грамматические ошибки и опечатки.
Как видно, при любом ремонте сайта, можно, если правильно и с умом подойти к самому процессу, извлечь массу положительных эмоций. Ваша задача — научиться радоваться тому, что вы умеете делать правильно то, что вы делаете.

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

Отдыхать глазами здесь.

Теперь обратимся к невидимой части документа. В следующей части рассмотрим CSS и Charset.
Текст, свободный от установок дизайнера — достижимая вещь, если рассматривать ее с умом. Так, нужно помнить, что не все зрители вашего сайта обладают стопроцентным зрением и большим монитором. Нужно помнить и о тех, кто все еще сидит перед своими четырнадцатью дюймами стекла с очками на носу. Для всех них, тем не менее, существует одно правило: значимый текст должен быть свободным. Я имею в виду то, что не надо прописывать в таблице стилей какие-нибудь значения для отображения текста — пусть пользователь сам настроит ваш сайт под свои предпочтения.
Для примера обратитесь в настройки вашего броузера с целью установить размер шрифта (по вкусу.) И полюбуйтесь на этот сайт. Тексты статей, содержания и прочих значимых элементов свободны. Не изменяется только меню сайта и еще некоторые маловажные вещи.
Кстати сказать, текст абзацем выше был специально набран мною более мелким шрифтом для выделения. Это особый прием психологии, для тех кто не в курсе. Но вы, конечно же, в курсе, что необязательно это выделение делать каким-то полужирным или курсивом. Оказывается, можно и так.
Второй аспект — набор символов документа (и, как следствие, очередной недостаток различных редакторов, даже включая многие, казалось бы, безобидные.) Именно эти, хм… как бы их поласковее назвать, редакторы вставляют в заголовок HTML-документа строку, подобную <META Http-Equiv=Charset Content=…>. Да все бы ничего, только эта строка сразу же запрещает свободно дышать пользователю. Именно она является тем камнем преткновения, сталкиваясь с которым, некоторые посетители уйдут с вашего сайта, так и не добравшись до основного. Дело в том, что для них это основное просто не будет доступно! Они увидят лишь какую-то абракадабру и захлопнут окно броузера.
Мораль сей басни такова: оставляем свободное пространство на страницах, не пишем CSS для текста и убираем на фиг Charset. И вообще, больше свободного места!

Выражаю огромную благодарность работникам

одной организации, которая не может ответить

на мои послания в течение двух месяцев

за тему данной статьи.

Итак, вы сделали сайт. Вы так тщательно подгоняли все картинки к единому стилю, вымеряя каждый пиксель в течение месяца (года?), что уже и не рады своему детищу. Не потеряйте ребенка вместе с водой! Зачастую, мы можем совершать глупые поступки в, казалось бы, мирных целях.
И вот, наступил долгожданный момент. Вы покупаете время у злого провайдера, раскочегариваете модем и вывешиваете свой портал на всеобщий суд. Естественно, у вас все готово, все страницы в наличии, ошибок 404 не возникнет… И вы, как я вас и учил, оставили все необходимые координаты внизу каждой страницы. Здорово! Добро пожаловать в интернет!
Из того времени, что вам любезно выделил ваш провайдер, у вас осталось пять минут, четыре из которых вы благополучно потратили на получение виртуальной открытки от вашей продвинутой бабушки. И вот — еще одна минута есть, как-нибудь проживу. И все.
Закончились деньги, у провайдера оторвался кабель именно от вашей линии, или еще какая-нибудь неприятная история. Сайт вроде бы как-то там работает, иногда кто-то даже на него заходит. И видит ваш e-mail внизу. Предположим, чисто гипотетически, что какой-то там «мистер Х» заходит к вам. Вот ему понравилось что-то, и он решается на благороднейший, с его стороны, поступок — написать вам письмо. Да не какое-нибудь, а целое благодарственное, — что, вообще, как замечательно, что вы есть, что вы, типа, крутой дизайнер, ну, и так далее (вариант, когда пользователю что-то не понравилось мы не рассматриваем. Хотя и такие казусы бывают.)
И он отсылает вам эту эпопею на шести листах. И она, бедная, доходит до вашего почтового ящика. И лежит она, такая вся несчастная, с грифом «не прочитано» одному Богу известно сколько времени. А многоуважаемый «мистер Х» сидит и переживает по поводу своей «телеги»: понравилась ли она Ему, о великому и могущественному разработчику сего сайта? Прочитал ли Он ее? Ответил ли мне? И вообще, кто виноват и что делать.
А вы? Вы-то что? А ничего. Ждете до следующей получки (стипендии, пенсии, премии — нужное подчеркнуть), когда вы наконец-то, с трепетом, залезете в свой почтовый ящик и соизволите прочитать послания. В итоге, да и в лучшем случае, «мистер Х» будет подпрыгивать, терзаясь в сомнениях, по меньшей мере, месяца два… В худшем — он будет сниться вам в ваших же кошмарах, закидывающий вам злобные письма с угрозами о неразглашении вашего url среди его мамочки. Еще, кстати, не факт, что вы вообще ответите на его опус.
Короче, к чему я веду. Если вы соизволили ставить ссылочку на свой адресок — периодически прочитывайте послания. Если у вас есть гостевая — не поленитесь, зайдите и почитайте отзывы и рационализаторские предложения там. А уж если есть форум — сам всевышний Создатель WWW велел эпизодически там появляться и отвечать на вопросы зрителей.
Будьте отзывчивы!

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


Эта таблица — список наиболее часто используемых символов на страницах в интернете. Некоторые из них явно отсутствуют на клавиатуре, и многие очень часто задают вопросы, типа, «а как мне вставить знак копирайта на мою страницу?» Ответ прост — достаточно знать код этого символа. Согласен, коды выучить невозможно (хотя, некоторые, особо нужные, запоминаются легко. Раз двести напишите ручками — и как миленькие все запомните.)
В чем «фишка» этой таблицы? В том, что ей нужно уметь пользоваться. Во-первых, необходимо желание «не ударить в грязь лицом» перед другими «сетянами», давно уж правильно оформляющими свои тексты. Во-вторых, необходимо терпение и усидчивость, ибо писать таким образом тексты — кропотливая работа. В-третьих, и в самых главных, нужно уметь использовать символы по назначению.
Перенос слов на новую строку
Потому как никто никогда не знает, в какой позиции текста закончится строка, нужно обработать текст таким образом, чтобы на строке не остались: инициалы, цифра года, части составных слов. На строке должно остаться тире. Чтобы слова не переводились на следующую строку, их необходимо прикрепить к соседним словам неразрывным пробелом: &nbsp; или &#160;. Обычно, таким способом привязываются предлоги к словам, к которым они относятся. Тире должно всегда оставаться на строке; для этого, его «прицепляют» к предыдущему слову комбинацией неразрывного пробела и непосредственно кода тире: &nbsp;&#151;. Так, код вида Компьютер&nbsp;&#151; мощнейший инструмент, даст правильное написание фразы «Компьютер — мощнейший инструмент», а тире останется «прилепленным» к слову «компьютер».
О составных словах нужно сказать отдельно. Например, броузер может перенести часть слов «во-первых», «во-вторых» и т.д. после дефиса. Этого допускать нельзя. В HTML давно уже существует парный тег <NOBR>, позволяющий запретить переносы таких слов. Писать нужно так: <NOBR>Во-первых</NOBR>, перестаньте ругаться!. Этому же правилу подчиняется написание номеров телефонов: Наш телефон: <NOBR>12-34-56</NOBR>.
Кстати, о номерах телефонов. В пятизначной системе цифры пишутся парами, начиная со второй: 1-23-45. В городах, где принята шестизначная система обозначения телефонных номеров, пишут цифры в парах по две, разделяя пары дефисом. В семизначной системе три первых числа написаны вместе, а остальные пишутся парами через дефис. Упаси вас Бог написать 123-456 вместо 12-34-56 и 700-0909 вместо 700-09-09!
Немного о кавычках
Во всех иностранных текстах используются «английские кавычки», но ни в коем случае не знаки дюйма (которые вы найдете на клавиатуре.) В русскоязычных текстах используются «лапки» или «елочки». Примеры:
«Лапки» — „фраза“ — &#132; и &#147;
«Елочки» — «фраза» — &#171; и &#187;
«Парные английские кавычки» — “phrase” — &#147; и &#148;
«Одинарные английские кавычки» — ‘phrase’ — &#145; и &#146;
О различных знаках
В тексте могут встречаться различные знаки — копирайт, зарегистрированная марка, торговая марка и т.д. В любом из таких случаев, необходимо использовать специальные символы из вышеуказанной таблицы, а не заменять их чем попало. Так, правильно написать © Михаил Мартынец, нежели (с) Михаил Мартынец. В коде страницы это будет выглядеть приблизительно так: &#169;&nbsp;Михаил&nbsp;Мартынец, и никак иначе.
С вашего позволения, приведу небольшой пример. Хотя он не охватывает всех аспектов, перечисленных на этой странице, вы все равно сможете получить некое представление «по теме».
Оригинал.
№ 11. Чопорный черт в черной шелковой одежонке сидел на жестком диване и пил дешевый желудевый кофе, изредка чокаясь со своим отражением в тяжелом глянцевитом самоваре, стоящем на парчовой скатерти шоколадного цвета. Черт был большой обжора и, несмотря на изжогу и больную печенку, объедался крыжовником со сгущенным молоком. Поев и погрозив своему отражению пальцем, черт, молодцевато встряхнув челкой, пустился танцевать чечетку. Цоканье его копыт было столь сильным, что в цокольном этаже думали, что наверху гарцевала лошадь. Однако черт был не очень искусным танцором и, совершив один не совсем удачный скачок, врезался в самовар и обжег свой пятачок, покрытый мягкой шерсткой. Ожег был очень тяжел. Огорченный черт куцей овцой кинулся к бочонку с мочеными яблоками и сунул в него обожженный пятачок. «Правду говорят, что небереженого бог не бережет», — чертыхнулся черт чертовской пословицей…
© Н. Г. Ткаченко «300 диктантов для поступающих в ВУЗы». — М.: Рольф, 1997. — 384 с.
Исходный код.
&#8470;&nbsp;11. Чопорный черт в&nbsp;черной шелковой одежонке сидел на&nbsp;жестком диване и&nbsp;пил дешевый желудевый кофе, изредка чокаясь со&nbsp;своим отражением в&nbsp;тяжелом глянцевитом самоваре, стоящем на&nbsp;парчовой скатерти шоколадного цвета. Черт был большой обжора и,&nbsp;несмотря на&nbsp;изжогу и&nbsp;больную печенку, объедался крыжовником со&nbsp;сгущенным молоком. Поев и&nbsp;погрозив своему отражению пальцем, черт, молодцевато встряхнув челкой, пустился танцевать чечетку. Цоканье его копыт было столь сильным, что в&nbsp;цокольном этаже думали, что наверху гарцевала лошадь. Однако черт был не&nbsp;очень искусным танцором и,&nbsp;совершив один не&nbsp;совсем удачный скачок, врезался в&nbsp;самовар и обжег свой пятачок, покрытый мягкой шерсткой. Ожег был очень тяжел. Огорченный черт куцей овцой кинулся к&nbsp;бочонку с&nbsp;мочеными яблоками и&nbsp;сунул в&nbsp;него обожженный пятачок. &#171;Правду говорят, что небереженого бог не&nbsp;бережет&#187;,&nbsp;&#151; чертыхнулся черт чертовской пословицей&#133;
&#169;&nbsp;Н.&nbsp;Г.&nbsp;Ткаченко &#171;300 диктантов для&nbsp;поступающих в&nbsp;ВУЗы&#187;.&nbsp;&#151; М.:&nbsp;Рольф, 1997.&nbsp;&#151; 384&nbsp;с.
На сегодня достаточно.
P.S.: На странице webcode.ru/at вы найдете программу-перекодировщик «Автотипографика». Она сделает эту работу за вас, возможно, даже лучше вас… А за рекламу, попрошу авторов сделать мне небольшой презент! Однако, сама эта программа уже есть презент, ибо вручную «перелопатить» тексты для публикации в вебе не представляется возможным.
P.P.S.: Вы все еще хотите писать что-либо для веба?

Что-то мы все абстрактно так рассуждаем по поводу различных приемов и технологий. Давайте обсудим один из важнейших аспектов красивого программирования — о написании кода страниц, о выработке собственного стиля и так далее.
Для наглядности вы можете открыть исходный текст этой страницы и следить пальцем за моими выкладками.
Итак, что мы видим? Прежде всего, все теги набраны прописными буквами, например, <HTML>. Во-вторых, все пары атрибут-значение прописаны строчными буквами, за исключением первых символов слов, которые набраны прописными буквами. В третих, все находится на своих местах и все теги, требующие закрывающих, закрыты (для того, чтобы следить за этим, необходимо иметь хороший редактор или хорошую память.)
Теперь по поводу комментирования кусков текста. Многие дизайнеры, шибко считающие себя крутыми, помещают в текст страниц что-то типа «И нафига ты сюда залез» и прочий мусор. Давайте так договоримся: комментировать те кусочки, которые нуждаются в комментировании. Например, вы можете указать, где у вас начинается меню, где основное содержание, а где все это логично завершается вашим копирайтом и счетчиком посещений. Тем более, если вы — начинающий дизайнер (или кодер страниц), такие пометки помогут вам же разобраться с уже готовыми страницами. А если все будут соблюдать эти правила (мечтать не вредно), тогда вам можно будет учиться у других делать подобные эффекты, чуточку подглядев код. А другие комментарии… Заведите для них какой-нибудь блокнот (обычный, из бумаги), и записывайте туда все свои мысли, чувства, ощущения. На здоровье.
Еще одно главное правило — обязательно прописывать три атрибута при вставке изображений. Помимо обычного Src, ради Бога, указывайте размер картинки (Width и Height для ширины и высоты изображения соответственно) и строку альтернативного текста Alt. Причем делать это нужно с умом: в атрибуте Alt не пишите размер картинки в «килограммах», а укажите лучше то, что в действительности изображено на картинке. Если там «зашит» текст — напишите его в Alt, если там фотография вашего котяры, напишите об этом. Пользователь, отключивший отображение графики в броузере, увидев этот текст, обязательно решит для себя, стоит загружать картинку или нет. Для картинок же, которые вы вставили на странице только ради того, чтобы украсить ее внешний вид или как-то подпереть разъезжающиеся ячейки у таблицы, писать что-либо в Alt не нужно.
Теперь прокрутите иллюстративный блокнот (если вы крутите что-то еще, вы явно обратились не по адресу) до того места, где начинается текст данной статьи. Посмотрите, как сделан текст: с одной стороны, его можно прочитать, приручив свои глаза отбрасывать определенные последовательности символов. С другой стороны, не понятно, для чего было так «коверкать» текст, чтобы он стал абсолютно нечитабельным в блокноте.
Совершенно верно подмечено, ибо текст этот был специально переработан для того, чтобы он соответствовал правилам отображения печатных текстов. К сожалению, не во всех источниках встречается подобное — текст набирается кое-как, не учитываются правила русского языка и типографские приемы верстки. Особенно раздражает, когда длинное тире переносится на новую строку… Это — просто край, когда хочется захлопнуть книгу, журнал, газету, сайт.
А теперь подумайте и скажите, реально ли переделать вручную текст статьи, чтобы он соответствовал этим правилам (правила будут опубликованы в одной из следующих статей с подробным объяснением, почему и как)? Мой ответ — нет. Есть множество утилит, разработанных не только нашими умелыми программистами, но и их зарубежными аналогами. Они сами все переводят куда нужно, оставляя вам приятный процесс сохранения файла и опубликования его в Сети. При желании и наличии правил, вы сами можете написать подобную программку на любом доступном вам языке. Главное в этом процессе конвертации текста в веб-текст — понять технологию самой конвертации.
Теперь вам осталось решить, какой стиль написания исходников выбрать, и использовать его в свое удовольствие. Здесь основная идея заключается в том, чтобы выработать свою собственную стратегию написания всех этих тегов и атрибутов вкупе с их значениями, понятную и удобную для последующего редактирования. А если вам будет понятно то, что вы пишете, то другие уж как-нибудь приспособятся. При острой необходимости.

Ладно. Хватит уже склонять различные новые технологии интернета на все лады. Пора уже поговорить и об их неоспоримых достоинствах. Список «новья» возглавляет Flash. Но какой версии? Сейчас повсеместно распространена пятая. Четвертая версия встречается реже из-за своей несовершенности, морального устаревания и бедной поддержки программирования. Шестая же, напротив, пока не распространена из-за своей нераспространенности (пардон за каламбур.)
Версия 5.0 от фирмы Macromedia предоставляет богатейшие возможности по созданию действительно интерактивных роликов различного характера — от баннеров до полноценных навигационных меню и прочего. Нужно сказать, что страницы, содержащие в себе объекты flash смотрятся очень и очень прилично (здесь все зависит от дизайнера. Как известно, если руки растут не оттуда — это ноги.) Есть в Рунете пара сайтов, которые лично мне действительно нравятся именно из-за flash-объектов.
Позвольте лирическое отступление. Помнится, в поддержку какой-то очередной акции, корпорация Coca-Cola сделала в интернете сайтик, ничего стоящего из себя не представляющий, но вот играться с flash-мультиками на странице было ой какое удовольствие! Сейчас мое сердце неровно дышит к сайтам московского ЦУМа (студия Лебедева) и красноярского мультиплекса «Луч» (студия Maxsoft). На этих сайтах с помощью Flash были сделаны схемы внутреннего убранства зданий, с расположением всего, что там есть. Занятная игрушка!
Преимущества flash-технологии очевидны: это и интерактивность, и высокий уровень программирования при помощи встроенного языка, и относительная быстрота загрузки роликов, и мультимедийность, и богатство инструментов и приемов редактирования. Кроме этого, flash изначально ориентировался для веба, а уж потом для прочих вещей, как создание элементов интерфейса и другого. Так, например, делая новый дизайн своей студии, я использовал flash не по прямому назначению — все элементы интерфейса сделаны в нем (логотип, название рубрик.) Хотя, еще в своей работе я использовал обычный Paint из комплекта операционной системы…
Вообще говоря, продукты от Macromedia мне нравятся. Что нельзя сделать в том же Photoshop от Adobe (или что там сделать можно, но очень и очень трудно), можно запросто сделать во Flash. Впрочем, наоборот тоже работает. Но кое-каких функций в этой программе явно не хватает. И этот недостаток приходится восполнять в пресловутом Photoshop'е.
Выбор в любом случае остается за вами, дизайнеры. Лично мне нравятся flash-ролики, но только тогда, когда у меня есть настроение поиграть с порталом, мною просматриваемом. В остальное же время я выбираю те сайты, которые не поразят меня до глубины души многокилометровой анимацией и неожиданными сюрпризами.

Давеча лазил я, значит, по интернет-ресурсам и натолкнулся на очень поучительный сайт (рекламу им делать не буду — бессмысленно.) Вся его особенность заключается в том, что руководители сего проекта предлагают купить шаблон для сайта, основываясь на свой вкус, страх и риск. Представляете?
Вы можете спросить, чего же тут особенного (если у вас не возникает подобного вопроса, дальше можете не читать. С вами все понятно.) Особенность заключается в том, что руководство данного портала намеренно сделало централизованную помойку, ибо никто из дизайнеров (в какой-нибудь степени уважающие себя) не станет отправлять им готовый шаблон. Портал можно было смело озаглавить “великая свалка Рунета”, и обеспечивать всех желающих за деньги получать подобный хлам.
Объясняю ситуацию. Во-первых, уважающие себя дизайнеры не отдадут свои сайты, пускай даже не проданные в свое время потенциальным заказчикам. На последних они, по меньшей мере, обидятся, но прототипы чего бы то ни было оставят себе в каком-нибудь каталоге своего жесткого диска. Для чего? Ведь именно этот вопрос и сподвиг авторов проекта создать ресурс. Рассказываю: чтобы впоследствии они смогли на основе своего же дизайна (ни у кого не украденного) сделать новый шедевр, порою, даже лучше прототипа.
Во-вторых, представьте себе потенциального заказчика этого сайта. Он заходит туда, выбирает на свой вкус прототип, оплачивает его и прыгает от счастья, что так легко отделался. На самом деле, он покупает себе кучу ненужных проблем, начиная от дальнейшего заполнения этого шаблона своим материалом, и заканчивая размещением сайта в Сети (пусть даже своего предприятия на два компьютера — не важно) и его поддержкой. И пусть даже он свалит работу по набиванию текста своей секретарше, а размещение переложит на хрупкие плечи системного администратора, в кулуарах его конторы его будут склонять не самыми приятными словами.
В-третьих, вернемся обратно к дизайнеру. Он-то, бедолага, сплавит свой прототип (который он в свое время так тщательно “вылизывал” и подгонял для всех доступных броузеров) и забудет про него. Особенно, если у него этих прототипов — как грязи… А после, спустя некоторое время, он увидит свой дизайн на чужом сайте и не обнаружит внизу ссылки на свою студию. Ощущения будут сродни чувствам матери, у которой после родов отобрали малыша (извините за столь неожиданное сравнение, и те, кого я чем-либо задел за живое.)
Но по другому я не могу. Ибо каждый сайт для дизайнера — детище, которое он взращивает в течение совсем непродолжительного времени (по меркам Вселенной), а затем отдает на растерзание акулам интернета. И именно такие чувства возникают у него, когда его попросту лишают возможности гордиться своим ребенком, наблюдать за его ростом и хвалиться перед своими коллегами, показывая его фотографию. Ладно, слезы, я надеюсь, закончились.
В-четвертых, обратимся опять к заказчику. Представьте, что перед вами некоторый набор шаблонов, которые вы можете вот так свободно купить за реальные деньги. Со временем, когда их сайт разрастется, выбор будет огромен и ситуация только осложниться. Пардон, но кто объяснит этому человеку, какой прототип лучше купить? Во что вложить деньги? Как этот сайт будет работать на его фирму (или его самого) в реальной жизни интернета? Окупятся ли затраты на его создание и поддержку? Раздел ЧАВО тут не поможет — нельзя объять необъятное. Кроме того, как я понял из сайта, вышеупомянутый раздел описывает способы оплаты, но не освещает вопросы, что я обрисовал.
А ведь дизайнер для этого и нужен. Именно он подскажет, какой сайт будет работать лучше именно на ту задачу, для которой он, собственно говоря, и был создан. Он долго будет с пеной у рта доказывать вам это, он приведет тысячу и один довод в пользу того или иного варианта, опровергая все и вся. Он будет терпеливо ждать, пока заказчик “созреет” и выберет именно его работу. И он будет безумно рад состоявшейся сделке.
Но это не был призыв садить возле монитора с показанными шаблонами дизайнера, который укажет вам, что покупать.

Вот, мы уже поговорили о том, как нужно обновлять сайт и как сделать правильно его структуру (см. также статью Меняющийся контент.) Сейчас я хочу порассуждать о частоте обновления всего сайта, а не только информации на нем.
Сразу хочу сказать, что прежде чем начинать реструктуризацию всего сайта, необходимо уяснить для себя, что старого вы все-таки оставите, а что будет совсем новое, доселе неизвестное народу. Для этого проводится полная ревизия с безжалостным вычеркиванием лишнего. Но и здесь есть подводный камень, а, впрочем, даже не один — предложить пользователям, поставившим закладки на страницы, которые подлежат вашему удалению, альтернативный способ получения нужной им информации.
Попросту говоря, страницы эти должны остаться, а вот о переезде (или недоступности) информации просьба сообщить. И предложить, например, адрес вашей электропочты для того, чтобы серферы могли с вами связаться и получить архив тех статей или чего-то еще, что вы убрали (в принципе, адрес должен быть виден всегда, независимо от ваших манипуляций с файлами. Тогда пользователи поймут вас и не будут обижаться, что вы чего-то там удалили. Кроме того, у них же будет уникальная возможность поругать вас за это, а за новую информацию даже поблагодарить.)
В данном случае, однако, не подходит общая страница ошибки 404 (см. также статью Персонализация ошибок.) Она, конечно, влияет на впечатление, производимое вашим порталом, но куда приятнее получить сообщение именно по тем данным, которые серфер запросил и указания, что нужно делать, а не просто заголовок “Не найдено”. Самое главное — дать понять пользователю, что о нем заботятся, ибо, показывая заботу о посетителе сайта, вы уберегаете себя от нежелательной антирекламы и всего прочего, что может, в конечном итоге, оказать влияние на счетчик посещений вашего сайта. Люди подумают, что вы хороший человек и будут смотреть вам в рот, пока вы разрабатываете что-то новое и (неизбежно) теряете старое и всеми (казалось бы) забытое.
Как это сделано на практике? Да очень просто. Возьмем, к примеру, новости, причем не важно, на каком сайте они размещены — будь то новостийный портал или обычная почтовая служба, кормящаяся исключительно от участия в партнерских программах. На заглавной странице размещены, например, пять самых важных событий. Потом следует ссылка, говорящая, что новости на этом не заканчиваются. Ссылка ведет на страницу, где располагаются все новости, актуальные в этот день. А самое интересное начинается на следующей странице, где размещен полный архив новостей, разбитый на определенные периоды: по году публикации, по месяцу в году и так далее. Разумеется, если у сайта не слишком много новостей, все заканчивается на второй странице с уже размещенным архивом; при этом новости дня обязательно попадают на главную страницу портала.
Другой пример приходит мне в голову, отойдя от новостей. Сайты, где собраны различные материалы, не сильно-то релевантные к текущим событиям. Например, сборники стихов молодого автора. Там можно себе позволить разместить все ссылки на стихи прямо на первой странице. А можно поступить иначе, актуализировав стихотворения только за этот год, а все остальные сместить на страницу второго уровня. Здесь, при таком раскладе, важно отметить, что стихи еще не закончились, и что, пройдя по соответствующей ссылке, пользователь их обнаружит.
Без ложной скромности скажу, что у меня тоже есть сборник рассказов на различные темы. На главной странице сайта я, не мудрствуя лукаво, актуализировал рассказы текущего года, а все остальные идут попросту ниже, разделенные заголовком года написания. Получилось, что читатель сразу охватывает объем написанного и понимает, что за один раз ему не справиться с прочтением всех рассказов. Ибо рассказы эти не предназначены для беглого ознакомления. Вот такой я скромный…
Но, retournons à nos muttons. Я бы хотел сказать, что лучше, конечно, ничего не выкидывать. Но, если жизнь (а, скорее, злой хостер, не желающий выделить еще несколько десятков мегабайт места под ваши нужды) вас заставляет убирать кое-что с вашего сайта, постарайтесь, чтобы меньше всего от этих рокировок пострадали ваши же посетители.
О, кстати! Плохим тоном считается выложить на всеобщее обозрение страницу, сообщающую о реконструкции сайта, что он будет в “тыщу” крат лучше предыдущего, с красивой анимированной картинкой строителя с лопатой… Так нельзя. Лучше всего оставить сайт таким, как он есть до полного завершения строительных работ, а уж потом сразу его обновить. Без всяких дурацких предупреждений. Без ограничения себя в сроках работ над новой версией и так далее.
Опасность состоит в том, что ваши работы могут отнять у вас слишком много времени, а пользователи, так и не дождавшись интересной и новой информации, попросту уйдут туда, где и свежо, и сухо. И никакой реконструкции. Я это к тому, что во время ваших дорожно-полевых работ, выкроите хотя бы пару часов на то, чтобы поместить уже новую информацию на еще старый сайт. Тогда, создав благоприятный фон для работы, вы создадите новый шедевр и преподнесете пользователям нежданный сюрприз. А ведь они любят сюрпризы!

“Скажите, а чем вы пользуетесь при разработке сайта? Photoshop… CorelDRAW… Paintbrush?”. Практически на каждом сайте о веб.дизайне можно найти подобный вопрос в форуме.
А если вам ответят, что ничем? Это ведь не застанет вас врасплох? Вы, скорее всего, подумаете, что обратились не по адресу, а сайт ентот вообще дизайну не посвящен. Либо же у отвечающего было ужасное настроение, после того как очередной заказчик отфутболил проект десятого по счету логотипа.
А потом вы будете всю ночь не спать, задаваясь вопросом “а чем тогда, собственно?”. Но ответа не найдете, а вот день следующий пройдет явно неплодотворно для вашего же сайта. Точнее, для разработки вашего сайта.
Знаете, чем дорога данная статья? В ней есть ответ на столь долго мучивший вас вопрос. Самое смешное, что действительно, ничем. Ничем не пользуемся при создании сайта. Почти ничем. В одной из предыдущих статей (см. также статью Арсенал) я говорил обо всех нуждах дизайнера. Но не это есть главное.
Прежде всего, должна родиться идея. Так сказать, концепция сайта. Она, в принципе, может плавно вытекать из четко продуманной структуры сайта (см. также статью С чего начнем?.) Вот вы набросали структуру, расположили все элементы сайта и все такое, и начинаете творить. Ключевое слово в предыдущем предложении — набросали. Как правило, мы используем первые подручные средства.
Лист бумаги и карандаш.
Вот вам и ответ. Теперь оглядите взглядом свой рабочий стол. Да не тот, где разные значки, от которых вы не знаете как избавиться… а свой стол, на котором стоит весь этот арсенал дизайнера. А еще лучше, другой свой стол, пусть даже и кухонный. Если на нем нет заготовленной бумаги и карандаша, считайте, что дизайнер из вас не получится.
Кстати, почему карандаш? Потому что к нему (в качестве логичного дополнения) в любом канцелярском магазине можно найти и ластик. Удобное сочетание? Всяко.

Небольшое лирическое отступление от дизайна хотелось бы мне сделать сегодня. Но, отступление это не пройдет без привлечения дизайн-аспекта в создании правильных сайтов.
На протяжении всех этих статей, усердно мною написанных, я вещал в массы о том, как нужно правильно создавать сайты. Обсуждали мы все: начиная от элементарных вещей и заканчивая более серьезными темами.
К чему я веду повествование? А вот. Давеча установил я себе на второй винчестер операционную систему Linux Mandrake 8.0. Ну, и решил, дабы полностью ощутить все прелести новой игрушки, вылезти с ее помощью в интернет и поглядеть, как же чувствуют себя некоторые сайты в новой среде. Нужно сказать, что ходил я на порталы, уверенно заявляющие, что они прекрасно работают на всех платформах и во всех мыслимых и немыслимых броузерах. Что ж, решил я, проверим.
Сразу же хочу похвастаться своим сайтом, который вы сейчас держите под указателем мыши: портал не подвел. Я даже исхитрился сделать скриншот в этой операционке (признаться, до этого вообще ни разу не работал в ней и даже не знал, какие из графических средств там доступны.) Результат моих усилий вы можете лицезреть ниже.
По-моему, впечатляет. Честно сказать, я и сам не ожидал подобного эффекта!
Что же касается остальных сайтов, то скриншоты я показывать не буду. Слишком много чести. Одно могу сказать: не все сайты, заявленные на вышеупомянутую совместимость, показали подобный моему результат. Это без ложной скромности.
Тут дело еще в специфике самой операционной системы. Во-первых, шрифты. До Windows-шрифтов им далеко. Во-вторых, встроенные броузеры в Linux по умолчанию не особенно разнообразны (хотя, их достаточно много, но вот Explorer я там не нашел. Но знающие люди говорят, что есть версия этой смотрелки и для этой платформы.) А в-третьих, скорость работы броузера оставляла желать лучшего.
Хм, вспомнилось: чем больше шкаф, тем громче падает…
Вот такой опыт я приобрел, пока смирно лежал дома на больничном.

Представьте, хотя бы на секунду, что в ваш дом провели кабель, позволяющий просматривать несколько новых телевизионных каналов. Причем именно тех, которые вы так хотели всегда смотреть. Это и новые голливудские фильмы, и мультики для детей, причем красочные и поучительно-воспитательные, и ретро-фильмы для бабушек и еще много всего. Существует только одно “но”: для просмотра всей этой прелести вам нужно как минимум купить новый телевизор за энное количество зелени…
Вообразили? Теперь переносим эти мечты на сайты в интернете. Вы попадаете на сайт, который, уже на сплэш-странице, требует скачать необходимый штепсель для броузера, скорректировать размер экрана до нужных размеров, скачать новый броузер вообще или же купить новый монитор с диагональю 21 дюйм. И лишь только после выполнения необходимых условий насладиться всем великолепием дизайнерской задумки.
Теперь разумный и логичный вопрос: как вы думаете, будете ли вы все это делать, пусть даже и по отдельности? Очевидно, что нет (конечно, если у вас уже есть монитор в 21 дюйм, разрешение экрана соответствует указанному, глубина цвета поражает даже вас и вообще установлен самый последний броузер, который еще даже не вышел из недр лабораторий… О штепселе при таком раскладе я вообще молчу.)
Теперь перенесем вышеуказанный пример про телевизор на рядового серфера, который обладает лишь ограниченным набором техники и средств вообще для путешествий по Сети. Логично предположить, что если уж он и забрел на ваш портал, дальше первой страницы со всеми ее ограничениями он не продвинется. И, как следствие, не найдет для себя полезной информации, не увидит всей прелести графики и не сделает закладку на ваше творение. Я промолчу и о том, что он не порекомендует ваш сайт своим друзьям-сетянам и так далее.
В итоге вы получите отрицательные эмоции о вашем сайте со стороны обычных пользователей.
Вспомните себя, когда, выбирая очередную игрушку в магазине, вы с ужасом обнаруживали, что ваш компьютер, купленный пару месяцев назад, уже ей не подходит. И ведь вы винили не себя, за то, что купили слабенький компьютер, а производителя этой самой столь желанной игры. Вам лишь хотелось, чтобы игра пошла на вашей машине, но вы глубоко разочаровались и выбрали что-то другое.
Но ведь производитель указал минимальные требования к машине для игры. А почему вы не можете указать требования для своего сайта? Конечно, можете. Но на поверхность вылезает первое и главное правило, и, как следствие, закономерность. Но по порядку. Во-первых, вспомните самую первую статью, давно уж забытую (см. также статью ABC хорошего сайта.) Ваша страница (или их совокупность) должна быть доступна абсолютно всем, даже если на ваш сайт зашли с мобильного телефона или телевизионной приставки. Во-вторых, закономерность такова: новые продукты и технологии для создания веб.страниц могут появляться хоть каждый день. Хорошо, если вы будете успевать в них ориентироваться. Плохо, если вы их будете сразу же использовать. Дайте хотя бы два года на исправление всех ошибок, на выпуск заплаток и штепселей и на адаптацию пользователей.
И на десерт. Вспомните, когда в интернете начали массово появляться flash-ролики? С выходом лишь четвертой версии самой программы! А в 2000-м году Якоб Нильсен писал об этой технологии (см. также страницу Рекомендую) и объяснял ее неприменимость в 99 процентах случаев. Отчасти, он был прав. Но теперь, когда все эти ролики, баннеры и логотипы уже никого не удивляют, можно использовать и Flash! в свое удовольствие. Хотя, уже на подходе шестая версия…

Поговорив о небольших тонкостях веб.дизайна (см. также статью Источники фиги), определим основные типы сайтов, встречающиеся в интернете, поговорим об их дизайне.
Какими бывают сайты? Разными. Все зависит от конкретной задачи, от целей сайта, от его структуры. Сайт может зависеть даже от самого элементарного — количества элементов в меню. Нужно отметить, что данное деление очень и очень условное; невозможно четко провести грань между тем или иным типом.
Самый первый тип, достаточно распространенный в Сети, принадлежит к широко распространенным страницам обычных пользователей. Сайты эти называются персональные страницы (от англ. Home Pages), они носят информацию об этом пользователе, который возжелал заиметь в интернете свою визитную карточку. Да, эти сайты очень похожи на визитки, но иногда эти порталы разрастаются от пары страниц в настоящие корпоративные сайты (см. ниже.) Все зависит от этого серфера. Если фантазия его не ограничена какими-либо рамками, он создаст в Сети настоящий портал, предоставляющий массу сервисов и услуг.
Как правило, данные сайты являются любительскими, в интернете они появляются каждый день. Однако, данный сайт может быть и последним в портфолио этого пользователя. Они содержат информацию о нем, единственном и неповторимом создателе этого творения — биография, фотографии, хобби, любимые люди, друзья, животные, родители, еще что-нибудь. Но иногда встречаются просто классные страницы по всем аспектам: дизайну, содержанию, оформлению и т.д.
Далее идут так называемые некоммерческие сайты, созданные сторонниками каких-нибудь добровольных организаций. Они более интересны с точки зрения дизайна, как правило они богаче по графике, поскольку разработчики (на собранные организацией деньги) могут уже позволить себе пригласить фотографа, или воспользоваться платной коллекцией готовых фотографий.
Небольшое замечание по поводу двух первых типов сайтов: от личной страницы очень даже просто перейти к некоммерческому сайту — достаточно автору чем-либо серьезно увлечься, как грань между этими типажами расплывается. Если создатель желает показать интернету (или какой-либо его части) свое увлечение, хочет продемонстрировать все преимущества любимого занятия, он знает, что именно нужно рассказывать. Особенность же домашних страниц заключается в том, что, как правило, пользователям особо-то и нечего сказать.
Разобравшись с этими типами, переходим к следующему представителю — контент-сайтам (название происходит от английского слова “content”, обозначающее “содержание”.) Эти сайты заманивают своих посетителей предложениями о необходимых программах, услугах, сервисах. Они предлагают массу полезных (иногда и не очень) файлов или чего-либо еще для загрузки на компьютер пользователя. Сайты эти различны и по контенту, и по цели. Это могут быть как сайты-сборники программ, утилит и различных штепселей, так и порно-сайты. Даже коллекции обоев для рабочего стола, различных курсоров, пиктограмм и прочего, размещенные в Сети, являются контент-сайтами. Теперь фокус: любой сайт, предлагающий что-либо загрузить, в принципе, уже является контент-сайтом.
Даже личная страница пользователя, при ближайшем рассмотрении, может оказаться контент-сайтом. Предложив однажды скачать с его страниц какой-нибудь любимый им текстовый редактор (только если он распространяется бесплатно или получено разрешение на распространение), пользователь (возможно, не осознавая происходящего) превращает свой портал в контент-сайт.
Отличить контент-сайт можно очень даже просто. Во-первых, вам предлагают сознательно что-нибудь скачать (это не относится к неустановленным у вас на компьютере штепселям для броузеров, если последние не могут корректно отобразить страницу.) Во-вторых, это обилие баннеров, причем не связанных с содержимым данного сайта, отображающихся “невпопад”. Держателей данных сайтов трудно не понять: как-то же нужно отрабатывать деньги, заплаченные за поддержку сайта в Сети, за (возможно) использование платными коллекциями чего-либо, за хостинг, за создание сайта (самому себе, но возможно и использование услуг студий веб.дизайна.)
На самой последней ступени развития стоят так называемые корпоративные (коммерческие) сайты. Эти сайты являются своего рода электронными представительствами фирмы (а иногда и уникальным местом взаимодействия с клиентами.) На данных сайтах можно встретить различную информацию о компании, пролистать перечень ее услуг и сервисов для конечных пользователей, рассмотреть образцы продукции. Как можно заметить, очень напоминает на визитную карточку, только разросшуюся до гигантских размеров. Эти сайты, как правило, содержат уйму информации, различных пресс-релизов и статей, причем подается все это в лучших дизайнах, на которые руководители компаний не жалеют никаких средств.
Создают свои представительства и дизайнерские студии. Причем, порталы эти относятся именно к разновидности корпоративных сайтов. Они отвечают самым-самым высоким требованиям моды, они представляют собой некоторые образцы для подражания, на которые можно и нужно равняться. Они совмещают две, казалось бы, несовместимые тенденции. С одной стороны, они должны принадлежать к последнему “писку” мира дизайнерской моды, haute couture и воплощение гениальности в простоте. С другой стороны, они обязаны быть понятны простым обывателям, которые (за деньги) желают получить от студии “нечто подобное” (см. также статью Овечка Долли.)
Как видно, многое в дизайне веб.сайтов зависит только от их разработчиков, но невозможно четко разграничить все сайты, пользуясь некоторым набором правил, что-то типа “вот у этого сайта баннер не по теме, а у этого слишком мало графики”. Помните, все в мире относительно…

Приготовьтесь к главному потрясению в своей дизайнерской карьере. Сейчас я постараюсь сделать так, что то, что вы прочитали в книжках, на сайтах и иных источниках, посвященных дизайну (или частному ее случаю — дизайну для веба) окажется полной противоположностью написанному здесь.
Если прочитать одну такую книженцию, написанную Якобом Нильсеном (см. также страницу Рекомендую), становится плохо. Весь смысл книги сводится к тому, что пользователи привыкли видеть определенную структуру ваших страниц, не любят читать длинные тексты, не переходят по ссылкам и так далее в том же ключе. Чушь и вздор!
Да, признаю, есть и такие пользователи. Но я искренне считаю, что Нильсен явно перегнул палку. Его книга о юзабилити, а не о тупых пользователях, которые непонятно зачем залезли в Сеть. Но не все ведь такие.
Но я уже писал о том, что нужно делать тексты специально адаптированными для интернета (см. также статью С чего начнем?.) Почему же теперь я утверждаю обратное? Да не обратное вовсе, просто адаптация материалов для интернета убивает двух зайцев одновременно. Во-первых, одни будут читать статьи бегло; чтобы не утруждать их этим, им будет приятно, что вы вынесли основные пункты наверх статьи и (при желании) снабдили их ссылками на соответствующие разделы. Во-вторых, кому ваши ссылки не нужны, будут читать статьи до конца. Хотите подтверждения? Пожалуйста — вы же уже дочитали до этого места, очевидно собираетесь продолжать. Но я не вынес основных пунктов статьи наверх страницы. И вы все равно читаете. Значит, первый миф о не читающем пользователе оказался пустым местом.
Поехали дальше. По поводу переходов по ссылкам меня, признаюсь, поразило больше всего! Это получается, что интернет вообще не нужен. Если вспомнить, для чего все это было придумано, становится ясно, что, возможно, они там (включая самого Нильсена) так обленились, что не способны сделать пару щелчков для того, чтобы добраться до самого необходимого материала. Нет, они будут до потери коннекта искать сайт, на котором нужная им информация находилась бы на самой первой странице! Да никогда такого не будет. Никогда.
Опять желаете подтверждения фактов? Сколь угодно: для того, чтобы добраться до этой, конкретной, статьи, нужно сделать три щелчка (начиная с главной страницы.) Пользователи, конечно, не переходят по ссылкам (читать это предложение с нарочитой иронией, акцентируясь на глаголе в негативной форме.) Никто меня в этом не переубедит. Соответственно, второй миф о не переходящем пользователе отправляется туда же, куда ушел и первый.
Еще одна фишка из этой книжки: пользователи не прокручивают окно броузера, чтобы добраться до нижней части страницы. Тогда пользователи этого сайта обладают каким-нибудь штепселем для их операционных систем, который сам прокручивает им содержимое. Бедные пользователи! Очевидно, что и третий миф тоже не ахти какой непробиваемый.
Да, пользователи просматривают страницы. Да, они делают так, как умеют. Иногда у них это получается, по меньшей мере, глупо. Но они переходят по правильным и грамотно составленным ссылкам, читают длинные, но хорошо организованные тексты в поисках нужной информации, прокручивают окно, чтобы хотя бы увидеть копирайт и ссылку наверх страницы. Ведь они так привыкли… (опять с иронией в голосе.)

Поскольку вы являетесь единственным автором какого-либо творения, вы имеете все авторские права на ваш сайт, логотип, информацию, в нем содержащуюся, даже без явного указания своей фамилии под каждой страницей сайта. Но если вам так хочется…
Теперь вы имеете свой сайт, вам на нем все нравится, вы всем довольны. Но приходит к вам однажды некий господин N и просит создать сайт для него, “подобный вашему”. Предлагает заплатить энную сумму денег за столь щедрый жест, готов ждать сколь угодно времени, но сильно желает получить подобный вашему сайт.
Казалось бы, что может быть проще? Берем наш сайт, загружаем его в блокнот, удаляем всю информацию, относящуюся к нашему сайту, чуть-чуть меняем цвета фона, текста, ссылок, вставляем тексты заказчика и продаем нашему господину N за реальные деньги. Здорово получилось!
Здорово получилось? Нет. Получилось просто кошмарно! Никогда так нельзя поступать. Всеми правдами и неправдами нужно либо отказаться от этого заказа, не жалея об огромной сумме денег, либо согласиться за эту же сумму создать индивидуальный сайт для этого господина. Второй вариант предпочтительней, ибо все останутся довольны: вы получите деньги, а заказчик — сайт.
Еще раз повторю: главный принцип профессионального веб.дизайнера — всегда создавать индивидуальные проекты, независимо от целей сайта и от стоимости его изготовления (в начале карьеры все дизайнеры создавали сайты практически бесплатно: кто-то для того, чтобы заказчики порекомендовали его, кто-то чтобы получить какое-либо вознаграждение или диплом, да мало ли еще как.) Но этот главный принцип они пронесли через всю свою жизнь, не жалея ни единой минуты, потраченной на создание индивидуального, неповторимого, эксклюзивного если хотите, дизайна.
Конечно, все варианты просчитать невозможно. Быть может, найдется в интернете сайт, достаточно похожий на ваш. Ничего страшного. Вы ведь его не копировали? Просто так получилось, что гениальная мысль по созданию интерфейса попала не только в вашу голову. Главное, что эти сайты созданы не одним человеком, а несколькими, абсолютно независимо друг от друга. Ну получилось одинаково, что теперь? Выкидывать дизайн на помойку?
И этот сайт не претендует на абсолютно неповторимый стиль и дизайн. Может быть кто-нибудь и отыщет сайт, похожий на этот. Я создавал его, исходя из удобства использования, не копируя никого (кстати, я уже говорил об этом, но многие дизайнеры сидят в интернете с выключенной графикой, а некоторые даже с выключенными стилями, для того, чтобы не копировать других авторов.)
Кто найдет чего-нибудь похожее, просьба записаться в гостевой.

Помните, в одной из предыдущих статей (см. также статью С чего начнем?), я говорил о том, что прежде всего необходимо создать структуру вашего сайта? Так вот, достаньте ее, стряхните с нее пыль и посмотрите внимательно на все то, что вы там написали.
Посмотрели? Вероятно, исправили возможные ошибки и готовы к дальнейшему чтению данной статьи? Тогда в добрый путь! Чертим рядом со структурой вертикальную черту. Итак, слева у нас будут наши данные, которые мы хотим разместить на сайте, а справа — названия файлов и каталогов (я не использую термин “папка”, ибо не все пользователи используют семейство операционных систем Windows в своей работе.) Для чего это все нужно? Для дизайна URL.
Эта статья сугубо техническая, она посвящена правильной организации материала на ваших страницах. Надеюсь, советы, здесь приведенные, помогут вам создать хорошо структурированный сайт, который был бы предсказуем не только для вас, но и для ваших посетителей. Давайте поговорим о том, для чего все это делать.
Приведу простой пример. Многие пользователи, считающие себя беззаботными, очень интересно путешествуют по Сети (надо сказать, что это относится к пользователям, проживающим в Штатах, но до нашего населения это тоже скоро дойдет. Уже есть пользователи, использующие данный метод поиска информации в интернете, автор этих строк иногда тоже так поступает.) Они просто вводят название того, о чем желают прочитать, и добавляют суффикс .com. И, вы знаете, зачастую они получают именно то, что хотели.
Знаете, из-за чего они получают, что искали? Из-за того, что очень многие компании, корпорации, предприятия, фабрики, школы, магазины, институты, академии, салоны красоты покупают себе доменное имя второго уровня в соответствии со своим названием в реальной, оффлайновой, жизни. Примеров масса: Coca-Cola, Lexmark, Toyota, Marantz, HP, Herlitz, Petek, Pepsi, Mars, Genius… Добавив соответствующий суффикс, получим официальный сайт этой фирмы. Другой пример — звезды и звездочки шоу-бизнеса. Все известные артисты, актрисы и актеры, исполнители и композиторы имеют сайт, отвечающий их имени и фамилии, написанной вместе. Фильмы, задолго до выхода на большие экраны, интригуют серферов своими захватывающими сюжетами, а на страницах сайтов можно найти самую последнюю информацию о ходе съемок, картинки с площадок и интервью с актерами и режиссерами. Да даже в России, где интернета (по меркам развитых стран) очень мало, уже вошло в моду раскручивать кого-нибудь не только через телевидение, радио, постеры, концерты и прочее, но и создавать сайт в Сети для воздействия на общественное сознание посредством достаточно нового вида распространения информации. Но, это было лирическое отступление.
Поскольку не все мы можем позволить себе снять со своего личного банковского счета энную сумму зелени, достаточную для приобретения домена второго уровня, посмотрим, что мы можем сделать для неплохого начала даже на бесплатном хостинге. Первое, и главное, правило: давайте осмысленные названия вашим файлам и каталогам. В обозримом будущем, когда вы в первый раз решите обновить свои страницы (даже если это произойдет на следующий день после официальной публикации вашего сайта в Сети), вам не придется разбираться с завитиеватыми названиями. Вы просто будете знать (или догадываться об этом интуитивно), что и где у вас размещено.
Обычно, первый каталог, который создается на этапе создания сайта, это хранилище ваших графических файлов. Но не давайте ему имя единички или что-то в этом роде. Дайте ему гордое “images”, или, если короче, просто “img”. В своих работах я использую последний вариант — и понятно, и не приходится в коде страниц (а я все пишу вручную), по сто (а то и больше) раз писать длинное “images”. Кроме того, чем короче вы назовете каталог или файл, тем меньше будут занимать коды страниц, на эти названия ссылающиеся. Теперь проведите ревизию непосредственно в графических файлах: посмотрите, не слишком ли много чести называть фоновое изображение именем “background.jpg”? Достаточно короткого “bg.jpg”, и всем будет понятно, что это именно то, что скрыто под именем.
Теперь пойдем по вашей структуре. Мы видим группы, в которые объединены данные, готовые для публикации. Вот эти самые группы нужно сделать каталогами, а сами данные оформить в виде файлов. Так, страница, рассказывающая о вашем сайте, может спокойно называться “info.htm”, а страница непосредственно о вас — “about.htm”. Главную страницу с фотографиями назовем “photos.htm”, а повествование о вашей биографии можно окрестить “bio.htm”. Ну, а главную страницу сайта все просто по умолчанию называют “index.htm” (здесь нужно сказать, что это обстоятельство зависит только от условий хостинга. Если сервер провайдера настроен таким образом, что по умолчанию загружается “default.htm”, ваши посетители так ничего и не увидят, кроме сообщения об ошибке. Прочитайте внимательно инструкции вашего хостера о названии файлов и их размещении.)
За примерами хорошей структуризации попрошу вас проследовать на мою дизайн-студию. По ссылкам вы разберетесь очень легко, ибо все файлы и каталоги названы доступно и понятно (данный сайт также можно рассматривать в качестве образца, но из-за того, что после использования страницы поиска, вы можете обнаружить в адресной строке своего броузера непонятные цифры и закорючки, я его не привожу в пример. Очень сложно бороться за чистоту адресов URL, используя на сайте множество программного кода не самой совершенной в мире технологии.)
Надеюсь, вы разобрались с нехитрыми приемами создания правильных адресов URL. Напоследок, добрый вам совет: подберите и приобретите хороший русско-английский словарь. Тогда то, что вы возжелаете разместить на своем сайте, приобретет еще и английский эквивалент, а вам, как следствие, будет намного проще подобрать всему этому и нехитрое название каталога или файла. И пусть не все знают английский, зато те пользователи, которые им владеют, смогут предсказать, куда ссылается ссылка, на которую они наводят мышь (о, кстати! Никогда и еще раз никогда не прячьте строку состояния броузера. Во-первых, там отображаются все данные о работоспособности обозревателя, о ходе загрузки страницы, а во-вторых, что самое главное, о том, куда ведет ссылка. Ежу понятно, что пользователь, увидев там “under_construction.htm”, никогда не сделает щелчка.) Впечатление от вашего сайта останется только положительным.

Создавая сайты за деньги, я иногда получаю письма от моих заказчиков, требующих оформления ссылок в текстах статей обязательно с использованием незыблемой фразы “щелкните здесь”. Они, вдобавок к этому, приводят веские описания и разъяснения, объясняющие, почему именно так они хотят видеть свои ссылки.
Тем не менее, на страницах моей дизайн-студии вы не найдете ни одной подобной фразы. Кроме того, мне приходится серией писем, отправленных в ответ заказчикам, объяснять причины плохих ссылок, оформленных подобным стилем. Постараюсь объяснить это и вам.
Итак, почему же нельзя писать фразу “щелкните здесь” (возможны варианты — click here, щелкни здесь и так далее)? Ответ достаточно прост, но, есть масса причин, чтобы этот стиль все-таки использовать.
Для начала, само сочетание слов “щелкните” и “здесь” не несет никакой смысловой нагрузки. Другими словами, эта фраза ничего, в принципе, не значит. Кроме того, некоторые пользователи вообще не могут где-либо щелкнуть из-за того, что ими используются альтернативные средства для доступа к Сети, например сотовые телефоны или телевизорные приставки. Во-вторых, HTML позволяет оформить ссылку как угодно. Лишь бы позволяла ваша фантазия. Рассмотрим несколько примеров:
В данном разделе вы сможете прочитать рецензии на последние обновления. Щелкните здесь.
Вместо этого, лучше всего написать: В данном разделе вы сможете прочитать рецензии на последние обновления.
Желаете узнать больше? Щелкните здесь.
Та же ошибка. Лучше вообще переформулировать фразу, написав просто: Подробнее…
Последняя версия вашего любимого броузера находится здесь.
Здорово, но было бы гораздо лучше написать: Новая версия броузера уже доступна!
Ошибка многих сайтов, дающих самые свежие новости: Крупная компания по производству ноутбуков обанкротилась. Как сообщает информационное агентство “Нереальный стиль жизни”, это произошло в результате падения акций на последних торгах….
Данный стиль, конечно, можно объяснить тем, что так они показывают новостийность статьи, ее важность и прочее. Разумеется, можно и нужно сделать это более изящно. Например, так: Крупная компания по производству ноутбуков обанкротилась. Как сообщает информационное агентство “Нереальный стиль жизни”, это произошло в результате падения акций на последних торгах…. Где здесь ссылка? Она скрыта на троеточии, которое логично служит для того, чтобы показать, что на этом фраза не заканчивается, а что есть целый пресс-релиз по этому поводу, который, если нужно, вы сможете прочитать. Еще вариант — поставить ссылку Далее в конце этой фразы. Не запрещено также стилизовать ее под конкретный сайт, добавив какие-нибудь точечки, двоеточия, стрелочки или скобочки.
В-третьих, фраза “Щелкните здесь” все равно будет встречаться на страницах вашего сайта. Вы не сможете этого избежать; единственный способ — вообще отказаться от партнерства в баннерообменных сетях. Проще говоря, отказаться от любой рекламы на страницах. Или делать ее самостоятельно — качественно и правильно. Откуда я это взял? Зайдите на любой сайт в интернете. На каждом баннере в 85 процентах случаев обязательно будет написано “Щелкните здесь”.
Тем не менее, эта фраза уже воспринимается серферами автоматически как реклама. И они пропускают ее мимо своего взора, порою, отказывая себе в дополнительной интересной информации, посвященной тому, что они только что прочитали. И они так и не обнаружат каких-нибудь подробностей, а потом будут винить вас в том, что вы не дали расшифровок к своей статье. Вы будете им отвечать. что, мол, не там смотрели, и будете в корне не правы.
Ссылки надо оформлять так, чтобы их было заметно, чтобы они не были зазывными как баннерная реклама, чтобы их формулировка была лаконичной и понятной, и чтобы они содержали именно то, о чем написано возле них. Тогда все будет в порядке.

Сейчас мы поговорим о том, что помогает пользователю при общении с вашим сайтом. Если угодно, то о том, что делает ваш сайт удобным в эксплуатации. Статью можно рассматривать в качестве наглядного пособия, руководства к действиям. Эта статья является некоторым итогом того, что было написано выше.
Прежде всего, это отсутствие ошибок на сайте. Имеется в виду как отсутствие орфографических и грамматических ошибок, так и ошибок в коде самих страниц. С первым люди еще как-то мирятся, но вот со вторым не согласны в корне. Признаю, не все пользователи знают, как правильно написать код, но они почувствуют это интуитивно, когда будут ждать проявления вашего сайта в окне своего броузера.
На что влияют ошибки? Прежде всего, на отношение к вам и вашему детищу. Если, конечно, вы не стремитесь создать сайт для незнаек, пытаясь передать весь стиль путем намеренного введения ошибок на страницы (имеются в виду орфографические и грамматические ляпы), ошибки делать не рекомендуется. А про код страниц я вообще молчу. Они должны и обязаны быть правильными.
Ошибки же в коде страниц можно проигнорировать, если вы создаете сайт для пользователей, ни черта не соображающих в HTML и иже с ним. Но бойтесь тех пользователей, которые вас перерастут: они будут напоминать вам о ваших ляпах в коде, кои они будут считать вообще недопустимыми с вашей стороны. Ведь вы так изящно “гнули пальцы”, показывая, что вы, типа, крутой кодер.
Для этих же самых пользователей-ваших-переростков нужно создать код, который хорошо бы смотрелся и был удобным в чтении. Для удовлетворения своего любопытства можете заглянуть под юбку этой страницы. То, что вы там увидите, является лично моим индивидуальным стилем написания кода страниц. Я считаю, что он удобен в анализе и прочтении, ибо все теги хорошо различимы на фоне их атрибутов и текста их обрамляющих.
Другая проблема — ошибки отсутствия страниц вообще (см. также статью Персонализация ошибок.)
Во-вторых, удобным в эксплуатации сайт делает его меню и структура. Без логичной подачи информации, хорошего структурирования не обходится ни один профессиональный сайт. Это важно, ибо пользователи привыкли ожидать логики от ваших страниц. И они ее получат — если не у вас, так на другом сайте. Там им будет уютнее, они никогда не вернутся к вам только из-за причины отсутствия удобства.
Третья причина, по которой можно судить об удобстве — компоновка страниц, ее дизайн-аспект, логичность размещения информации (здесь хочется сказать, что многие пользователи привыкли видеть логотип сайта почему-то обязательно слева, в углу, под ним сразу должна идти навигация сайта, справа размещается основной текст страницы и все это обязан завершать копирайт и ссылка, отправляющая наверх страницы. Если вы отважитесь на прочтение книги Курта Клонингера, вы окончательно забудете про то, что такая структура является обязательной; см. также страницу Рекомендую.) Хотя, я не вижу ничего плохого в данной структуре. Она логична и понятна пользователям. Пользователям, которые привыкли распечатывать часть информации из Сети. Да даже просто привыкли.
В-четвертых, подумайте о графике. Точнее, задумайтесь об ее использовании. С опытом вы сможете понять, что то, что вы отливали в картинки мегабайты, можно осуществить гораздо проще, изящнее, профессиональнее, с точки зрения владения средствами языка. Боже вас упаси от использования фоновых изображений! Я против них, разумеется, ничего не имею, но если они выполнены достаточно хорошо, чтобы рука не поднялась их как-то обижать. Самый веский довод против графики в принципе — многие пользователи сидят в интернете вообще с выключенной графикой. И им будет абсолютно наплевать на то, что вы убили два дня на создание цветочка для фона одной из ваших страниц.
Если вы внимательно присмотритесь к данному сайту, вы обнаружите графику. Даю подсказку: вверху и внизу каждой страницы. Да, вы угадали — это логотип сайта (сверху) и логотип студии (соответственно, снизу.) Если наведете мышку на каждый из этих графических элементов, получите исчерпывающую подсказку — для чего они там находятся.
В-пятых, на удобство использования сайта (вы, надеюсь, еще не забыли, о чем мы вообще говорим?) влияет обратная связь. Что это такое? Это связь пользователей с вами. Сайт должен отвечать на вопрос “Кто создатель этого творения?” просто автоматически (см. также статью Меняющийся контент.) Желательно, чтобы ответ на этот вопрос был снабжен ссылкой на e-mail автора для непосредственной связи с читателями. Если вы опасаетесь неразберихи в вашем почтовом ящике, вызванной огромным количеством писем, пришедшим с сайта, то могу вас заверить, что серферы не слишком охотно пишут письма (или заведите себе специальный ящик только для нужд вашего сайта.) Им гораздо больше нравится сделать запись в гостевой книге сайта (по ссылке плавно перейдем на мою гостевую.) Это, своего рода, книга жалоб и предложений, как некогда были во всех совковых магазинах, включая маленькие булочные.
Если вы создаете сайт с чем-то, что надо читать, причем, как вы полагаете, ваши читатели обязательно воспылают желанием обсудить ваше творчество у вас за спиной, то вам не обойтись без помощи форума или, еще лучше, без страницы обсуждения какой-то конкретной статьи. Внизу этой страницы есть форма, заполнив которую, вы выскажете мнение об этой странице. Спасибо, если сделаете это.
Конечно, ограничений здесь масса. Пресловутый бесплатный хостинг, злой провайдер, еще какая-нибудь чушь. Но знайте: при желании, можно сделать абсолютно все. И правильный сайт, и его обратную связь. Дело за вами. Гостевую книгу, счетчик посещений, форум можно найти в интернете. Бесплатно. С их собственным дизайном, но, если по-другому не получается, сойдет и так. Пользователи вас поймут, простят, а, главное, оценят вашу заботу.

В одной из предыдущих статей (см. также статью Стильность сайта), я упомянул о какой-то темной лошадке вашего сайта. То есть, про страницу, которая может, а, в принципе, должна быть не похожей ни на одну другую страницу всего сайта. Как так, спросите вы. Ведь я говорил, что абсолютно все страницы должны быть выдержаны в одном стиле. Тогда я оговорился в пользу страницы, о которой пойдет речь ниже.
Так что же это за страница-то такая? Эта страница, на которую пользователь не найдет ни единой ссылки на вашем сайте. Он обнаружит ее только тогда, когда неправильно введет адрес в броузере и получит ошибку 404. А эта ошибка пишется на обычной странице, которая как раз и должна по-другому выглядеть. Именно от того, как будет выполнена ваша страница ошибки 404, зависит реакция пользователя на весь ваш сайт в целом. Эта страница, можно сказать, изнанка сайта, от которой многое зависит.
Что же в ней такого особенного? Во-первых, она должна четко объяснять, почему пользователь ошибся, и где он в итоге оказался. Во-вторых, она все равно должна показывать, что пользователь все еще находится на вашем сайте, хотя и видит, что что-то поменялось. Даже если пользователь, до этого не путешествовавший по вашему сайту, сразу же набрал неверный адрес (или выбрал закладку в своем избранном меню), и это в-третьих, он должен понять, на каком сайте он оказался. Для этого предпринимается ряд шагов. Шагов к правильной ошибке 404…
Первым делом заботимся о тех серферах, которые используют очень медленное подключение к интернету и не могут себе позволить, чтобы ваша страница об ошибке загружалась в его окне час (см. также статью Время загрузки.) Даже если она будет чертовски красива и понятна, самое первое, что видит пользователь — заголовок окна броузера (который пишется в парном теге <TITLE>, помните?) Именно там уже нужно указать, что пользователь ошибся и постучал не в ту дверь, в которую хотел.
На втором шаге, когда пользователь уже начал видеть очертания вашей страницы, нужно показать ему дизайн. Сделайте эту страницу абсолютно в том же стиле, но создайте эффект, что что-то не так. Как этого добиться? Очень просто. Сломайте что-нибудь. В буквальном смысле. Логотип сайта, если он был цветным, обесцветьте. Любой графический редактор, себя уважающий, позволяет сделать такой фокус за два щелчка мышью. Все графические элементы, если они, разумеется, должны быть, тоже выполните в монохромной палитре. Если пользователь, уже видевший ваш нормальный сайт, увидит какие-нибудь черно-белые буллеты и логотип, он поймет, что этого не должно быть, посмотрит на адресную строку броузера и исправит ошибку. Для вновь прибывшего пользователя сразу на страницу-тупик, выполним третий шаг.
Здесь вам нужно будет включить всю свою фантазию и написать эту ошибку так, чтобы серфера она не отпугнула, а показалось дружелюбной и услужливой, не скупящейся на помощь. Но не расточающей рекламу (в принципе, нет никакого смысла ее там размещать, количество посещений таких страниц невелико), а именно в качестве доброго помощника и советчика.
Что там должно быть? Во-первых, надпись, что это тупик (но не кидайтесь резко исправлять свою надпись на, буквально, “тупик”. Вполне подойдет что-то вроде “Ошибка 404”.) Сделайте ее крупной и заметной, поставьте ее “кверху от сгиба”. Во-вторых, можно указать то, что ввел пользователь в адресную строку (с помощью простецкой программки на JavaScript, занимающей одну строчку.) В-третьих, можно и нужно указать содержание сайта, поместить его карту или ссылки на наиболее интересные материалы. Пользователя может это привлечь; в результате, вы донесете свою информацию еще до одного пользователя.
Здесь необходимо оговориться. Мне вот пришло в голову, что вы можете разместить ссылки на интересные материалы, которые позже будут убраны вами же как более не надобные. И тогда страница 404 будет ссылаться сама на себя. Веселенький получится сайт, если он будет содержать лишь одну страницу-тупик… Либо следите за этой страницей, причем при каждом изменении сайта, либо же размещайте на ней ссылки на постоянные страницы, которые никогда не меняют своих адресов. Третий вариант — когда эта страница генерируется автоматически, собирая ссылки с вашего сайта, но это, зачастую, недостижимо.
Что еще может возникнуть на вашем праведном пути создания правильной страницы-тупика? Бесплатный хостинг. Компании, предоставляющие этот сервис, имеют свои сайты и, соответственно, свои тупики. И они не представляют, для чего может понадобиться рядовому пользователю сделать собственную страницу об ошибке, когда их сервер имеет таковую. Но их страница не отвечает требованиям правильной страницы-тупика. Кроме этого, после темного дизайна сайта получить ярко-зеленую страницу об ошибке 404 выглядит как-то нелепо. Вам смешно? А мне — нет. Буквально неделю назад я пытался разрешить эту проблему со своим хостером (рекламу им делать не буду — не заслужили.) Два ноль в мою пользу. Они не знают, что такое персонализация страницы 404 и не понимают, зачем ее делать. А я отдаю себе отчет в том, что я делаю, и знаю то, что написал выше.

Вот, мы уже говорили о стильности (см. также статью Стильность сайта), давайте же еще немного побеседуем о том, что делает ваш сайт привлекательным с точки зрения информации.
Итак, как вы, наверное, уже успели понять, информация в интернете является именно тем, за чем пользователи туда приходят. Как правило, они всегда хотят получить только ту информацию, за которой пришли. На самом деле, это не так. Среднестатистический пользователь тратит на нужную ему информацию только десять минут в день, остальное же время в Сети он проводит, занимаясь различными другими вещами.
Что же это такое? Много чего: гороскопы, почта, анекдоты и юмор, порнография, музыка, слова песен, обои для рабочего стола, утилиты и программы, музеи, журналы и газеты и еще много всего, что очень удобно обосновалось в Сети. Обосновалось и имеет право там находиться.
В чем связь между вашим сайтом и вышеперечисленным, спросите вы. Хороший вопрос. Попытаюсь на него ответить. Для вашей же материальной пользы вы можете использовать свой сайт еще и как полигон для небольшого заработка. Каким образом? Элементарным. Достаточно всего лишь стать участником какой-либо баннерообменной сети.
С одной стороны, серферы не очень-то любят рекламу. Они уже знают стандартные размеры этих ненавистных прямоугольников и их глаза просто их игнорируют. Они уже догадываются, заходя на сайт, где она, в принципе, может размещаться, что там могут предложить; кроме этого, они осознают, что только своим лицезрением на баннер, они кладут в ваш карман маленький доллар. А про “щелкнуть по нему”, я вообще молчу…
С другой стороны, эти баннеры все-таки замечаются серферами. При этом они не только оценивают его индивидуальность, живость, информативность, привлекательность, оригинальность, но и то, что там предлагают. Этот пользователь, возможно, искал что-то вчера, но не нашел. А вот уже сегодня, путешествуя по интернету, он видит баннер, сообщающий, что то, что он вчера так долго искал, находится на расстоянии одного клика мышью. Поверьте, ему не составит никакого труда сделать этот клик.
Так в чем, собственно, фишка этих баннеров? Во-первых, они приносят вам доход. По крайней мере, вы сможете окупить расходы времени в интернете, необходимого для поддержки вашего сайта. Во-вторых, вы предложите пользователю, пусть частично, но познакомиться с тем, что происходит за пределами вашего сайта. В-третьих, вы создадите иллюзию того, что ваш сайт постоянно изменяется. Вот на этом мне хочется остановиться подробнее.
Что значит постоянно меняющийся сайт для вашего пользователя? Ему не придется лицезреть старую информацию, которая висит у вас на страницах с прошлого года. Это, конечно, не есть хорошо, когда у вас данные прошлогодней свежести, но именно баннеры, повторюсь, создадут иллюзию обновляемого сайта. Если вам лень обновляться хотя бы раз в неделю, баннеры не заставят себя ждать. Ведь интернет состоит не только из таких лентяев, как вы, он постоянно меняется, придумываются новые идеи и разработки, совершенствуются технологии, в общем, прогресс не стоит на месте.
В противовес идее о баннерах, хочу сказать, что я уже пресытился ими, поэтому на своих сайтах позволяю себе использовать их такими, какими я хочу их видеть. В итоге — никакой анимации, flash-баннеров, разворачивающихся на весь экран и самораскрывающихся окон в стиле самых жадных владельцев порносайтов.
Давайте отойдем от баннеров, и поговорим о концепции разработки дизайна. Для начала, вам необходимо разработать простую структуру, которая позволит вам при минимальных затратах обновлять содержимое достаточно часто. Оптимальный вариант — блочная конструкция страниц. К примеру, на моей студии веб.дизайна каждая колонка текста является блоком, который я без труда могу удалить, не нарушая целостность всей страницы. Но, если я могу удалить, то я могу и добавить. Все блоки стандартного размера, у меня есть шаблон. Я просто вставляю еще один блок там, где он должен появиться, вношу необходимые изменения заголовка, даты, содержимого и вывешиваю в интернет.
Еще один достаточно хитрый прием: так называемый копирайт. Он предназначен для того, чтобы установить четкую принадлежность сайта его владельцу. Copyright можно ставить на дизайн, на информацию (если она авторская), на концепцию, на гениальную идею, на логотип, на что-то еще. Самое смешное в этом приеме — обычно, ставят год, на который распространяется авторское право. Так вот, в интернете все еще встречаются сайты, датированные двухлетней давностью, хотя информация, там размещенная, достаточно свежа. Господа! На дворе двадцать первый век, а вы все еще находитесь в двадцатом по своему развитию!.. Ведь есть множество способов указать свое авторство, причем оно будет отображаться независимо от вашего желания. Простая функция извлечения года на JavaScript решит все проблемы (здесь я приведу скрипт, пишущий текущий год. Вам не составит труда изменить его под свои нужды.)
<SCRIPT Language="JavaScript"><!—
// Copyright © Michael Martinets

var today = new Date();
var year = today.getYear();
if (year< 1900) year = 1900 + year;
document.write(year);

//—></SCRIPT>

Данный скрипт, если вы читали выше, вставляет текущий год в документ. Его нужно разместить там, где у вас предполагается его написать. Тогда каждый раз этот скрипт будет писать именно текущий год, а не какой-либо еще. Кроме этого, этот скрипт работает во всех броузерах (см. также статью ABC хорошего сайта.) Теперь представьте реакцию пользователя, забравшегося на ваш сайт первого января. А тут бах! и уже страница обновлена. Как будто вам больше делать нечего, как в новогоднюю ночь обновлять свой сайт, вместо того, чтобы спокойно есть икру, да запивать ее шампанским…

Вот, в предыдущей статье (см. также статью Стильность сайта), я затронул тему графических элементов. Давайте поговорим сейчас именно о них.
Ого, скажете вы, дело уже дошло до графических элементов. Ничего. В веб.дизайне все просто, главное начать. Итак, что же подразумевается под этим термином? Графические элементы встречаются повсеместно: начиная от логотипа сайта, и заканчивая различными иллюстрациями к тексту, простыми фотографиями и другими вещами, на которые только хватит вашей фантазии. Здесь главное научиться правильно их размещать, соотнося с текстом, к которому они относятся; кроме этого, их нужно правильно делать.
Не важно, в каком графическом редакторе вы привыкли работать. Как правило, все они позволяют создавать приличные иллюстрации и сохранять их в нужные нам форматы. Что есть формат графики в рамках веб-сайта? На сегодняшний день доступны лишь два формата, совместимые с любыми графическими броузерами (см. также статью ABC хорошего сайта.) Это форматы GIF и JPEG. Остановимся на каждом из них и рассмотрим детально их особенности.
Итак, первый формат из малочисленного списка — GIF — Graphics Interchange Format — применяется, прежде всего, для создания различных элементов интерфейса и не претендует на высокое качество результатов. Максимум, на что способен GIF — содержать не более 256 цветов, быть прозрачным, быть контейнером для нескольких изображений (получается анимация) и содержать информацию о его создателе. Из достоинств следуют и его недостатки, как, например, невозможность передать качественную фотографию с богатой палитрой и плавными переходами между различными цветами.
Если же нужно подчеркнуть прелести именно переходов, градиентов и плавных цветов, то вам остается использовать другой формат — JPEG — Join Photographic Experts Group. Именно он используется для вставки изображений фотографического качества в ваши веб-страницы. Он позволяет хранить 16,7 миллионов оттенков, что приводит к хорошему качеству хранения фотографий. Но у этого формата есть основной недостаток, а именно сжатие информации с потерей качества, за счет чего достигается небольшой размер выходного файла. Именно степень сжатия определяет качество, соотносимое с размером файла. Чем выше сжатие, тем, логично, меньше размер файла, но и меньше качество изображения.
Главным спорным вопросом каждого профессионального веб-дизайнера является тот, что зачастую бывает очень сложно определить степень важности картинки и, как следствие, степень его сжатия. Для вас, быть может, картинка покажется малозначительной, тогда как серфер, искавший именно эту иллюстрацию, будет слегка разочарован и начнет закидывать вас злобными письмами. Или же вообще направит свой броузер на другой сайт, где эта же картинка, пускай дольше загружается, зато имеет более приемлемое качество.
Такого, естественно, не хотелось бы пожелать никому, но факт остается фактом.
Другой пример из жизни, тоже связанный со степенью сжатия файла в формате JPEG. Дизайнеру, особенно начинающему, трудно соотнести “на глазок” подобающий размер иллюстрации, что иногда приводит к плачевным последствиям. С одной стороны, картинка может оказаться слишком маленькой, что повлияет на детализацию самого изображения. Проще говоря, пользователи не смогут разглядеть того, что вы им заготовили.
С другой же, противоположной, стороны, фотография вашего любимого кота может оказаться настолько огромной, что это повлияет не только на раскладку сайта, но и на время загрузки (увы, но я опять обращаюсь все к той же статье; см. также статью Время загрузки.) Но, бывают и исключения: если размер фотографии этого кота пропорционален любому разрешению экрана, ее могут загрузить те, кто является фанатом кошек и поместит ее на своем рабочем столе. Либо же вы создаете коллекцию обоев для пресловутого рабочего стола.
В любом случае, необходимо соотносить цели и задачи, поставленные перед вами при создании иллюстраций: не нужно сильно усердствовать, а взять и поэкспериментировать. Какая степень сжатия подойдет лучше для ваших задач, ту и используйте.
Главное в подготовке иллюстраций — индивидуальный подход к каждой картинке.

Итак, поговорим о дизайне? Думается мне, что если вы последовательно дошли до этой статейки, вам это интересно. Тогда вы на правильном пути к созданию стильных сайтов.
Что же такое этот стильный сайт? Прежде всего, это сайт, который содержит полезную информацию, именно ту, за которой к вам пришли ваши пользователи. Именно информация решает все. Надеюсь, вы правильно понимаете саму суть термина информации. Это не только аналитические тексты, статьи, рецензии; это могут быть даже красивые обои для рабочего стола. Главное заключается в том, что ваш стильный сайт содержит ту информацию, которая нужна пользователю, и эти данные содержатся только у вас, и более нигде не встречаются.
Во-вторых, стильный сайт определяется набором страниц, визуально связанных друг с другом. Все страницы вашего сайта должны автоматически отвечать требованиям данного сайта; быть с ним в одном духе, иметь одинаковую структуру, дизайн, логотип, меню и так далее.
В-третьих, стильность сайта можно определить по подбору цветов, отвечающих множеству требований: эргономическим, стилистическим. профессиональным и удобоваримым. Серфер не прийдет на ваш сайт еще раз, если ему что-то не понравилось (Я, конечно, понимаю, что абсолютно всем угодить, в принципе, невозможно. Но если вы сделаете хотя бы попытку, это уже будет означать, что вы на правильном пути.)
В-четвертых, стильный веб-сайт, это тот сайт, который известен. Он может быть известен за что угодно. Быть может, вы создадите что-то необычайно новое в дизайне, а пользователи оценят сотворенное вами творение по достоинству, расскажут о нем своим друзьям и цепочка пойдет развиваться в вашу пользу. А может, наоборот, у вас получится не ахти какой дизайн, но информация, содержащаяся на страницах сайта, окажется такой нужной и полезной, что ваши серферы будут ходить к вам только за ней, поборов позыв использовать пакетик от созерцания на ваши цвета, логотипы, меню и все остальное (надеюсь, что это к вам не относится, ибо, дочитав до сего места, вам должно быть действительно хочется создать нечто особенное.)
Пятая причина, по которой ваш сайт может оказаться популярным, это время загрузки. Да, да, я опять вспоминаю ту статью (см. также статью Время загрузки.) Я не могу о ней забыть лишь потому, что я не видел нормального интернета в своей жизни. А популярность здесь скрыта в том, что серфер не будет ждать необходимую ему информацию целый час, когда он будет знать, что у вас дают тоже самое, но на порядок, а то и два, быстрее, чем на других сайтах (здесь оговорюсь по поводу того, о чем я повествовал выше — об информации. Дело все в том, что интернет, по сути своей — большая помойка (извините те, кто со мной не согласен, но можно поспорить об этом), где отыскать крупицу важной информации порой бывает очень сложно. Поэтому многие создатели сайтов, не проведя анализа “рынка услуг”, вывешивают уже существующую информацию. Пусть она будет и у вас, но предоставьте ей свободный и быстрый доступ к конечным пользователям.)
Пожалуй, вы поняли, с теоретической точки зрения, принцип стильности. Теперь же поговорим о вещах более земных. Или о том, что еще должно быть на страницах стильного сайта.
Итак, у нас есть четкая, структурированная информация. Следовательно, навигация по сайту нам понятна и доступна для мозгов серфера, забредшего к вам в гости. Кроме этого, графическое оформление всего сайта сочетается со всей цветовой гаммой каждой из страниц. Еще, каждая страница имеет ярко выраженную причастность ко всему сайту (кроме, пожалуй, одной страницы, о которой речь пойдет в одной их последующих статей.) Кстати, о цветовой гамме: она должна повторяться на каждой странице, независимо от вашего желания что-либо поменять в каком-то разделе с целью выделения его как бы “не от мира сего”.
Кроме всего прочего, вы должны разделять большие блоки текста параграфами, для их большего удобства при прочтении. С технической точки зрения, можно делать параграфы как у настоящей статьи, но можно и отойти немного от стандартов и попробовать сделать отступы или выступы. Главное не совмещать два этих способа (разделение пустой строкой между параграфами и создание отступов/выступов красных строк. Получится каламбур.)
Ну, а самое последнее, но не последнее по важности — шрифт — должен быть одинаковым в рамках хотя бы одной статьи. Вы можете использовать что-то другое для меню и каких-либо других элементов интерфейса, но в пределах одной связной статьи он должен иметь одни и те же характеристики (гарнитура, кегль, начертание, стиль и цвет.) Конечно, как и везде, есть исключения и из этого правила. Здесь, в этих заметках, я использую немного другое начертание базового шрифта — курсив — исключительно для того, чтобы выделить важную информацию. Но я знаю этот закон и могу позволить себе небольшие исключения из правил. Не люблю рамки, меня ограничивающие.

Если вы разобрались с арсеналом веб-дизайнера (см. также статью Арсенал), поговорим о той части работы, которую нужно выполнить еще до открытия любого HTML-редактора и начала кодирования. Речь здесь пойдет о том, что нужно подготовить, прежде чем начинать писать код страниц.
Мнение того ошибочно, кто считает, что сайт начинается с дизайна. Это далеко не так, ибо, прежде чем вы начнете набрасывать эскизы вашего сайта, вам необходимо четко представлять его структуру, содержание, различные графические элементы и так далее.
На первом шаге очень важно начать со структуризации того, что вы хотите разместить на страницах вашего сайта. Да, может быть, вы уже знаете, что именно вам нужно показать пользователю, но теперь это необходимо выстроить таким образом, чтобы всем была очевидна логика подачи информации, ее структура, ход вашей мысли. Если вы добьетесь логичности размещенных страниц, считайте, что половина успеха сайта у вас уже в кармане.
Структуру сайта можете нарисовать где угодно: на листке бумаги, в простеньком текстовом редакторе операционной системы — в последствии никто не будет ее у вас спрашивать (разве что она понадобится вам для создания удобной карты вашего сайта.)
Отдельно хочется сказать несколько слов о меню сайта. Именно структура ваших страниц в будущем выльется в меню, которое должно быть удобным и понятным. Разумеется, у вас возникнет желание разместить абсолютно все разделы вашего сайта в одном меню. Здесь возникает проблемка. Все дело в том, что любой пользователь интернета не воспринимает меню, состоящее из более чем семи элементов (это связано с психологией человека: ему не будет охота разбираться со сложным меню только ради того, чтобы что-то там отыскать. Он лучше сделает все “методом научного тыка”, чем будет разгребать тонны информации, струящиеся на него только с одного меню.) Идеальное меню — пять пунктов, кратких по формулировке и емких по охвату областей. В середине меню (третьим элементом) поместите самый важный пункт (это уже из области юзабилити — науки, исследующей удобность использования чего-либо.)
Если у вас ну никак не получается всунуть все свои гениальные (и достаточно самостоятельные) разделы в пять пунктов меню, можно создать меню второго уровня (меню, которое зависит от выбранного пункта в меню первого уровня.) Так вы сможете вложить в каждый из пяти пунктов верхнего меню еще как минимум по пять элементов, особо не значимых, но являющихся, тем не менее, важными для ваших пользователей. Итого получится двадцать пять (если брать по семь пунктов верхнего меню и по столько же каждого раздела, получится уже сорок девять пунктов!) различных пунктов, в которые, вероятнее всего, вы уложитесь.
После продумывания структуры и, соответственно, меню, можно приступить к подготовке текстов ваших страниц. Ошибкой будет считаться то, что вы выложите тексты страниц в том виде, как они были вами разработаны. Все дело в том. что пользователи привыкли видеть в интернете лишь краткие обзоры чего-либо (это связано, прежде всего, с ограниченной скоростью доступа в интернет, вследствие чего увеличивается время загрузки длинных страниц; см. также статью Время загрузки), но эти краткие обзоры должны иметь ссылки на более подробные разъяснения. В итоге, кроме оговоренных случаев, ваши страницы должны иметь ссылки на подробности, в то время, как сначала пользователю предлагаются только заголовки.
Каковы же эти оговоренные случаи? Прежде всего, это, к примеру, книги, выложенные в интернет. Здесь будет уместно разместить на главной странице содержание, а от него уже пользователь с помощью гиперссылок перейдет на необходимую ему главу или раздел. Этот сайт тоже, в какой-то степени, является исключением из общих правил: несмотря на то, что имеется содержание статей с краткой аннотацией, сами статьи достаточно велики для беглого ознакомления. Именно для этого на странице с содержанием размещены аннотации к каждой статье (а еще предусмотрен удобный сервис по распечатке статьи для ее прочтения с листа бумаги за завтраком, запивая информацию чашечкой кофе.)
А вот уже после подготовки текстов, выделения главных заголовков и распределения информации по разделам сайта, можно начинать разрабатывать дизайн.

Итак, несмотря на все преграды и препоны, вы решили создать свою первую страничку и поместить ее в Сети. Что же вам потребуется для того, чтобы осуществить данную мечту?
Для самого начала вам необходимо желание создать страницу. Это может быть вызвано тем, что у всех уже есть страница в интернете, а у вас еще нет. Но сначала подумайте, нужна ли она вам? Если ответ положителен, тогда мы продолжим перечислять арсенал начинающего дизайнера.
Во-первых, необходим компьютер. Он нам понадобится для того, чтобы создавать наши страницы, а в последующем, размещать их в Сети. Компьютер должен быть мультимедийным, если вы собираетесь использовать различные мультимедиа-технологии. Но для начала подойдет самый простой компьютер. Как правило, то, что продается в ближайшем салоне, вам подойдет и по цене, и по возможностям.
Во-вторых, нужен любой HTML-редактор. На ваш вкус предлагается множество редакторов, но все они различны. Попробую объяснить, какой лучше выбрать.
К первой категории относим HTML-редакторы WYSIWYG (What You See Is What You Get — что видишь, то и получишь.) Они хороши тем, что вы форматируете страницу по вашему вкусу, не зная языка HTML. К недостаткам относят большие размеры полученных файлов (см. также статью Время загрузки), недоступность настроек HTML пользователем и многие другие. Примеров масса; пожалуй, самый ужасный из всех доступных — Microsoft FrontPage (я ничего не имею против компании, но этот продукт действительно вызывает массу нареканий у пользователей этого продукта. Я же к таким не отношусь.)
Кроме того, данные редакторы, как правило, осуществляют привязку к какому-либо лидирующему броузеру, что недопустимо дизайнерами-профессионалами (см. также статью ABC хорошего сайта.)
Ко второй категории отнесем обычные редакторы, позволяющие сохранять документы в формат HTML. Самый распространенный вариант — использование стандартного Блокнота из комплекта поставки Windows. Этот редактор присутствует во всех версиях этой ОС, и избавиться от него невозможно. С другой стороны, он является оптимальным редактором для создания страничек. Его недостаток — он не предназначен для создания документов на языке HTML. Здесь вы не найдете справки по тегам, удобного меню для вставки тегов в документ и прочих нужных вещей. Зато именно в недрах блокнота порою рождаются гениальные сайты.
Возможны варианты Блокнота с подсветкой тегов, помощью и прочими атрибутами, но это уже вам решать. В своей работе я использую редактор HTML Notepad (www.cranial.com/software.)
В-третьих, вам понадобиться любой текстовый процессор с возможностью проверки орфографии. Чтобы хоть как-то загладить свою вину перед Microsoft, скажу, что я использую ее продукт Word.
В-четвертых, необходим графический пакет для создания графики на ваших страницах. Это может быть любой редактор, сохраняющий созданные вами шедевры в форматы JPG и GIF (об этих форматах пойдет речь в последующих статьях.) Если вы хорошо рисуете, вам эти программы докажут, что рисовать вы умеете, но делаете это гораздо медленнее, чем они накладывают различные эффекты и получают тот же самый результат…
Хорошим подспорьем в вашей работе будет сканер. Не всегда удается найти уже готовое изображение и разместить его на странице; это устройство позволит получить цифровую копию любого объекта и уже затем делать с ним все, что угодно. Лучше всего подойдет планшетный сканер, с ним удобнее работать, да и хлопот меньше.
Вот, в принципе, и все, что вам необходимо для работы с HTML-документами. Освоив работу со всеми этими нехитрыми приспособлениями, вы начнете создавать ваши страницы, а работа эта доставит вам массу приятных моментов.

Время загрузки — пожалуй, одно из самых важных аспектов, на который следует обращать свое внимание при проектировке сайтов. Из своего опыта скажу, что ни один нормальный серфер не будет несколько минут (более 3-х), сидя перед пустым броузером, ожидать появления вашего сайта. Поэтому нужно рассчитывать так, чтобы основная часть появилась как можно быстрее, чтобы пользователю было над чем подумать, пока “грузятся” все ваши картинки и анимации.
Как посчитать размер страницы? Очень просто. Достаточно сложить размеры файлов непосредственно самого файла страницы и всех картинок, баннеров, анимаций, flash-роликов, апплетов и всего остального, что относится к этой странице. Полученный результат и будет являться показателем для вас. Если он слишком огромен, нужно предпринимать определенные шаги в сторону его уменьшения.
Однако, если он покажется вам достаточно небольшим, это не означает, что вам нужно еще чего-нибудь добавить. Если вставка дополнительной картинки действительно необходима и оправдана содержанием страницы и ее компоновкой, тогда флаг вам в руки. Но если она вообще не к месту, то лучше от подобного шага вообще воздержаться.
Кроме того, никогда не забывайте, что вы у пользователя не одни и он вряд ли будет путешествовать по интернету с одним броузером. В итоге канал связи делится на несколько броузеров, подгружающих разные страницы. Скорость, соответственно, падает и в плюсе оказываются те сайты, которые открываются до того, как пользователь переключится на другой броузер, чтобы, пока ваша загружается и отображается, почитать другой сайт. В интернете, в принципе, все строится на том, чтобы завлечь посетителя, предложить ему именно то, что он ищет и показать, что все это очень быстро отображается.
Теперь поговорим о конкретных размерах и цифрах. Итак, у вас есть некоторый сайт, предполагающий сплэш-страницу (“входная дверь” вашего сайта, как правило, содержит большой логотип сайта, либо анимационный flash-ролик). Поскольку на этой странице нет ничего, кроме одного большого изображения или анимации, все нормы размеров отдаются только этому большому визуалу. Реальный размер сплэш-страницы может быть в пределах 100 КБ. По правилам, если уж делать анимацию, то она должна выводить надпись, сообщающую, что идет процесс ее загрузки.
Откуда взялась цифра в 100 КБ? Прежде всего, по статистике, девять из десяти пользователей интернета получают информацию со скоростью, не превышающей два килобайта в секунду. Теперь разделим эти несчастные 100 КБ на два и мы получаем время загрузки страницы — 50 секунд (при условии, что пользователь сидит в Сети с одним броузером, что нереально). Это более-менее приемлемая плата за то, чтобы увидеть ваш сайт (уж хотя бы первую его страницу). Я ограничил бы время загрузки сплэш-страницы в 25-30 секунд, примерный размер странички получается около 60 КБ. Почему я такой бука? Да потому, что сплэш-страница, по своей сути, не содержит ничего полезного. Здесь фирма или человек говорит серферу что-то, типа “вот смотри какой я уникальный и неповторимый. Вот моя заставочка, а вот и крупный логотипчик. Ну, давай, скорее заходи, посмотри, что там внутри, под красивой обложкой!” Не часто, но бывает, что под обложкой, яркой и красивой, нет абсолютно ничего, что было бы полезно пользователю в настоящий момент.
Имейте в виду, что пользователь может закрыть окно с вашим сайтом еще в процессе просмотра заставочки…
Вот с внутренними страницами дело обстоит проще. Броузеры отображают страницы (если они правильно структуированы) по частям, и пользователь увидит первый блок информации достаточно быстро. Но лимит в 100 КБ по-прежнему остается в силе. После того, как отобразится вся страница, броузер начнет показывать и сопутствующие картинки.
Как вы думаете, где лучше всего отображать самую важную информацию? Правильно! В самом верху страницы. Этот прием называется “кверху от сгиба” и был заимствован из типографского дела. Именно поэтому место на первой информационной странице сайта, да еще в видимой всем пользователям области (области, которая видна, не прибегая к услугам полос прокруток броузера) стоит огромных денег для рекламодателей и усилий для дизайнера.
Вот именно эту область следует разрабатывать с особой тщательностью, стараться, чтобы хотя бы ее размер не выходил слишком далеко от установленных лимитов, и чтобы эта страница появлялась перед пользователем во всей своей красе задолго до того, как он устремит свой взгляд на другую, конкурирующую, страницу.
В качестве примера можно показать главную страницу этого сайта. Ее размер, включая все картинки, составляет всего 20 КБ. Учитесь, господа!

Сейчас мы рассмотрим самое первое и самое главное правило при создании хороших, а порою даже отличных, сайтов — ABC хорошего сайта.
Что такое ABC? ABC — английская аббревиатура, придуманная мною для упрощения понимания самого термина. Обозначает оно All Browsers Compatible, что в переводе означает Совместимость со всеми броузерами.
Почему именно так? Потому что необходимо, чтобы любой пользователь смог получить информацию, содержащуюся на вашем сайте, независимо от того, какая у него операционная система, каково разрешение и количество цветов, отображаемых на его экране, какой броузер установлен по умолчанию, какой выбран шрифт и его размер, да и еще целая прорва личных настроек.
Может даже случиться такой казус, что ваша страничка смотрится великолепно, допустим, с минимальным разрешением 800х600 (см. также страницу Полезное), но вы не учли, что пользователь может запустить ICQ и размер броузера, даже “распахнутого” на весь экран, станет значительно меньше, чем 800 пикселей по ширине…
Вот почему нужно прикидывать свои возможности и способности пользователей прилеплять по краям своих экранов различные утилиты, вроде той же пресловутой “Аськи”.
Вот вы можете спросить про шрифты и их размеры, упомянутые чуть выше. Разумный вопрос. Все дело в том, что многие пользователи никогда не заглядывают в настройки своих броузеров и все параметры заданы там по умолчанию и применяются для каждого просматриваемого ими сайта. И эти пользователи не знают, что для удобства чтения можно поставить кегль шрифта побольше и не “ломать глаза”. Пользователи более продвинутые, наталкивающиеся на мелкий шрифт, автоматически переключают размер и читают в свое удовольствие.
Быть может, даже вы не знаете о такой возможности броузеров. Что ж, тогда хорошо, что вы читаете это здесь, возможно только перед созданием своей первой странички. Это хорошо, ибо вы это узнаете, еще не успев “наломать дров” и не получив негативных отзывов от ваших же посетителей.
Дизайнеры разрешают этот вопрос несколькими способами. Наиболее оптимальным я считаю тестирование вашего сайта во всех мыслимых и немыслимых броузерах и при различных настройках шрифта и монитора.
Иными словами, нужно переключаться между броузерами еще во время создания сайта, а не тогда, когда до его запуска в большую Сеть остается пара дней, а вы только обнаружили, что все картинки разъезжаются под влиянием разрешения экрана, или, что еще хуже, шрифта. Хотя, одинаково неприятно.
Другой хитрый прием — использование каскадных таблиц стилей (CSS — Cascading Style Sheets). Казалось бы, установил все размеры по умолчанию для каждого объекта на странице, и проблема решена. Но и здесь есть свои подводные камни. “Собака зарыта” там, где ее никто не ждет: у пользователей могут быть очень старые броузеры, которые вообще не понимают стили даже первого уровня! Такое уже практически невозможно представить, но, тем не менее, крупные сайты все еще регистрируют пользователей, использующих Netscape Navigator второй версии…
А сейчас о самом хитром приеме гениальной дизайнерской мысли: о картинках. Чтобы не зависеть от шрифтов, некоторые продвинутые веб.дизайнеры заключают весь текст в картинки и затем помещают их на свои страницы, избегая тем самым все эти настройки.
Недостатков у такого способа масса. Во-первых, такой текст очень плохо поддается корректировке уже после публикации сайта в Сети. Обычный текст в коде HTML исправить очень просто, с этим может справиться даже малоопытная секретарша. А вот попробуйте-ка исправить текст, намертво “зашитый” в картинку!
Во-вторых, эти самые картинки “пожирают” тонны трафика. Понятное дело, страницы с таким “картиночным” текстом загружаются на порядок медленнее, чем их собратья с обычным текстом. Время загрузки — вообще отдельная тема для разговора, об этом мы поговорим в следующей статье.
А в-третьих, пользователям некоторых броузеров все равно так и не удастся прочитать текст вашей страницы, если вы еще и картинки неправильно вставите…
В качестве резюме этой статьи, можно и нужно отметить, что надписей, вроде “Эту страницу лучше всего смотреть в броузере таком-то с разрешением таким-то”, быть вообще не должно. Если вы не поняли, почему — читайте еще раз, внимательно.