Практический веб-дизайн - основы веб-дизайна

Однажды днем я сидел на крыльце со своей старой тетей Грейси, потягивая кукурузный ликер и обмениваясь историями о старых днях, когда эта тема, как ни удивительно, переключилась на веб-дизайн.

«Вы, молодые бродяги-болтуны, задумались обо всем, что хорошо работало в старые времена Интернета», — прорычала она, уставившись на меня одним водянистым голубым глазом. Она подскочила в общем направлении клюшки и пошла дальше.

«Все это Flish, Flash и графика прыгают вокруг в разные стороны и рисуют лёгкие из-за меня на экране, сорок разных цветов, кружащихся в разные стороны, достаточно, чтобы старуха вроде меня захотела отключиться мой старый двухъярусный ПК, и я собираюсь вздремнуть. Я участвую, когда веб-страницы имели смысл. Я могу загрузить один, получить то, что мне нужно, обойти его и продолжить свой бизнес. В настоящее время я не могу не делайте ни головы, ни хвоста из тех половин страниц, которые я пытаюсь донести, и у меня нет терпения сидеть и разбираться со всем этим. Я бы скорее потратил свои вечерние ласки из лоскута томата. «

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

Статья разбита на 2 части:

Часть 1 : Основы

Часть 2 : Хорошо выглядеть

Часть 1: Основы

Определение хорошего веб-сайта: сайт, который предоставляет качественный контент для своей целевой аудитории и делает это с элегантностью и стилем. — Проект DevX Cool

Правило «Делай это проще, глупее» опробовано и верно, но это еще не все, что нужно для веб-дизайна. Геймеры, например, ожидают загруженную страницу с множеством сложной графики, Flash-эффектами и тому подобным. Обычная преуменьшенная страница с не совсем белым фоном и типичным меню ссылок, аккуратно сворачивающихся вниз по левой стороне экрана, оставляет эту аудиторию холодной; Очевидно, что люди, которые разработали этот сайт, не на высоте — эти парни любят много гудков на страницах, которые они посещают.

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

Нацельтесь на свою аудиторию — визуально

Ключевым моментом здесь является знать, кто будет использовать вашу страницу, и разрабатывать с учетом их потребностей и желаний. Правило KISS является хорошим в большинстве случаев. Если вам что-то не нужно — рамка, анимированная графика, Flash-анимация, необычный эффект DHTML — не используйте это. С другой стороны, вам не нужна страница со всей привлекательностью овсяной каши прошлой недели; Мягкая, неинтересная страница, полная неразрывных блоков текста с серой цветовой схемой и тоскливой графикой, не привлечет внимание. Все в модерации, ребята … включая модерацию. Рассмотрите свою аудиторию первым и последним, и создайте свой сайт соответственно.

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

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

Хороший веб-дизайнер сможет разработать все четыре сайта, а также другие. Не забывайте, что если вы разрабатываете веб-сайт для корпорации или бизнеса, очень вероятно, что на них есть товарные знаки, логотипы, цветовые темы и другие элементы, которые необходимо будет включить в вашу схему дизайна. Как напоминает нам Мэри Э. Картер: «Цвет передает тонкую, но важную« информацию »о вашем сайте задолго до того, как люди прочитают его содержимое». Картер также предоставляет нам наиболее полезный набор цветовых палитр, которые вызывают определенное настроение . Проверьте это!

Обращаясь к нескольким аудиториям

Если вы пытаетесь создать страницу, которая понравится как тете Грейси, так и ее гиперактивному внуку, увлекающемуся видео, то вам придется пойти на некоторые компромиссы, которые могут оттолкнуть обе аудитории. Возможно, вы захотите усовершенствовать свой сайт, чтобы привлечь более узкую аудиторию, или вы можете даже создать отдельные страницы с разными принципами дизайна для разных аудиторий. В этом случае вы могли бы преуспеть в создании вводной или «дверной проемы» страницы со ссылками на страницы «whiz-bang» и «sedate» — содержание, по сути, может быть одинаковым, но стиль дизайна будет драматичным. разные.

Рассмотрим подключения

И не забывайте, что ваша аудитория использует для доступа к вашему сайту. Не у всех есть широкополосное соединение или соединение T1; большая часть мира все еще хромает вместе с медленными коммутируемыми соединениями, или должна прыгать по сети через лабиринт сетевых соединений. Эти люди ценят то, что вы ограничиваете использование большой, медленно загружаемой графики или, по крайней мере, предоставляете миниатюры, которые автоматически загружаются и позволяют им нажимать для увеличения (и для более медленной загрузки) дисплея. Помните, что графика .JPG, как правило, больше, чем .GIF или .PNG (Flash-анимация, как ни удивительно, загружается довольно быстро, учитывая их сложность, но она может замедлить страницу, особенно ту, к которой обращаются по коммутируемому соединению). Сложные структуры таблиц тоже могут загружаться, особенно если они заполнены графикой. Медленные серверы вызывают медленные загрузки; если ваш провайдер не может ускорить работу вашего сайта, переключитесь на того, кто может.

Дизайн для World Wide Web — это баланс между графическим «вау» и «сейчас» в реальном времени. — Тони Уилл-Харрис

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

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

Какой вкус HTML выбрать?

Каждая веб-страница соответствует версии HTML (или XHTML, или даже XML, хотя мы не будем вдаваться в них здесь) и определяется кодом DOCTYPE (тип документа). Линия:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

