Подсказки и советы для веб-мастеров - Топ 100+

Peter de Pradines, пер. Александр Климов
AKWProject

Теория и практика навигации по сайту

Правило: Используйте простые и запоминаемые URL, чтобы улучшить навигацию.

Правило: Не скрывайте URL - сложный он, или простой - если только Вы не хотите, чтобы люди не могли ссылаться напрямую.

Правило: Используйте непротиворечивые и ясные метки позволяющие отличать одну страницу от другой.

Правило: Слова типа названия учреждения или логотип должны всегда возвращать посетителя на главную страницу сайта.

Предложение: Состояние кнопок должно рассматриваться как дополнительная форма метки страницы. Кнопка в нажатом состоянии должна всегда быть вдавленной, а не выпуклой.

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

Предложение: Не пытайтесь повторять в ссылках механизм истории броузера.

Правило: Избегите ссылок, названных просто "Назад". Всегда явно укажите, куда будет идти обратная связь.

Правило: Избегайте создавать страницы, на которые нельзя вернуться использованием кнопки броузера "Назад".

Предложение: Не скрывайте выбранный адрес от посетителя, если только ссылка неважна или не создает помехи.

Предложение: Избегайте размещать основную навигацию в самом правом краю экрана.

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

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

Правило: Навигация должна быть постоянна, и элементы страницы должны располагаться в одинаковом порядке.

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

Предложение: Минимизируйте расстояние между кнопками основной навигации вашего сайта и кнопкой "Назад".

Предложение: Всегда пытайтесь ограничивать перемещение мыши между последовательными элементами навигации.

Предложение: Избегайте использовать фреймы для создания структуры страницы. Используйте их для навигации.

Предложение: При использовании фреймов, сделайте в меньшем фрейме управление большим.

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

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

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


Ссылки: Текст, Кнопки, Иконки  и Графика

Предложение: Всегда создавайте текстовые ссылки внизу страниц при использовании длинных страниц или страниц с графическими кнопками.

Предложение: При использовании карт изображения (image maps), всегда обеспечивайте дополнительную текстовую навигацию.

Правило: Никогда полностью не удаляйте индикацию посещенных ссылок.

Правило: Избегайте изменять цвета ссылок.

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

Предложение: Избегайте выключать подчеркивание ссылок. Если же Вы это делаете, то придумайте другую форму пометки ссылок.

Предложение: Графические кнопки должны иметь как минимум невыбранное и выбранное состояние. Состояние с наведенной на кнопку мышью и нажатое состояние должны рассматриваться отдельно.

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

Предложение: Указывайте, ведет ли ссылка к переходу в пределах страницы, в пределах сайта, или на другой сайт. Не прячьте URL, посетитель может получить из него ответ на этот вопрос.

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

Предложение: Используйте иконки или символы, или   диалог предупреждения перед ссылкой.

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

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

Предложение: Используйте предупреждения, или очевидные обозначения.

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

Правило: Неверные ссылки, должны рассматриваться, как катастрофа.

Предложение: Избегайте автоматической переадресации при ошибке 404.


Поиск и Дизайн

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

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

Правило: Если сайт состоит из одинаково оформленных данных, сложных для поиска, или содержит более 100 страниц, создайте механизм поиска на сайте.

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

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

Правило: Поисковая форма, также как и страница выдачи результатов, должна соответствовать дизайну сайта.

Правило: Поисковая форма должна соответствовать содержанию того, что посетитель может искать на сайте.

Предложение: Основные текстовые поля формы поиска должны быть в два раза больше чем   дополнительные.

Предложение: Лучше ограничить поиск темой, категорией, или идеей, чем разделом сайта.

Правило: Продвинутые поисковые механизмы должны иметь инструкции по использованию и примеры.

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

Правило: Формат результатов поиска должен включать возвращенные поисковым механизмом данные.

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


Типы страниц и Макеты

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

Правило: Избегайте широких страниц, особенно с горизонтальной прокруткой.

Правило: Старайтесь разместить важные элементы, например основную панель навигации, на первом экране.

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

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

Правило: При создании страниц для WebTV, создавайте страницы с жесткой структурой шириной 544 пиксела.

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

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

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

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

Предложение: Если это возможно, старайтесь умещать содержание страницы в пределах 3-5 экранов по вертикали.

Предложение: Управляйте полями страницы с некоторым коэффициентом.

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

Правило: Основная страница должна задавать визуальный и навигационный тон сайта.

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

Правило: Основная страница должна ясно указывать на содержание сайта.

Предложение: Основная страница должна обеспечивать основную информацию о сайте и информацию об изменениях на сайте.

