Статьи / Веб-Дизайн / Подсказки и советы для веб-мастеров - Топ 100+

  2008-11-04 12:52

Они все короткие и со смыслом, подобно моей жизни в эти дни!


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


Правило: Используйте простые и запоминаемые 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 пиксела), поскольку это может раздражать глаз.


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