в верхней части вашей страницы (над начальным <HTML> Он поддерживает многие элементы последней версии HTML, 4.01 Strict, поддерживает таблицы стилей по большей части, но также поддерживает большинство устаревших или уже не используемых текущих элементов HTML, фреймы, целевые объекты ссылок и другие атрибуты, не разрешенные в книга HTML 4.01. Этот тип документа также поддерживает старые браузеры, такие как Netscape 4.x, в игре. Если вы разрабатываете в соответствии с последними стандартами HTML и / или используете сложные таблицы стилей, то этот тип документа:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    

"http://www.w3.org/TR/html4/strict.dtd">

следует использовать, но имейте в виду, что многие старые браузеры не будут отображать вашу страницу должным образом. Вы также не можете использовать фреймы, если не используете версию этого типа документа «frameset». Также обратите внимание, что «переходный» DOCTYPE, который я цитирую, не включает URL-адрес DTD или объявление типа документа. Это связано с тем, что использование URL-адресов в элементе DOCTYPE переводит некоторые браузеры, включая IE, в строгий режим, что отрицательно сказывается на назначении «переходного» DOCTYPE.

Конечно, вы можете просто скользить по льду и вообще не использовать doctype на своих страницах (просто используйте <HTML></HTML> Это оставляет браузеру индивидуума выбирать, как отображать страницу, и хотя большинство браузеров справятся с ситуацией просто отлично, некоторые из них заткнутся. Кроме того, вам нужно привыкнуть использовать элемент DOCTYPE. Если вы не знаете DOCTYPE от пишущей машинки, используйте «переходный» тип документа в начале этого раздела. Если вы знаете о различных типах учений или пишете в XHTML, сделайте свой выбор. Решение использовать «переходный» тип документа является безопасным и консервативным, но, безусловно, это не современный выбор. Если вы хотите убедиться, что ваша веб-страница готова для современного просмотра и будет соответствовать текущим и будущим веб-стандартам, вам необходимо узнать о CSS (каскадные таблицы стилей), HTML 4.01 и XHTML.

Примечание. Вы можете посетить W3C Validator, чтобы проверить документ на соответствие стандартам W3C, или воспользоваться знаменитой программой HTML Tidy Дейва Раггетта, которая теперь является проектом с открытым исходным кодом.

Совместимость браузера

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

Несколько лет назад ленивый веб-дизайнер разработал свои страницы с учетом Netscape для Windows; Так как это был безусловно самый популярный используемый браузер, проектирование сайта для пользователей Netscape / PC было «достаточно хорошим», чтобы поймать большинство пользователей и не обращать внимания на остальных. В настоящее время одни и те же ленивые дизайнеры делают свои страницы для Windows и Internet Explorer по тем же причинам. Не очень хороший подход.

Миллионы пользователей Windows по-прежнему используют Netscape (или Mozilla с открытым исходным кодом). Многие другие используют Opera. Некоторые пользователи AOL по-прежнему работают вместе со своими устаревшими браузерами AOL, а некоторые заядлые люди по-прежнему клянутся Lynx, текстовым браузером (есть также удивительно большой контингент пользователей, которые отключают графику и читают только текст). Тогда есть WebTV, с которым нужно считаться. И есть различия между браузерами Mac и браузерами Windows с одинаковым именем, не говоря уже о браузерах Mac Cyberdog, OmniWeb, Chimera, iCab и других. Существуют браузеры для Linux, такие как Konqueror, Opera для Linux, Mozilla для Linux и другие. Согласно архиву браузеров в Evolt, существует более 100 браузеров, которые кем-то используются (ну, ладно, некоторые больше не используются). Иш!

Зачем заботиться растущему веб-дизайнеру? Потому что ваша страница не будет отображаться одинаково от одного браузера к другому. Более подключенный дизайнер использует тот или иной метод, либо на стороне клиента, либо на стороне сервера, чтобы определить, какой браузер использует его / ее посетитель, и «адаптировать» код, который они отправляют этому конкретному браузеру. Если вы можете сделать это, то будьте внимательны, этот раздел слишком прост для вас (возможно, вся эта статья слишком проста для вас!)! Но если вы не хотите или не можете сделать что-то столь изящное, что вы можете сделать, чтобы удовлетворить потребности ваших различных посетителей с их множеством браузеров?

По сути, лучше всего знать о тегах HTML и других функциях и протоколах, которые поддерживаются одним браузером, а другие — нет, и избегать их всякий раз, когда это возможно: на ум приходят печально известные теги «marquee» и «blink» как и iFrames, слои, JavaScript, таблицы стилей, плагины, DHTML и другие. Некоторые из них, такие как «мигающие» теги и слои, давно устарели; другие, такие как DHTML и JavaScript, достаточно актуальны. Если вы используете что-то специфичное для браузера, выберите функцию, которая не критична для возможности просмотра вашего сайта вашими посетителями: пример — это аккуратные цветовые схемы для горизонтальной и вертикальной полос прокрутки, которые предусмотрены в IE. Пользователи Netscape просто получат серые полосы в виде простой Джейн, но им не помешает отсутствие цветных полос прокрутки — это не влияет на то, как ваш сайт представляет свое сообщение и обрабатывает его содержимое. Это яркий пример того, как можно «склеить» страницу для одного браузера, которая не влияет на другой браузер.

Какие функции страниц не совместимы во всех браузерах?

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

 <A HREF="go here.html">Go Here</A>

Почему? Из-за пустого пространства между «иди» и «здесь». IE справится с этим, а Netscape — нет. Если вы хотите, чтобы он работал в Netscape или чем-то еще, вы должны написать это так:

 <A HREF="go%20here.html">Go Here</A>

Если это ваш файл, попробуйте лучше переименовать файл GOHERE.HTML и избежать всей проблемы.

Другим примером является сайт, который хорошо выглядит в IE, Netscape / Mozilla и даже в Konqueror, за исключением того, что шрифты плохо отображаются в последнем. Пользователи Konqueror должны достаточно легко решить проблему с их стороны, щелкнув «Увеличить» в своем браузере. Ваш ответ может состоять в том, чтобы переработать вашу страницу так, чтобы она выглядела так же хорошо в Konqueror, как и в браузерах Windows / Mac, или вы можете позволить пользователям Konqueror справиться с этим самостоятельно. Если вы работаете с широкой аудиторией, в основном пользователей Mac и Windows, лучше всего оставить себя в покое и позволить пользователям Konqueror справиться с этим самостоятельно. Если у вас большой компонент пользователей Linux, вы можете решить проблему, чтобы пользователи Konqueror не сталкивались с этой проблемой. Это ваш звонок и ваша аудитория.

Максимально совместимый

Несовместимость браузера — огромная проблема, с которой сталкиваются на всех уровнях Интернета. Между тем, вы можете справиться с этим, узнав о множестве тегов HTML, которые работают в одном браузере, но не работают в другом. Вы можете решить, использовать ли расширения, плагины, такие как ActiveX, JavaScript и даже таблицы стилей, которые не очень хорошо работают в старых браузерах (и могут быть сомнительными в некоторых современных браузерах), но необходимы в современном кодировании HTML , Вы можете решить, использовать ли более современную графику, такую как .PNG, которая однажды станет веб-стандартом, но пока не работает в старых браузерах.

Быстрое и грязное исправление: убедитесь, что ваша страница выглядит хорошо в Internet Explorer, Netscape 4.x, Netscape 6 / Mozilla и Opera — это означает загрузку этих браузеров на ваш компьютер и тестирование вашего сайта в них (найдите старые браузеры Netscape, доступные для скачать в архиве Netscape ). Экономно используйте такие функции, как таблицы стилей, JavaScript и DHTML; если вы используете эти функции для критических элементов вашей страницы, таких как навигационная схема, предоставьте своим менее актуальным посетителям более технологически консервативную альтернативу. Не используйте код, специфичный для браузера, и ожидайте, что ваши посетители без этого конкретного браузера просто «преодолеют его», и не обходите стороной проблему с надписью «Работает лучше всего в XXX браузере». Постарайтесь удовлетворить потребности каждого члена вашей аудитории и помните, что вы не можете создать сайт, который будет работать для всех и везде.

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

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

Психология навигации

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

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

Лучшие советы для хорошей навигации

При разработке любой навигационной схемы необходимо помнить несколько вещей.

Уточни

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

Рассмотрим карту сайта

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

Вы должны убедиться, что ваша карта сайта легко доступна по ссылке или кнопке с надписью «Карта сайта» (удивительно!), И что ваша карта облегчает, а не усложняет навигацию по сайту. Карта вашего сайта должна быть намного проще по дизайну, чем обычные страницы, избегая графики и эффектов в пользу простых, легко используемых текстовых ссылок. Идея хорошей карты сайта — предоставить пользователю единый обзор навигационной схемы и информационной структуры вашего сайта. Держите их особенно простыми и удобными в использовании; не заставляйте пользователя работать, чтобы понять, как функционирует карта.

Включить поиск по сайту

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

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

Навигация No-Nos

Некоторые общепринятые навигационные «нет-но» ходили по сети столько, сколько люди разрабатывали веб-страницы. Многие из них все еще действительны, в то время как другие устарели и менее применимы. Вот некоторые из них, основанные в основном на наблюдениях гуру веб-дизайна и придурка Якоба Нильсена:

Рамки

Раньше это был большой «багбир» в веб-навигации. Я ненавижу фреймы, вы ненавидите фреймы, мы не будем посещать сайты, которые используют фреймы. Ну, это больше не так. Старые версии Netscape и MSIE обрабатывали фреймы довольно плохо, но проблемы с обработкой фреймов в этих браузерах уже давно решены, поэтому фреймы уже не те, что раньше. Тем не менее, с фреймами может быть немного неуклюже работать, поэтому, хотя использование фреймов не обязательно является ошибкой дизайна, будет хорошей идеей не использовать их, если в этом нет особой необходимости. Обычно хорошо продуманная структура таблиц работает лучше для большинства сайтов, чем для фреймов. Заметьте, я сказал «обычно», а не «всегда». Есть моменты, когда фреймы работают очень хорошо, особенно если вы хотите, чтобы заголовок или навигационная структура всегда были видны.

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

 <META HTTP-EQUIV="Window-target" CONTENT="_top">

Подробнее об использовании мета-тегов см. В первой части этого столбца, « Топ 15 мета-трюков» .

Убедитесь, что на каждой странице вашего сайта есть этот тег в разделе <HEAD> И не позволяйте вашей странице «заманивать в ловушку» страницы других людей. Это плохой дизайн и грубый

Неиспользуемые кнопки Назад

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

Нильсену действительно не нравятся ссылки, которые заставляют страницу открываться в новом окне; Я не так непреклонен в этом вопросе. Бывают случаи, когда для ссылки уместно и желательно открывать страницу в новом окне, хотя лично я предпочитаю сделать свой выбор, щелкнув ссылку правой кнопкой мыши и выбрав опцию «Открыть в новом окне», когда она мне понадобится. на новом дисплее. Это правда, что засорение машины серфера одним новым окном браузера за другим может сбить с толку и раздражать серфера, особенно новичка, и может затруднить неопытному серферу навигацию по его следу, особенно тому, кто просматривает ваш сайт в полноэкранном режиме. Несколько окон браузера также поглощают системные ресурсы и могут даже привести к сбою компьютера серфера. И не забывайте, что люди, которые используют Mozilla, Opera и любое количество надстроек Internet Explorer, имеют свои собственные панели навигации с вкладками, которые позволяют им просматривать несколько страниц в одном окне.

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

Длинные времена загрузки

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

Безотносительно причины большинство серфингистов не будет ждать больше чем несколько секунд, чтобы кое-что появилось. Они не хотят ждать, пока этот крутой Java-эффект или медленный сервер вашего хоста выполнят свою задачу; если что-то не появляется почти сразу, они щелкают, чтобы найти что-то подходящее. Это вдвойне верно для легиона веб-пользователей, которые застряли при использовании коммутируемых соединений.

Необычные варианты меню

Меню DHTML и JavaScript, которые «выдавливаются» или всплывают из одной ссылки при наведении мыши, могут быть очень яркими и эффективными, но если они блокируют просмотр содержимого вашей страницы, они становятся таким же препятствием, как и целенаправленное дополнение. Будьте внимательны, располагая их, и тщательно тестируйте их в разных браузерах (и помните, что старые браузеры могут отображать их некорректно, поэтому не полагайтесь на них как на единственный навигационный выбор).

Сложные URL

Раньше это было проблемой в дикие и неясные дни Интернета. Сегодня многие пользователи почти не обращают внимания на URL-адреса, позволяя своему браузеру справиться с запоминанием сайта с закладками и полагаться на такие функции, как AutoComplete в IE, для работы с длинными URL-адресами. Большинство сайтов также имеют некоторую навигационную поддержку, поэтому запоминание длинных URL-адресов не является рутинной работой. Тем не менее, короче, тем лучше.

Страницы-сироты

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

Нестандартные цвета ссылок

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

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

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

Нестандартное использование функций GUI

Это включает в себя «радио» кнопки, которые не требуют нажатия кнопки OK, чтобы вступить в силу, выпадающие меню, которые иногда требуют, чтобы кнопка Go работала, а иногда нет, и так далее. Здесь нет строгих правил, которым нужно следовать, но имейте в виду, что последовательность соответствует простоте использования. В большинстве случаев людям нравится работать так, как они ожидали. Не заставляйте свои функции графического интерфейса работать иначе, чем принятые стандарты только потому, что вы можете; убедитесь, что ваши функции работают легко и понятно.

Сайты, которые неясны относительно их цели

О чем ваш сайт? Пытается ли он продать мне машину, дать мне совет по ремонту моего компьютера, продвигать вашу политическую точку зрения или выставлять напоказ своих кошек? Что бы это ни было, пусть посетитель сайта сразу узнает, чем занимается ваш сайт. Если им интересно, что они делают на вашем сайте, и что ваш сайт может предложить, скорее всего, они не задержатся достаточно долго, чтобы найти ответ. В частности, для коммерческих сайтов крайне важен «слоган», состоящий из одного предложения, который сразу привлекает внимание зрителя.

Страницы «Всплеск»

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

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

Страницы без URL

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

Вводящие в заблуждение или плохо названные закладки или избранное

Стандарт для закладок — для страницы использовать заголовок из тега META «Заголовок» в качестве описания закладки. Если заголовок очень длинный и заполнен модными словечками и рекламой, то человек, который добавляет страницу в закладки, не узнает страницу из заголовка и должен будет переименовать ее так, чтобы он нашел ее полезной. И иногда другие страницы «угоняют» связанные страницы со своими собственными заголовками, когда в закладки — нет-нет во всех смыслах этого слова. Если ваш заголовок начинается с «The» или «Welcome to…», тогда ваша страница добавляется в закладки под буквой «T» или «W», а все остальные страницы начинаются одинаково. Ваш заголовок должен быть кратким, описательным и полезным в чьей-либо закладке.

Ссылки на не-HTML страницы без предупреждения

Можно ссылаться на файл .TXT, .DOC или .PDF, но, пожалуйста, дайте мне знать, на что я собираюсь ссылаться. Если у меня не установлен Acrobat Reader или текстовый процессор с поддержкой .DOC, я не смогу использовать документ, на который вы мне отправляете. И такая загрузка документа в мой браузер может вызвать непредвиденное поведение, которое может быть запутанным или даже пугающим для начинающего пользователя. Нет проблем с ссылками на эти документы, но предупреждения всегда должны быть предоставлены. Также вежливо предлагать ссылки на программное обеспечение, которое может понадобиться пользователям, особенно в случае Acrobat Reader.

Усложнение связи с владельцем сайта

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

Цвета фона

Рабочее слово здесь — «фон»: что-то приятное и ненавязчивое для вашего текста и графики, на которое можно сесть, не привлекая к себе внимания и не мешая. Если вы выбираете цвет фона, помните, что ваш текст должен быть читаемым поверх него — некоторые варианты цвета не только напрягают глаза, но и бросают вызов способности монитора правильно отображать цвета. Черный текст на красном фоне отправляет меня за бутылку аспирина (а тетю Грейси за ее палку). Оранжевый текст на розовом фоне хорошо работает, если вы создаете сайт для фанатов Барби, но не слишком много других. Психоделические корни хороши, если вы думаете, что мир вращается вокруг Grateful Dead, но хотя мне нравится группа, мне не нравится выбор фона, как и большинство серферов.

Если вы используете заштрихованный фон (то есть относительно тонкий левый столбец цвета, который повторяется до конца), это хорошо само по себе, но помните, что вам не нужен основной текст или графика перекрытие в границу; более того, что бы вы ни указывали в этой рамке, оно должно не только не перекрывать себя, но и должно быть подходящим цветом, чтобы выделиться из любого выбранного вами цвета. Если вы решили использовать фоны с рамками, некоторые простые способы сохранить порядок включают использование <UL><LI><BLOCKQUOTE> Таблицы — еще один хороший способ предотвратить переползание текста в рамку. И, конечно же, таблицы стилей позволяют вам установить точное количество отступов — вероятно, лучший путь.

Нужно ли упоминать анимированные фоны?

Белый или светлый текст на черном или темном фоне может выглядеть «сексуально» или драматично, и я видел несколько чудесно сделанных веб-сайтов с этой схемой, но у некоторых серферов есть проблемы с фокусировкой на них. И не забывайте, что значительная часть вашей аудитории страдает дальтонизмом (8% мужчин и 0,4% женщин, которые посещают ваш сайт, страдают от той или иной формы дальтонизма). Безопасные веб-цвета для Color-Deficient Vision являются отличным источником информации и включают в себя цветовые палитры, которые имитируют несколько разновидностей дальтонизма. Связанная проблема — черный текст на белом фоне; хотя это в высшей степени читабельно, оно может вызвать напряжение глаз из-за резкого контраста. Темный (но не обязательно черный) текст на не совсем белом фоне часто может снизить нагрузку на глаза посетителя, сохраняя при этом максимальную читаемость даже для дальтоников или пользователей с ограниченным зрением.

Часть 2: Хорошо выглядеть

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

Цветовые схемы

Не только серферы, которые сталкиваются с определенными цветовыми схемами, страдают от головных болей, это сами мониторы. Темный текст на темном фоне — пример цветовой схемы, которая может напрягать монитор. Если монитор только слегка откалиброван, цвета могут «отделиться» и выглядеть ужасно.

Помните также, что различия между конструкциями и конфигурациями мониторов и контроллеров дисплея приводят к тому, что цвета и графика будут различаться для разных дисплеев. Даже один и тот же монитор, подключенный к разным видеокартам, будет отображать цвета и графику по-разному. И разница между дисплеями Windows и Macintosh может стать причиной появления язв у веб-дизайнера.

Что должен сделать веб-дизайнер? Ну, есть некоторые лекарства, но ни одно из них не идеально. Во-первых, обычно это безопасная, если она устарела, ставка на придерживаться традиционных 216 «веб-безопасных» цветов, которые правильно отображаются при просмотре на разных платформах. Это совет, который многие считают устаревшим, и это правильно.

От гуру цветного дизайна

По словам Линды Вайнман , одного из гуру веб-дизайна:

«Единственная причина использовать безопасную для браузера палитру — это если у вас есть опасения, что ваши работы по веб-дизайну будут просматриваться с 256-цветной (8-битной) компьютерной системы.… [B] в 1996 году, [большинство] У компьютерных пользователей были 8-битные видеокарты, и сегодня у меньшинства они есть, поэтому оправдание использования безопасной для браузера палитры значительно уменьшилось, если вы разрабатываете свой сайт для пользователей, у которых есть текущие компьютерные системы.

«Может возникнуть возрождение необходимости использования безопасной для браузера палитры при разработке альтернативных устройств для онлайн-публикации, таких как сотовые телефоны и КПК. Эти системы по-прежнему представлены в 1-битном (черно-белом) или 8-битном цвете». В настоящее время очень немногие люди разрабатывают свои веб-сайты для работы в этих системах, поэтому потребность в безопасной для браузера цветовой палитре определенно понижена до простой тени ее былой славы «.

«Безопасный для браузера» не означает, что он имел в виду

Итак, еще раз, совет придерживаться старой палитры из 216 безопасных для браузера цветов — это больше для того, чтобы пользователи старых систем были довольны, с возможным риском ненужного ограничения себя очень ограниченным (и художественно неудовлетворительным) набором цветовых решений. Опять же, знайте свою аудиторию. Если ваш сайт будет использоваться людьми, которые, вероятно, будут иметь более современные системы, нет никаких причин ограничивать ваш выбор цвета — «Сегодня любой потребитель с Gateway или iMac увидит все цвета, которые вы можете использовать «говорит Вайнман.

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

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

Почему 216 вместо 256 цветов? В зависимости от того, какой источник вы проверяете, это связано с тем, что оставшиеся 40 цветов слишком сильно различаются между старыми дисплеями Mac и ПК для включения или потому, что некоторые цвета зарезервированы для нужд определенных операционных систем. И если вы действительно хотите привередничать, из-за цветовых сдвигов, вызванных некоторыми видеооборудованием, на самом деле есть только 22 действительно безопасных веб-цвета. 22 просто не достаточно, черт возьми!

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

Разнообразие выбора

Чтобы играть в нее максимально безопасно, придерживайтесь 22-цветовой «действительно безопасной палитры» и готовьтесь к испытанию — как в мире вы создаете привлекательную веб-страницу с таким выбором цветов? Я уверен, что это может быть сделано; Я не уверен, что смогу сделать это сам.

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

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

Можно избежать ряда проблем с цветовым разрешением:

по возможности делайте ваши GIF-файлы с использованием прозрачного фона
по возможности держите ваши файлы .GIF отдельно от цветов HTML
свести к минимуму «швы», сделав .GIF, которые смежны с цветами фона HTML, частично прозрачными
придерживайтесь веб-безопасных цветов для фона страниц и таблиц, когда это возможно

Имейте в виду, что отделение .GIF с фоновыми цветами от их HTML-фоновых эквивалентов исключает возможность заметного смещения цвета. Также обратите внимание, что файлы .GIF ограничены 256 цветами или 8-битным дисплеем. Графика .JPG может использовать до 16,7 миллионов цветов или 24-битный дисплей.

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

Что бы вы ни решили, помните о своей аудитории и тестируйте, тестируйте, тестируйте.

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

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

Размер дисплея

Большинство веб-серферов уже давно закончили пешеходное разрешение 640 × 480 (размер экрана) на своих мониторах. 800 × 600 считается текущим размером «по умолчанию» для многих веб-мастеров, и многие люди там просматривают свои веб-страницы на больших дисплеях — 1024 × 768 или даже больше.

Согласно одному источнику, сетевое сообщество довольно равномерно разделено между просмотром при 800 × 600 и 1024 × 768, и только 2% все еще работают с 640 × 480. Я не уверен в этом. Я не могу подтвердить это исследованиями, но у меня есть ощущение, что многие люди — по крайней мере, более 2% — все еще используют дисплей 640 × 480. Большинство из этих людей не из тех людей, которые пишут на форумах по дизайну или отвечают на сетевые опросы; они используют старые компьютеры в своих школах и местных библиотеках, в подвалах своих церквей или просто не пытаются (или не могут себе позволить) пытаться идти в ногу с новыми тенденциями в области вычислительной техники.

Опять же, это вопрос знания вашей аудитории. Вероятно, ваш сайт будет использоваться большим количеством «старых» или менее технологически осведомленных пользователей? Если это так, вы можете придерживаться дизайна, который работает на старом дисплее 640 × 480. Тем не менее, большинство из нас должны проектировать наши страницы для пользователей 800 × 600. Приняв это решение, мы можем придерживаться некоторых довольно простых параметров.

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

Имейте в виду, что использование графики, которая шире, чем 748 пикселей, потребует от ваших зрителей горизонтальной прокрутки, чтобы увидеть всю графику, а также позволить тексту выйти за пределы экрана, и это раздражает. Тетя Грейси абсолютно ненавидит горизонтальные полосы прокрутки. И по какой-то причине слишком много сайтов оптимизировано для ширины 805 пикселей, что для меня абсолютно бессмысленно. Она достаточно широка, чтобы разместить горизонтальную полосу прокрутки на дисплее 800 × 600, но справа нет скрытого содержимого. Странно и бесполезно.

Примечание: ширина 744 пикселя соответствует Internet Explorer 4.5 и 5 для Macintosh. IE 5 и 6 для Windows принимает ширину 780 пикселей. Netscape для Windows показывает дисплей между 776 и 780. Рекомендуемая ширина 744 — самый безопасный и самый консервативный выбор. Начальная высота 410 является аналогичным «безопасным» выбором; многие браузеры отображают на высоте до 446 пикселей. Кроме того, пользователи, которые отключают некоторые из своих панелей инструментов браузера, имеют немного большую высоту для работы. Есть и другие предостережения, такие как:

есть ли у конкретного серфера двойные или негабаритные панели задач Windows,
независимо от того, используют ли они XP (которая имеет немного большую панель задач),
если у них есть панель инструментов Microsoft Office,
если они решили закрепить свои панели инструментов вдоль стороны их дисплея,
если они установили свои поля браузера на что-то необычное, и
используете ли вы абсолютное позиционирование CSS.

Вы не можете угодить всем, и при этом вы не должны стараться, но вы должны ошибиться, чтобы почти все ваши зрители могли комфортно отображать вашу страницу. Отличным источником информации о размерах браузеров является страница «Определение размеров браузеров» Webmonkey ; перейдите сюда для получения более подробной информации, включая рекомендации по высоте и ширине для других разрешений монитора.

Другой источник рекомендует проектировать вашу страницу для отображения 800 × 600, но сохраняя текстовую часть вашего сайта в диапазоне 640 × 480. Это имеет смысл.

Размер текста и выбор шрифта

Хотя это идеальный дизайн, чтобы текст сайта отображался в одном и том же размере независимо от того, кто его просматривает, в реальном мире этого просто не произойдет. Разные браузеры отображают текст в разных размерах, и более опытные пользователи обычно настраивают отображение шрифтов под себя.

Несправедливо использовать абсолютный размер шрифта в тексте вашего сайта. То, что выглядит как раз для вас, слишком велико для парня с зрением 20/20 и слишком мало для тети Грейси и ее стаканов с кокосовой стружкой. Позвольте индивидуальному контролировать размер отображения шрифта. Если вы хотите сделать конкретный блок текста больше или меньше, используйте относительные размеры шрифта, которые увеличивают или уменьшают размер блока по сравнению с размером шрифта пользователя по умолчанию. Самый простой способ проиллюстрировать это с помощью базовой FONT SIZE команды:

 <FONT SIZE="+2">This line is bigger than the rest.</FONT>

Этот конкретный текстовый блок между FONTтегами будет больше, чем остальная часть отображаемого текста, но все равно будет основываться на предпочтениях размера шрифта пользователя. Естественно, есть и другие, более сложные способы контроля размера шрифта.

Современные CSS-протоколы позволяют веб-дизайнеру контролировать размер отображения текста вплоть до пикселя. Все хорошо, но что, если выбранный размер текста не соответствует потребностям просмотра конкретного посетителя? У серфера есть пара опций по его / ее команде, чтобы изменить отображение шрифта, но на панели инструментов IE по умолчанию кнопка «Размер» не отображается, пока пользователь не перейдет к опции «Просмотр и настройка», чтобы получить ее там. Сколько посетителей вашего сайта знают об этой кнопке?

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

Параметры выбора размера шрифта

Есть несколько вещей, которые вы можете сделать, чтобы помочь своим посетителям избежать прищуривания.

Избегайте абсолютных размеров шрифта в ваших таблицах стилей; вместо этого используйте относительные термины, такие как 120% для негабаритных заголовков и 90% для намеренно меньших текстовых блоков.

Убедитесь, что ваш начальный размер шрифта достаточно велик , скажем, 10 баллов (12, если у вас большое количество пожилых людей или пользователей с ограниченным зрением).

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

Убедитесь, что цветовой контраст между текстом и фоном достаточно сильный , чтобы обеспечить высокую видимость.

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

Множественный выбор шрифтов

Не забудьте разрешить несколько вариантов шрифтов; выбор одного шрифта подходит для тех посетителей, у которых на компьютере установлен этот конкретный шрифт, но для тех, кому его не хватает, это означает, что ваш тщательно выбранный шрифт отображается с шрифтом по умолчанию на этом компьютере (обычно Times New Roman на ПК и Раз на Маках). И помните, что выбор шрифтов на ПК и Mac часто бывает разным. На моей машине с Windows отсутствует Helvetica, общий выбор для Mac; ваш Macintosh может не иметь Arial. Хорошая быстрая и грязная методология — сделать что-то вроде этого:

Для шрифтов без засечек:

 <FONT FACE="Verdana, Arial, Helvetica, sans-serif">

Для шрифтов с засечками:

 <FONT FACE="Georgia, Times New Roman, Times, serif">

У шрифтов с засечками есть небольшие «метки», или украшения, на отдельных буквах; они помогают глазу достичь «потока текста», когда глаз естественно скользит от одной буквы к другой. Шрифты без засечек лишены этих маленьких украшений и имеют «более чистый» дисплей. Вы выбираете, в какой группе шрифтов вы хотите, чтобы ваш текст отображался.

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

Один эксперт по шрифтам, Дэниел Уилл-Харрис, рекомендует пользователям Windows выбирать шрифт Georgia вместо Times New Roman, поскольку он более оптимизирован для экрана (Times и Times New Roman были разработаны для печатного носителя). Он также рекомендует избегать Arial из-за его узости и сложности чтения на некоторых дисплеях и избегать шрифта Times для Macintosh из-за отсутствия курсива. Он предлагает использовать Verdana (шрифт, используемый SitePoint), Tahoma или Trebuchet вместо Arial.

Проектирование для Дислекса Surfer

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

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

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

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

Не указывайте конкретный шрифт. Большинство читателей с дислексией предпочитают определенный шрифт и придерживаются его; пусть их выбор будет иметь приоритет.

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

Ссылки в общем тексте сложно использовать. Предоставьте таблицу ссылок под текстовым блоком.

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

Эбигейл Маршалл из Международной ассоциации Дэвис Дислексия напоминает нам:

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

Поля страницы

Вы бы не подумали, что установка полей для вашей веб-страницы будет более сложной, чем установка цвета фона или шрифта, но это так. Почему? Это главным образом потому, что Netscape и Internet Explorer используют два разных набора команд.

Не вдаваясь в подробности о различных командах тегов, вот простой способ решения этой проблемы. В вашем <BODY>теге используйте следующее:

 <BODY marginwidth="0" marginheight="0" topmargin="0"           

leftmargin="0" rightmargin="0" bottommargin="0" ...>

Многоточие в конце тега будет включать в себя остальные ваши BODY команды. Если вы хотите добавить поля, измените нули на цифры (помните, что первые две команды управляют Netscape, а последние четыре управляют IE, поэтому измените их соответственно).

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

JavaScript

Помните, что около 10% веб-пользователей отключают JavaScript. Некоторые делают это по соображениям безопасности, другие делают это потому, что их обострили плохие сценарии, которые замедляют работу браузера. Просто предоставить пользователям, не поддерживающим JavaScript, страницу, отличную от JS; Вы можете сделать это либо с помощью скрипта перенаправления на своей странице, либо предоставив «дверной проем», который дает пользователям, не являющимся JS, альтернативу, по которой можно щелкнуть. Если вы не решите сделать это, ограничьте использование JavaScript несущественными функциями страницы.

Простая закладка

Создание закладки для вашей страницы достаточно просто для любого посетителя, но вы можете рекомендовать эту практику. Вот хороший, простой кусок JavaScript, который вы можете вставить на домашнюю страницу вашего сайта, чтобы позволить посетителям добавить в закладки ваш сайт, модифицированный из скрипта, предоставляемого в качестве бесплатной поставки The Source JavaScript :

 <SCRIPT LANGUAGE="JavaScript">          

function addbookmark()          

{          

bookmarkurl="http://www.myhomepage.com/"          

bookmark title="My Home Page"          

if (document. all)          

window.external.AddFavorite(bookmarkurl,bookmarktitle)          

}          

</script>

Добавьте этот фрагмент скрипта в свой <HEAD></HEAD>раздел и добавьте следующий фрагмент кода, где бы в теле страницы вы не отображали ссылку на закладку:

 <a href="javascript:addbookmark()"><b>Bookmark           

This Page</b></a>

Теперь на вашей странице есть приятная кликабельная ссылка, позволяющая легко создавать закладки (вам нужно заменить бит http://www.myhomepage.com/ на URL вашего собственного сайта, конечно). Если вы хотите, чтобы ваши посетители Bookmark This Page нажимали на изображение, просто удалите фрагмент и замените его

«Вы, юные бродяги-болтуны, задумались обо всем, что хорошо работало в старые времена Интернета», — прорычала она, уставившись на меня одним водянистым голубым глазом. Она подскочила в общем направлении клюшки и пошла дальше.

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

Статья разбита на 2 части:

Часть 1 : Основы

Часть 2 : Хорошо выглядеть

Часть 1: Основы

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

Нацельтесь на свою аудиторию — визуально

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

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

Обращаясь к нескольким аудиториям

Рассмотрим подключения

И не забывайте, что ваша аудитория использует для доступа к вашему сайту. Не у всех есть широкополосное соединение или соединение T1; большая часть мира все еще хромает вместе с медленными коммутируемыми соединениями, или им приходится прыгать по сети через лабиринт сетевых соединений. Эти люди ценят то, что вы ограничиваете использование большой, медленно загружаемой графики или, по крайней мере, предоставляете миниатюры, которые автоматически загружаются и позволяют им нажимать для увеличения (и для более медленной загрузки) дисплея. Помните, что графика .JPG, как правило, больше, чем .GIF или .PNG (Flash-анимация, как ни удивительно, загружается довольно быстро, учитывая их сложность, но она может замедлить страницу, особенно ту, к которой обращаются по коммутируемому соединению). Сложные структуры таблиц тоже могут загружаться, особенно если они заполнены графикой. Медленные серверы вызывают медленные загрузки;если ваш провайдер не может ускорить работу вашего сайта, переключитесь на того, кто может.

Дизайн для World Wide Web — это баланс между графическим «вау» и «сейчас» в реальном времени. — Тони Уилл-Харрис

Какой вкус HTML выбрать?

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

в верхней части вашей страницы (над начальным <HTML>тегом) в большинстве случаев охватывает ваши базы. Он поддерживает многие элементы последней версии HTML, 4.01 Strict, поддерживает таблицы стилей по большей части, но также поддерживает большинство устаревших или уже не используемых текущих элементов HTML, фреймы, целевые объекты ссылок и другие атрибуты, не разрешенные в книга HTML 4.01. Этот тип документа также поддерживает старые браузеры, такие как Netscape 4.x, в игре. Если вы разрабатываете в соответствии с последними стандартами HTML и / или используете сложные таблицы стилей, то этот тип документа:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    

"http://www.w3.org/TR/html4/strict.dtd">

Конечно, вы можете просто скользить по льду с голой щекой и вообще не использовать doctype на своих страницах (просто используйте <HTML></HTML>тег), но это не очень хорошее решение. Это оставляет браузеру индивидуума выбирать, как отображать страницу, и хотя большинство браузеров справятся с ситуацией просто отлично, некоторые из них заткнутся. Кроме того, вам нужно привыкнуть использовать элемент DOCTYPE. Если вы не знаете DOCTYPE от пишущей машинки, используйте «переходный» тип документа в начале этого раздела. Если вы знаете о различных типах учений или пишете в XHTML, сделайте свой выбор. Решение использовать «переходный» тип документа является безопасным и консервативным, но, безусловно, это не современный выбор. Если вы хотите убедиться, что ваша веб-страница готова для современного просмотра и будет соответствовать текущим и будущим веб-стандартам, вам необходимо узнать о CSS (каскадные таблицы стилей), HTML 4.01 и XHTML.

Примечание. Вы можете посетить W3C Validator, чтобы проверить документ на соответствие стандартам W3C, или воспользоваться знаменитой программой HTML Tidy Дейва Раггетта , которая теперь является проектом с открытым исходным кодом.

Совместимость браузера

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

Миллионы пользователей Windows по-прежнему используют Netscape (или Mozilla с открытым исходным кодом). Многие другие используют Opera. Некоторые пользователи AOL по-прежнему работают вместе со своими устаревшими браузерами AOL, а некоторые заядлые люди по-прежнему клянутся Lynx, текстовым браузером (есть также удивительно большой контингент пользователей, которые отключают графику и читают только текст). Тогда есть WebTV, с которым нужно считаться. И есть различия между браузерами Mac и Windows с одинаковыми именами, не говоря уже о браузерах Mac Cyberdog, OmniWeb, Chimera, iCab и других. Существуют браузеры для Linux, такие как Konqueror, Opera для Linux, Mozilla для Linux и другие. По данным браузера браузерав Evolt есть более 100 браузеров, которыми кто-то пользуется (ну, ладно, некоторые больше не используются). Иш!

Зачем заботиться растущему веб-дизайнеру? Потому что ваша страница не будет отображаться одинаково от одного браузера к другому. Более подключенный дизайнер использует тот или иной метод, либо на стороне клиента, либо на стороне сервера, чтобы определить, какой браузер использует его / ее посетитель, и «адаптировать» код, который они отправляют в этот конкретный браузер. Если вы можете сделать это, то будьте внимательны, этот раздел слишком прост для вас (возможно, вся эта статья слишком проста для вас!)! Но если вы не хотите или не можете сделать что-то столь приятное, что вы можете сделать, чтобы удовлетворить потребности ваших различных посетителей с их множеством браузеров?

По сути, лучше всего знать о тегах HTML и других функциях и протоколах, которые поддерживаются одним браузером, а другие — нет, и избегать их всякий раз, когда это возможно: на ум приходят печально известные теги «marquee» и «blink» Как и iFrames, слои, JavaScript, таблицы стилей, плагины, DHTML и другие. Некоторые из них, такие как «мигающие» теги и слои, давно устарели; другие, такие как DHTML и JavaScript, достаточно актуальны. Если вы используете что-то специфичное для браузера, выберите функцию, которая не критична для возможности просмотра вашего сайта вашими посетителями: пример — это аккуратные цветовые схемы для горизонтальной и вертикальной полос прокрутки, которые предусмотрены в IE. Пользователи Netscape просто получат серые полосы в виде простой Джейн, но им не помешает отсутствие цветных полос прокрутки — это не так.Это не влияет на то, как ваш сайт представляет свое сообщение и обрабатывает его содержимое. Это яркий пример того, как можно «склеить» страницу для одного браузера, которая не влияет на другой браузер.

Какие функции страниц не совместимы во всех браузерах?

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

 <A HREF="go here.html">Go Here</A>

Почему?Из-за пустого пространства между «иди» и «здесь». IE справится с этим, а Netscape — нет. Если вы хотите, чтобы он работал в Netscape или чем-то еще, вы должны написать это так:

 <A HREF="go%20here.html">Go Here</A>

Если это ваш файл, попробуйте лучше переименовать файл GOHERE.HTML и избежать всей проблемы.

Другим примером является сайт, который хорошо выглядит в IE, Netscape / Mozilla и даже в Konqueror, за исключением того, что шрифты плохо отображаются в последнем. Пользователи Konqueror должны достаточно легко решить проблему с их стороны, щелкнув «Увеличить» в своем браузере. Ваш ответ может состоять в том, чтобы переработать вашу страницу так, чтобы она выглядела в Konqueror так же хорошо, как в браузерах Windows / Mac, или вы можете позволить пользователям Konqueror самим справиться с этим. Если вы работаете с широкой аудиторией, в основном пользователей Mac и Windows, лучше всего оставить себя в покое и позволить пользователям Konqueror справиться с этим самостоятельно. Если у вас большой компонент пользователей Linux, вы можете решить эту проблему, чтобы пользователи Konqueror не сталкивались с этой проблемой. Это ваш звонок и ваша аудитория.

Максимально совместимый

Быстрое и грязное исправление: убедитесь, что ваша страница выглядит хорошо в Internet Explorer, Netscape 4.x, Netscape 6 / Mozilla и Opera — это означает загрузку этих браузеров на ваш компьютер и тестирование вашего сайта в них (найдите старые браузеры Netscape, доступные для скачать в архиве Netscape). Экономно используйте такие функции, как таблицы стилей, JavaScript и DHTML; если вы используете эти функции для критических элементов вашей страницы, таких как навигационная схема, предоставьте своим менее актуальным посетителям более технологически консервативную альтернативу. Не используйте код для конкретного браузера и ожидайте, что ваши посетители без этого конкретного браузера просто «преодолеют его» и не обойдут проблему с надписью «Работает лучше всего в XXX браузере». Постарайтесь удовлетворить потребности каждого члена вашей аудитории и помните, что вы не можете создать сайт, который будет работать для всех и везде.

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

Психология навигации

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

Лучшие советы для хорошей навигации

При разработке любой навигационной схемы необходимо помнить несколько вещей.

Уточни

Во-первых, для начинающего посетителя должно быть очевидно, как перемещаться по сайту без прокрутки вниз — все должно стать очевидным, как только страница загрузится. Первый посетитель должен быть в состоянии загрузить вашу страницу и уметь понять основной макет вашей домашней страницы в течение 30 секунд … гораздо больше, и он улетит, чтобы найти сайт, который проще в использовании. Для пользователей с ограниченным доступом по телефонной линии это означает, что размеры домашней страницы не превышают, скажем, 45K.

Рассмотрим карту сайта

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

Вы должны убедиться, что ваша карта сайта легко доступна по ссылке или кнопке с надписью «Карта сайта» (удивительно!), И что ваша карта облегчает, а не усложняет навигацию по сайту. Карта вашего сайта должна быть намного проще по дизайну, чем ваши обычные страницы, избегая графики и эффектов в пользу простых, легко используемых текстовых ссылок. Идея хорошей карты сайта — предоставить пользователю единый обзор навигационной схемы и информационной структуры вашего сайта. Держите их особенно простыми и удобными в использовании; не заставляйте пользователя работать, чтобы понять, как функционирует карта.

Включить поиск по сайту

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

Сохраняйте параметры поиска простыми, так как многие пользователи отказываются изучать расширенные методы поисковых запросов. Методы поиска «ограниченного объема» (ограничивающие поиск определенными областями вашего сайта) и другие «расширенные» функции поиска полезны для одних пользователей и сбивают с толку других. Большинство пользователей хотят найти то, что ищут, с помощью простого запроса из двух слов; пусть они так и сделают.

Навигация No-Nos

Рамки

Раньше это был большой «багбир» в веб-навигации. Я ненавижу фреймы, вы ненавидите фреймы, мы не будем посещать сайты, которые используют фреймы. Ну, это больше не так. Старые версии Netscape и MSIE обрабатывали фреймы довольно плохо, но проблемы с обработкой фреймов в этих браузерах уже давно решены, поэтому фреймы уже не такие, как раньше. Тем не менее, с фреймами может быть немного неуклюже работать, поэтому, хотя использование фреймов не обязательно является ошибкой дизайна, будет хорошей идеей не использовать их, если в этом нет особой необходимости. Обычно хорошо продуманная структура таблиц работает лучше для большинства сайтов, чем для фреймов. Заметьте, я сказал «обычно», а не «всегда». Есть моменты, когда фреймы работают очень хорошо, особенно если вы хотите, чтобы заголовок или навигационная структура всегда были видны.

 <META HTTP-EQUIV="Window-target" CONTENT="_top">

Подробнее об использовании мета-тегов см. В первой части этого столбца, « Топ 15 мета-трюков» .

Убедитесь, что на каждой странице вашего сайта есть этот тег в своем <HEAD>разделе. И не позволяйте вашей странице «заманивать в ловушку» страницы других людей. Это плохой дизайн и грубый

Неиспользуемые кнопки Назад

Нильсену действительно не нравятся ссылки, которые заставляют страницу открываться в новом окне; Я не так непреклонен в этом вопросе. Бывают случаи, когда для ссылки уместно и желательно открывать страницу в новом окне, хотя лично я предпочитаю сделать свой выбор, щелкнув ссылку правой кнопкой мыши и выбрав опцию «Открыть в новом окне», когда она мне понадобится. на новом дисплее. Это правда, что засорение машины серфера одним новым окном браузера за другим может сбить с толку и раздражать серфера, особенно новичка, и может затруднить неопытному серферу навигацию по его следу, особенно тому, кто просматривает ваш сайт в полноэкранном режиме. Несколько окон браузера также поглощают системные ресурсы и могут даже привести к сбою компьютера серфера. И не забывайте, что люди, которые используют Mozilla, Opera,и любое количество надстроек Internet Explorer имеют свои собственные панели навигации с вкладками, которые позволяют им просматривать несколько страниц в одном окне.

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

Длинные времена загрузки

Необычные варианты меню

Сложные URL

Страницы-сироты

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

Нестандартные цвета ссылок

Ладно, иногда нам надоедает обычная цветовая схема сине-красно-фиолетового для гиперссылок. Следует помнить, что это стандарт, который признают все. Если вы собираетесь изменить цветовую схему ссылок своего сайта, продолжайте, но помните, что ваша схема должна быть так же легко узнаваема и использоваться, как и стандартная. Большинство веб-дизайнеров не в восторге от традиционного подчеркивания ссылок, и это понятно — это выглядит неопрятно, это может помешать чтению больших блоков текста, и, ну, нам их просто не нравится. Стоит, однако, помнить, что дальтоники-серферы часто любят подчеркнутые ссылки, так же как и серферы, которые предпочитают отображение только текста. Также примечательно, что подчеркивание слов, которые не являются ссылками, сбивает с толку многих серферов. Но избавьтесь от подчеркивания, если хотитеs первый CSS-эффект, который большинство из нас изучает).

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

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

Нестандартное использование функций GUI

Сайты, которые неясны относительно их цели

О чем ваш сайт? Пытается ли он продать мне машину, дать мне совет по ремонту моего компьютера, продвигать вашу политическую точку зрения или выставлять напоказ своих кошек? Что бы это ни было, пусть посетитель сайта сразу узнает, чем занимается ваш сайт. Если им интересно, что они делают на вашем сайте, и что ваш сайт может предложить, скорее всего, они не задержатся достаточно долго, чтобы найти ответ. В частности, для коммерческих сайтов крайне важен «слоган», состоящий из одного предложения, который привлекает внимание нового зрителя.

Страницы «Всплеск»

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

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

Страницы без URL

Вводящие в заблуждение или плохо названные закладки или избранное

Стандарт для закладок — для страницы использовать заголовок из тега META «Заголовок» в качестве описания закладки. Если заголовок очень длинный и заполнен модными словечками и рекламой, то человек, который добавляет страницу в закладки, не узнает страницу из заголовка и должен будет переименовать ее так, чтобы он нашел ее полезной. И иногда другие страницы «угоняют» связанные страницы со своими собственными заголовками, когда в закладки — нет-нет во всех смыслах этого слова. Если ваш заголовок начинается с «The» или «Welcome to…», то ваша страница добавляется в закладки под буквой «T» или «W», а все остальные страницы начинаются одинаково. Ваш заголовок должен быть кратким, описательным и полезным в чьей-либо закладке.

Ссылки на не-HTML страницы без предупреждения

Усложнение связи с владельцем сайта

Цвета фона

Если вы используете заштрихованный фон (то есть относительно тонкий левый столбец цвета, который повторяется до конца), это хорошо само по себе, но помните, что вам не нужен основной текст или графика перекрытие в границу; более того, что бы вы ни указывали в этой рамке, оно должно не только не перекрывать себя, но и должно быть подходящим цветом, чтобы выделиться из любого выбранного вами цвета. Если вы решили использовать фон с рамками, некоторые простые способы сохранить порядок включают использование <UL>тега для отступа текста (не используйте <LI>тег, и вы не получите маркеры или цифры) или<BLOCKQUOTE>тег, который выравнивает как левую, так и правую стороны текстовых блоков и, следовательно, может не соответствовать вашему желанию. Таблицы — еще один хороший способ предотвратить переползание текста в рамку. И, конечно же, таблицы стилей позволяют вам установить точное количество отступов — вероятно, лучший путь.

Нужно ли упоминать анимированные фоны?

Белый или светлый текст на черном или темном фоне может выглядеть «сексуально» или драматично, и я видел несколько чудесно сделанных веб-сайтов с этой схемой, но у некоторых серферов есть проблемы с фокусировкой на них. И не забывайте, что значительная часть вашей аудитории страдает дальтонизмом (8% мужчин и 0,4% женщин, которые посещают ваш сайт, страдают от той или иной формы дальтонизма). Безопасные веб-цвета для цветоводефицитного зренияявляется отличным источником информации и включает в себя цветовые палитры, которые имитируют несколько разновидностей дальтонизма. Связанная проблема — черный текст на белом фоне; хотя это в высшей степени читабельно, оно может вызвать напряжение глаз из-за резкого контраста. Темный (но не обязательно черный) текст на не совсем белом фоне часто может снизить нагрузку на глаза посетителя, сохраняя при этом максимальную читаемость даже для дальтоников или пользователей с ограниченным зрением.

Часть 2: Хорошо выглядеть

Цветовые схемы

От гуру цветного дизайна

По словам Линды Вайнман , одного из оригинальных гуру веб-дизайна:

«Может возникнуть возрождение необходимости использования безопасной для браузера палитры при разработке альтернативных устройств для онлайн-публикации, таких как сотовые телефоны и КПК. Эти системы по-прежнему имеют 1-битный (черно-белый) или 8-битный цвет». В настоящее время очень немногие люди разрабатывают свои веб-сайты для работы в этих системах, поэтому потребность в безопасной для браузера цветовой палитре определенно понижена до простой тени ее былой славы «.

«Безопасный для браузера» не означает, что он имел в виду

Разнообразие выбора

Можно избежать ряда проблем с цветовым разрешением:

по возможности делайте ваши GIF-файлы с использованием прозрачного фона
по возможности держите ваши файлы .GIF отдельно от цветов HTML
свести к минимуму «швы», сделав .GIF, которые смежны с цветами фона HTML, частично прозрачными
придерживайтесь веб-безопасных цветов для фона страниц и таблиц, когда это возможно

Что бы вы ни решили, помните о своей аудитории и тестируйте, тестируйте, тестируйте.

Размер дисплея

есть ли у конкретного серфера двойные или негабаритные панели задач Windows,
независимо от того, используют ли они XP (которая имеет немного большую панель задач),
если у них есть панель инструментов Microsoft Office,
если они решили закрепить свои панели инструментов вдоль стороны их дисплея,
если они установили свои поля браузера на что-то необычное, и
используете ли вы абсолютное позиционирование CSS.

Размер текста и выбор шрифта

 <FONT SIZE="+2">This line is bigger than the rest.</FONT>

Параметры выбора размера шрифта

Есть несколько вещей, которые вы можете сделать, чтобы помочь своим посетителям избежать прищуривания.

Избегайте абсолютных размеров шрифта в ваших таблицах стилей; вместо этого используйте относительные термины, такие как 120% для негабаритных заголовков и 90% для намеренно меньших текстовых блоков.

Убедитесь, что ваш начальный размер шрифта достаточно велик , скажем, 10 баллов (12, если у вас большое количество пожилых людей или пользователей с ограниченным зрением).

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

Убедитесь, что цветовой контраст между текстом и фоном достаточно сильный , чтобы обеспечить высокую видимость.

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

Множественный выбор шрифтов

Для шрифтов без засечек:

 <FONT FACE="Verdana, Arial, Helvetica, sans-serif">

Для шрифтов с засечками:

 <FONT FACE="Georgia, Times New Roman, Times, serif">

Проектирование для Дислекса Surfer

Ссылки в общем тексте сложно использовать. Предоставьте таблицу ссылок под текстовым блоком.

Эбигейл Маршалл из Международной ассоциации Дэвис Дислексия напоминает нам:

Поля страницы

 <BODY marginwidth="0" marginheight="0" topmargin="0"           

leftmargin="0" rightmargin="0" bottommargin="0" ...>

JavaScript

Простая закладка

 <SCRIPT LANGUAGE="JavaScript">          

function addbookmark()          

{          

bookmarkurl="http://www.myhomepage.com/"          

bookmark title="My Home Page"          

if (document. all)          

window.external.AddFavorite(bookmarkurl,bookmarktitle)          

}          

</script>

 <a href="javascript:addbookmark()"><b>Bookmark           

This Page</b></a>

Теперь на вашей странице есть приятная кликабельная ссылка, позволяющая легко создавать закладки (вам нужно заменить бит http://www.myhomepage.com/ на URL вашего собственного сайта, конечно). Если вы хотите, чтобы ваши посетители нажимали на изображение, просто удалите Bookmark This Page фрагмент и замените его на изображение с помощью <IMG SRC>тега.

Примечание: это, вероятно, самый простой способ предоставить интерактивные средства для добавления вашей страницы в избранное, но он работает только в Internet Explorer. Существуют более сложные сценарии, которые будут работать как в Netscape, так и в IE.

Я настоятельно рекомендую вам не использовать некоторые из доступных методов, чтобы заставить посетителей изменить свою домашнюю страницу на ваш сайт; если они хотят изменить свою домашнюю страницу, они сделают это. Мэтт Мицкевич из SitePoint предлагает аккуратный кусок кода, чтобы дать им кликабельную ссылку, позволяющую пользователям изменять свою домашнюю страницу, перепечатанную ниже из его статьи об инновационных маркетинговых идеях :

 <a class="chlnk" style="cursor:hand" HREF onClick="this.style.          

behavior='url(#default#homepage)';this.setHomePage(          

'http://www.sitepoint.com');">Click           

here to make SitePoint your default homepage</a>

Обратите внимание, что это обеспечивает простую ссылку, которая дает посетителю возможность сбросить свою домашнюю страницу, но не принимает решение за него. И, как в приведенном выше примере избранного, вы можете заменить Click here, чтобы сделать SitePoint текстовой строкой домашней страницы по умолчанию с графикой, если хотите. Другие сайты просто сбрасывают домашнюю страницу без вашего разрешения или используют надоедливые всплывающие окна, которые вы должны нажать, чтобы продолжить просмотр. Определенно не то, что тетя Грейси ценит.

Устаревший контент

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

Копирайтинг вашего сайта

Я не буду вдаваться в тему здесь (я рассмотрел некоторые аспекты авторского права в Интернете в статье для Sitepoint под названием « Дневное ограбление» ), но вы должны знать, что все, что вы создаете для Интернета, может и должно быть отмечено как защищенное авторским правом. Законодательство США защищает авторские права на все, что вы создаете, как только вы сохраняете его на диск или загружаете на сервер, но очень хорошая идея пометить ваши материалы заявлением об авторском праве, например, следующим образом, которое в идеале должно идти внизу каждого страница, которую вы автор:

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

А для пользователей JavaScript есть хороший фрагмент, взятый из собственного информационного бюллетеня Tech Times от SitePoint. Это автоматически обновляет уведомление об авторских правах каждый раз, когда меняется год. Если указанная дата первого авторского права не 1998, просто измените ее в соответствии с вашими потребностями.

 <SCRIPT LANGUAGE="JavaScript">          

document.write('Copyright &copy; 1998-' +(new Date()).getFullYear());          

</SCRIPT>

Мышление дважды

Есть много вариантов, чтобы подумать, прежде чем использовать их на своей странице.

Музыка и звуковые эффекты

Музыка / аудио эффекты — это то, что нужно тщательно продумать, прежде чем добавлять. Джо Бернс из Goodies HTML прямо говорит нам: «На сайте нет такого понятия, как слишком мало звука», и я склонен с ним согласиться. Многие серферы не ценят музыку или звуковые эффекты, внезапно вспыхивающие на них с недавно загруженной страницы, и при этом они не хотят сидеть несколько минут подряд, пока загружается толстый звуковой файл. Другие пользователи, в том числе и ваши, часто слушают музыку с интернет-радио или из собственных источников во время серфинга и не хотят, чтобы звук с вашей страницы мешал их прослушиванию. И всегда есть бедная крыса-кабина, которая должна броситься на регулировку громкости, прежде чем его коллеги или его начальник услышат грохочущие звуки с вашей страницы.

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

Вы можете перейти на страницу Background Audio Tool для About.com, чтобы легко создать простой фрагмент кода JavaScript для аудиофайла, который будет автоматически воспроизводиться на вашей странице. Преимущество этой страницы в том, что генерируемый код является довольно общим, что означает, что он будет работать как в Netscape, так и в IE, и вам не нужно знать JavaScript для генерации собственного кода.

Самый простой способ решить проблему со звуком — это вообще не заниматься им; т.е. не включайте это. Если у вас нет музыкальной, игровой или юмористической страницы, звук обычно не является необходимостью и почти всегда является вторжением. Никогда не подвергайте своих посетителей неожиданным звукам. Говорит Бернс:

«Одна из радостей веб-серфинга — это возможность погрузиться в информационную нить в глобальной сети, не мешая никому вокруг себя. Как только вы услышите неожиданный звук, эта радость внезапно разрушится. вряд ли будет повторно! «

Необычные методы

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

Решите, подходят ли они для вашей страницы, прежде чем подключать их, и подумайте, сколько раз посетитель захочет иметь с ними дело, прежде чем он потеряет свою апелляцию. Да, Flash-анимация, а также меню и эффекты DHTML и JavaScript обычно выглядят великолепно. Но они также могут испытывать терпение посетителей, особенно постоянных посетителей, и одна-единственная ошибка или сбой в вашем коде JavaScript или DHTML может привести к неправильной загрузке вашей страницы, что побудит ваших посетителей перейти в другое место. Если есть одна характерная черта для веб-серферов, это нетерпение к проблемам со страницей. Независимо от того, находится ли проблема в коде сайта или в старом неуклюжем браузере, который ваш клиент использует для посещения вашего сайта, конечный результат один и тот же — они уходят.

С другой стороны, одним из причудливых эффектов, который следует учитывать, является использование «таблиц стилей слуха» и / или «таблиц стилей Брайля» для представления текста пользователям с ограничениями по зрению и / или слуху. На данный момент, учитывая, что это все, что вы можете сделать, поскольку ни один браузер, о котором я знаю, не поддерживает ACSS или BCSS. Но это такая хорошая идея, что я не могу поверить, что она не появится в предстоящем обновлении браузера. Это определенно что-то, чтобы быть в курсе.

Коммерческое появление

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

Даже если вы используете их с сдержанностью, большинство пользователей обычно игнорируют информацию, представленную в типичном веб-баннере, они щелкают (или блокируют) всплывающие окна, не глядя на них, и блокируют, отключают, прокручивают прошлое или иным образом избавляются от раздражающей анимации. , Я знаю, что тетя Грейси получает головную боль всякий раз, когда на нее вспыхивает графика. У вас может не быть аудитории тети Грейси, но у вас, скорее всего, есть достаточно опытная аудитория, чтобы бежать, если вы перегружаете их «типичным» рекламным поведением. Это стоит времени и усилий, которые потребуются, чтобы найти альтернативу (и кто-нибудь ценит всплывающие окна, которые выходят далеко за пределы правого поля?).

Плохое правописание и использование языка

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

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

Если вы не можете идти пешком, не говорите разговоры. Придерживайтесь того, что вы знаете, и ошибитесь в правильной грамматике.

«Стена текста»

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

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

Значимые имена файлов

Используйте значимые имена файлов. «Page2.html» ничего не значит для посетителя сайта, а «web_fundamentals.html» означает многое.

ALT теги для графики

Используйте описательные теги ALT для каждого графического объекта, который вы используете. Эти теги не только поддерживают те, у кого отключена графика, но и могут отображаться до загрузки графики, давая посетителю возможность узнать, какой графики они ждут.

Отключение автоматической графической панели инструментов IE 6

Internet Explorer 6.0 для Windows отображает маленькую панель инструментов в верхней части любого большого изображения, когда вы наводите указатель мыши на него. На панели инструментов есть параметры для сохранения, отправки по электронной почте и печати изображения, а также быстрый доступ к папке «Мои рисунки» пользователя. Многим пользователям и веб-дизайнерам не нравится эта панель инструментов. К счастью для нас, это легко отключить с помощью простого тега META. Просто добавьте следующий тег META внутри <HEAD>тега страницы, чтобы отключить панель инструментов изображения, вот так:

 <meta http-equiv="imagetoolbar" content="no" />

Этот тег отключает панель инструментов для каждого изображения на странице. Если вы хотите отключить его для определенного графического изображения, используйте вместо него атрибут galleryimg для тега IMG, например, так:

 <img src="myPic.gif" galleryimg="no" />

Многие опытные пользователи IE отключают эту функцию в своих настройках, поэтому не планируйте, чтобы она была им доступна. А у остальных из нас его вообще нет, так что не делайте никаких дизайнерских решений с учетом доступности этой панели инструментов.

Пользовательские страницы ошибок

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

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

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

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

Продолжайте учиться и расти

И наконец, продолжайте учиться. Эта статья ни в коем случае не является исчерпывающим источником информации; это только начало. Посетите такие страницы, как « Наблюдения в Project Cool», чтобы найти несколько хороших примеров веб-дизайна, и загляните под капот, пройдясь по View Source, чтобы увидеть, как ученые использовали свое волшебство. Конечно, нечестно копировать чужой код; это строго для того, чтобы видеть, как другие люди вытаскивают своих кроликов из шляпы, а не крадут их уловки.

Хотите с головой погрузиться в примеры того, как не создавать веб-страницы? Посетите (в) знаменитые веб-страницы, которые сосут , и собственные 10 сайтов, которые кусаются . Помните, что вся причина, по которой мы просматриваем эти сайты, состоит в том, чтобы показать нам, как этого не делать!

Теперь, когда я написал это, я думаю о том, как мой собственный веб-сайт не соответствует изложенным мною рекомендациям. Похоже, редизайн в порядке …!

Библиография и дальнейшее чтение

10 смертельных грехов на сайте

http://www.webmasterbase.com/article/66

10 сайтов, которые кусаются

http://www.webmasterbase.com/article/160

ACSS: слуховые таблицы стилей

http://www.htmlgoodies.com/beyond/acss.html

Расширенный веб-дизайн: учебник для начинающих

http://www.webmasterbase.com/article/265

Площадь 404

http://www.plinko.net/404/area404.asp

Фоновый аудио инструмент

http://javascript.about.com/library/tools/blbgaudio.htm

Основная теория цвета

http://www.coa.edu/campuslife/work/courseprojects/polcom/colort.html

За кулисами переделки сайта, часть I

http://www.webmasterbase.com/article/323

За кулисами переделки сайта, часть II

http://www.webmasterbase.com/article/324

Браузер Архив

http://browsers.evolt.org/

Совместимость браузера: вводная часть и размер экрана

http://www.johngaltstools.com/learn/web/browser001.asp

Каскадные таблицы стилей, уровень 1

http://www.w3.org/TR/REC-CSS1

CGSD — домашняя страница гамма-коррекции

http://www.cgsd.com/papers/gamma.html

Раскраска вне линий

http://www.efuse.com/Design/colorful1.html

Смерть веб-палитры?

http://hotwired.lycos.com/webmonkey/00/37/index2a.html

Динамическое отображение таблиц стилей

http://html.about.com/library/weekly/aa123101a.htm

Эффективный веб-дизайн, Наварро и Кун, Сыбек 1998

Начиная

http://www.gettingstarted.net/

Руководство по дизайну домашней страницы

http://www.useit.com/alertbox/20020512.html

Как правильно выбрать шрифты для ваших веб-страниц

http://webdesign.about.com/c/ht/00/07/How_Choose_Right_Fonts0962932995.htm

HTML Goodies to Go # 216

http://www.htmlgoodies.com/letters/216.html

Проверка HTML: выбор DOCTYPE

http://www.htmlhelp.com/tools/validator/doctype.html

HTML Web Tips: краткое руководство по отличному веб-дизайну

http://archive.devx.com/projectcool/developer/tips/design01_tips/index.html

Источник JavaScript

http://javascript.internet.com/

Улучшение сообщения об ошибке 404

http://www.useit.com/alertbox/404_improvement.html

Инновационные маркетинговые идеи

http://www.promotionbase.com/article/22

Позвольте пользователям контролировать размер шрифта

http://www.useit.com/alertbox/20020819.html

Ссылки, которые работают, иногда

http://www.netmechanic.com/news/vol4/html_no18.htm

Калибровка монитора и согласованность цветов в сети

http://tiemdesign.com/features/Oct99/web_color.htm

Новые топ-10 ошибок: комментарии читателей

http://www.useit.com/alertbox/990530_comments.html

Неизменяемые цвета в браузерах

http://www.lynda.com/hex.html

Поля страницы

http://www.johngaltstools.com/learn/web/browser002.asp

Выберите Пек Палитр

http://www.efuse.com/Design/palettes.html

Чтение в Интернете

http://www.useit.com/alertbox/9710a.html

Безопасные веб-цвета для цветоводефицитного зрения

http://more.btexact.com/people/rigdence/colours/

Поиск: видимый и простой

http://www.useit.com/alertbox/20010513.html

SitePoint: Дизайн сайта

http://www.sitepoint.com/faqs/design.php

Определение размеров браузеров

http://hotwired.lycos.com/webmonkey/99/41/index3a.html

Удобство использования карты сайта

http://www.useit.com/alertbox/20020106.html

SitePoint Tech Times # 56, 1-8-03

http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=56

SitePoint Tech Times # 57, 1-22-03

http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=57

Таблицы стилей в документах HTML

http://www.w3.org/TR/REC-html40/present/styles.html

Топ 10 Что нужно и чего не нужно делать для создания веб-сайтов

http://www.efuse.com/Design/top_10_do_s_and_don_ts.html

10 самых повторных ошибок (изначально с 1996 года)

http://www.useit.com/alertbox/990502.html

Топ 10 новых ошибок веб-дизайна (1999)

http://www.useit.com/alertbox/990530.html

Десять ошибок веб-дизайна 2002 года

http://www.useit.com/alertbox/20021223.html

Tough Luck: работа с ошибками браузера, часть I

http://www.designharbor.org/Design/opentut.php3?mn=&pn=t&id=1&page=1&

Неудача: что делать с несовместимостью браузера, часть II

http://www.designharbor.org/Design/opentut.php3?mn=&pn=t&id=65&page=1&

Служба проверки разметки W3C

http://validator.w3.org/

Веб-дизайн для дислексии

http://www.dyslexia.com/qaweb.htm

Веб-графика для не дизайнеров, Розелли, Гиббонс, Форман и Бойс, Глассхаус, 2002

Цитируется по http://www.webreference.com/authoring/graphics/color/nondesigners/chap2/3/

Тип сети 101, учебник для начинающих

http://www.efuse.com/Design/palettes.html

Webmaster @ AOL

http://webmaster.info.aol.com/

Webmonkey | Справочная таблица: Браузеры

http://hotwired.lycos.com/webmonkey/reference/browser_chart/

Писать для Интернета

http://www.sun.com/980713/webwriting/

Работа с HTML: DOCTYPE

http://developer.apple.com/internet/html/doctype.html

XHTML

http://www.w3.org/TR/1999/PR-xhtml1-19991210/

lt; br> «;
echo» Обязанности : $ liability «;
}
}
?>
<?

// получить навыки
$ query = «SELECT skill, опыт работы с r_skill WHERE
rid = ‘$ rid’ ORDER BY опыт»;
$ result = mysql_db_query ($ database, $ query, $ connection) или die
(«Ошибка в запросе: $ query.». mysql_error ());
if (mysql_num_rows ($ result)> 0)
{
echo «<img src = images / sk.gif> »;
while (list ($ skill, $ experience) = mysql_fetch_row ($ result))
{
echo « $ skill »;
echo «$ опыт лет опыта »;
}
}
?>
<?

// получить ссылки
$ query = «SELECT имя, телефон, электронная почта из r_reference WHERE rid = ‘$ rid'»;
$ result = mysql_db_query ($ database, $ query, $ connection) или die
(«Ошибка в запросе: $ query.». mysql_error ());
if (mysql_num_rows ($ result)> 0)
{
echo «<img src = images / ref.gif> »;
while (список ($ name, $ phone, $ ref_email) = mysql_fetch_row ($ result))
{
echo « Name: $ name »;
echo « Телефон: $ phone »;
if ($ ref_email) {echo « адрес электронной почты: 
<a href=mailto:$ref_email> $ ref_email </a> »; } else {echo «»; }
}
}
mysql_close ($ подключение);
?>
<img src = «images / misc.gif»>
 
 Готовы переехать: <? if ($ relo == 1) {echo «Yes»; }
else {echo «Нет»; }?>
<Р>
Резюме размещено на <? echo fixDate ($ отправлено); ?> 
<Р>
<a href=»javascript:history.back()»> Вернуться к списку кандидатов </a> или
<a href=»search.php»> выполнить повторный поиск </a>
<? включают в себя ( «footer.inc.php»); ?>
</ Body>
</ Html>
<?
}
?>