Предложение: Если отдельная страница является важной или  служит началом раздела, то выделите ее визуально.

Правило: Страницы сайта должны следовать стилю и навигационной системе главной страницы, по крайней мере по духу.

Предложение: Делайте ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ одной легко печатаемой страницей, если они имеют разумную длину.

Предложение: Обеспечивайте ссылку для возвращения к началу документа или к списку вопросов после каждого ответа.

Предложение: Консультируйтесь с профессионалом для составления или проверки любых использованных юридических терминов.

Предложение: Указывайте на страницах дату последнего изменения.

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

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

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

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

Предложение: Указывайте на PDF-файлы при помощи текста и иконки, и обеспечьте информацию об использовании этого файла.

Правило: Создавайте заключительную страницу для каждого раздела.

Предложение: Обеспечьте ссылку для возврата к основной странице сайта со страницы выхода.

Правило: Отпускайте посетителя с миром. Избегайте фраз вроде "пожалуйста не уходите " или всплывающих окон.

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

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

Предложение: Избегайте использовать метафорический дизайн на сайтах для опытных посетителей или для активно посещаемых.

Предложение: Избегайте нетрадиционных интерфейсов на часто посещаемых сайтах.

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

Правило: В веб-дизайне стремитесь всегда быть последовательным, но оригинальным.


Текст


Правило: Увеличивайте размер текста, чтобы улучшить его читабельность.

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

Правило: Отдельные детали в дизайне сайта могут сильно влиять на его восприятие.

Предложение: Избегайте использовать сглаживание в надписях, сделанных мелким шрифтом.

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

Правило: Текст в столбцах текста на веб-страницах никогда не должен переноситься с низа одного столбца на верх другого.

Правило: Навигационные страницы страницы требуют меньшего количества свободного пространства в тексте, чем страницы информационные.

Предложение: Будьте внимательны при использовании слов, которые имеют альтернативные значения в сети.


Цвета, Изображения и Фоны

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

Предложение: Чтобы безопасно использовать более 216 цветов, используйте так называемые гибридные цвета.

Предложение: Из-за плохой совместимости браузеров избегайте использовать тег <BASEFONT> для установки шрифта в документе - особенно, если идет работа с цветами.

Правило: Всегда храните изображения в отдельном каталоге.

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

Правило: Вы не можете использовать тэг <IMG> без атрибута SRC.

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

Правило: Всегда используйте атрибуты WIDTH и HEIGHT в тэге <IMG>.

Правило: Никогда не используйте атрибуты WIDTH и HEIGHT для изменения размеров изображений в HTML. Если необходимо изображение меньшего размера, создайте отдельную меньшую версию.

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

Предложение: Ограничьтесь форматами JPEG и GIF до тех пор, пока остальные не станут общеупотребимыми.

Предложение: Не полагайтесь исключительно на цвет в ссылках и информационной графике.

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

Правило: Для корректного расположения порезанного изображения в ячейках таблицы установите атрибуты таблицы CELLPADDING и CELLSPACING равными нулю.

Предложение: Не делайте фоновое изображение очень маленьким (например 1-2 пиксела), поскольку это может раздражать глаз.

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


Это я Вам обещаю :)

Основные тэги html

05-03-2010

Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. Определяет видимую часть документа... подробнее Комментарии: 0 Кол. просмотров: общее - 6936 сегодня - 0

Определение наличия Flash-pluginа средствами HTML

29-04-2009

По статистике, около 90% пользователей в наши дни пользуются Internet Explorer (5-й или 6-й версией). В этих браузерах Flash, как правило, уже установлен... подробнее Комментарии: 4 Кол. просмотров: общее - 4976 сегодня - 0

Оценка XHTML

29-04-2009

Эту статью в 2000 году написал небезызвестный веб-разработчик Петер-Пауль Кох (Peter-Paul Koch), который поддерживает один из лучших ресурсов по JavaScript... подробнее Комментарии: 0 Кол. просмотров: общее - 4688 сегодня - 0

Специфические теги, поддерживаемые только браузером Internet Explorer или только Netscape

29-04-2009

Комментарии: 0 Кол. просмотров: общее - 4243 сегодня - 0

Основы HTML 4.0

29-04-2009

Всего несколько лет назад браузер Mosaic произвел сенсацию воспроизведением простых веб-страниц. Те дни давно канули в прошлое. Сегодня веб-страницы становятся все более сложными, как и применяемые для их создания технологии... подробнее Комментарии: 1 Кол. просмотров: общее - 5315 сегодня - 0