Ничего сложного здесь нет — есть пять основных разделов, и этот скрипт запрашивает соответствующие пять таблиц, чтобы построить таблицу данных, содержащую личную информацию кандидата, историю трудоустройства, образовательные квалификации, справочные материалы и навыки — по сути, наоборот «apply_rslt» .php «скрипт. Этот лист данных содержит всю информацию, которая необходима менеджеру по персоналу для связи с кандидатом и начала процесса найма.

Обработка серых областей

Последний скрипт — и самый простой — это обработчик ошибок, «error.php». Если вы посмотрите на исходный код, вы увидите много ссылок на этот скрипт; очень просто, «error.php» перехватывает ошибку и преобразует ее в читаемое человеком сообщение об ошибке, которое затем отображается пользователю.

 <html>       

<head>       

<basefont face="Verdana" size="2">       

</head>       

<body bgcolor=white>       

<? $image="error.jpg"; ?>       

<? include("header.inc.php"); ?>       

       

There was an error accessing the page you requested. Please        

<a href="job_list.php">return to the main page</a> and try again.       

<? include("footer.inc.php"); ?>       

</body>       

</html>

эндшпиль

И это почти завершает это тематическое исследование. В ходе этой разработки я широко использовал методы нормализации базы данных, встроенные функции PHP, заголовки HTTP и запросы к базе данных mySQL. Если вы новичок в PHP, я надеюсь, что эти усилия были поучительными и помогли вам лучше понять эти мощные инструменты с открытым исходным кодом.

Если вы хотите узнать больше о некоторых проблемах, описанных в этой статье, вот несколько ссылок:

Защита веб-страниц с помощью HTTP-аутентификации: тег <IMG SRC>.

 <a class="chlnk" style="cursor:hand" HREF onClick="this.style.          

behavior='url(#default#homepage)';this.setHomePage(          

'http://www.sitepoint.com');">Click           

here to make SitePoint your default homepage</a>

Устаревший контент

Копирайтинг вашего сайта

 <SCRIPT LANGUAGE="JavaScript">          

document.write('Copyright &copy; 1998-' +(new Date()).getFullYear());          

</SCRIPT>

Мышление дважды

Есть много вариантов, чтобы подумать, прежде чем использовать их на своей странице.

Музыка и звуковые эффекты

Музыка / аудио эффекты — это то, что нужно тщательно продумать, прежде чем добавлять. HTML вкусностиДжо Бернс из прямо говорит нам: «На сайте нет такого понятия, как слишком мало звука», и я склонен с ним согласиться. Многие серферы не ценят музыку или звуковые эффекты, внезапно вспыхивающие на них с недавно загруженной страницы, и при этом они не хотят сидеть несколько минут подряд, пока загружается толстый звуковой файл. Другие пользователи, в том числе и ваши, часто слушают музыку с интернет-радио или из собственных источников во время серфинга и не хотят, чтобы звук с вашей страницы мешал их прослушиванию. И всегда есть бедная крыса-кабина, которая должна броситься на регулировку громкости, прежде чем его коллеги или его начальник услышат грохочущие звуки с вашей страницы.

Необычные методы

Коммерческое появление

Плохое правописание и использование языка

«Стена текста»

Значимые имена файлов

ALT теги для графики

Отключение автоматической графической панели инструментов IE 6

 <meta http-equiv="imagetoolbar" content="no" />

 <img src="myPic.gif" galleryimg="no" />

Пользовательские страницы ошибок

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