Один из самых простых принципов, благодаря соблюдению которых вы украсите свой сайт не хуже профессионалов, - последовательность в оформлении. Я уже говорил об этом применительно к навигации; те же правила действуют и при выборе цветовой гаммы.
Придерживаясь их, вы придадите сайту завершенный вид: он будет выглядеть как упорядоченный каталог партнерок, а не пучок кое-как связанных битов - неказистое творение начинающего экспериментатора.
По теории цвета написаны целые тома; прочитав их, вы, вероятно, узнаете много интересного. Но если вам не хватает на это желания или времени, достаточно запомнить следующие рекомендации:
• используйте резко контрастирующие цвета для текста и фона страницы. Не накладывайте светлый текст на светлый фон или темный - на темный фон. Также избегайте сочетаний, плохо воспринимаемых визуально. Светло-розовые символы на темно-зеленом фоне хорошо заметны, но читать такой текст - сплошное мучение. Если вас одолевают раздумья, учтите: черный текст на белом фоне - не только самый простой, но и самый надежный вариант;
• ограничьтесь двумя-тремя цветами. Один из них сделайте фоновым, другой (или два других) - акцентирующими и используйте их последовательно на всех страницах сайта;
• избегайте мозаичного/орнаментного фона. Хотя подобные эффекты порой выглядят сверхоригинально, чаше всего они лишь затрудняют прочтение текста. Если вам все-таки необходимо использовать фоновый рисунок, позаботьтесь о том, чтобы орнамент был едва заметен, - пусть он будет напоминать скорее тонкий водяной знак, чем обертку новогоднего подарка.
Если вы сомневаетесь в важности следования этим правилам, найдите несколько ресурсов, которые их проигнорировали. Почитав, например, фиолетовый текст на черном фоне, вы через некоторое время ощутите, что у вас начали болеть глаза.
Хотите поиграть с различными цветовыми комбинациями? К вашим услугам ряд сайтов, специально созданных, чтобы помочь вам в этом:
• раздел Color Picker на сайте PageTutor позволяет выбирать цвета для текста, ссылок и фона страниц и сразу же просматривать результаты на экране. Можно загрузить на свой компьютер копию для автономного использования;
• в "виртуальной лаборатории" Webmaster's Color Lab вы выбираете цвета, нажимая на соответствующие образцы, а затем отмеченные оттенки располагаются друг за другом на экране. Также сайт содержит ссылки на статьи об использовании цветов и материалы по теории цвета.
Вам следует принять во внимание еще одно не очень приятное обстоятельство: один и тот же цвет выглядит по-разному в различных браузерах и на различных компьютерах.
Дизайн страницы сайта: шрифты и текст
"Читабельность" текста на сайте зависит от используемых шрифтов.
Шрифт - это определенная гарнитура в совокупности с неким начертанием (например, курсивным, полужирным) и/или подчеркиванием. При выборе шрифтов для отображения текста на сайте руководствуйтесь следующими соображениями:
• ограничьтесь одним-двумя шрифтами. Обычно первый используется для заголовков, а второй - для основного текста;
• не злоупотребляйте цветовыми выделениями. От пестрого текста рябит в глазах.
"Раскрашивайте" его только тогда, когда это оправдано, - например, чтобы выделить некоторый элемент сайта, - но не специально для того, чтобы получилась "веселенькая" страничка.
Вот еще один совет: постарайтесь отформатировать текстовые блоки так, чтобы они не сливались в одну сплошную массу. Чтение с монитора утомляет быстрее, чем просмотр печатных публикаций, так что пожалейте своих посетителей! Разбейте большие фрагменты на абзацы и расположите текст не по всей ширине экрана. Даже газетные статьи печатаются в несколько колонок, чтобы их было легче читать.
По тем же причинам не следует перегружать страницы информацией. Рассортируйте ее по разделам и используйте заголовки, которые помогут посетителям перейти непосредственно к той рубрике, которая им более интересна.
Использование графики на сайте
Вне всякого сомнения, графика значительно обогащает сайт. Нет ничего удивительного, если вы захотите использовать ее в некотором количестве. Ключевые слова здесь - "некотором". Каждый графический элемент, который вы помещаете на страницу, увеличивает время ее загрузки на компьютер посетителя. Так как завсегдатаи интернета - люди нетерпеливые, важно сократить время ожидания до минимума.
Вот как вы можете делать это:
1. используйте маленькие изображения - они быстрее загружаются; оптимизируйте графику. При помощи программ сжатия рисунков постарайтесь максимально уменьшить объем файлов;
2. подбирайте текстовые альтернативы графическим ссылкам. Некоторые пользователи в целях ускорения работы настраивают браузер так, чтобы он вообще не загружал изображения. Если дизайн элементов навигации на вашем сайте предполагает наличие рисунков, то они будут потеряны, - а вместе с ними и посетители! В следующей главе я объясню, как избежать этого, используя атрибут alt HTML-тэга ;
3. всегда определяйте размеры изображения. Об этом пойдет речь в следующей главе. Пока просто запомните: благодаря данному приему вы добьетесь того, что ваша страница будет загружаться более быстро и ровно;
4. выбирайте подходящий формат файла для каждого создаваемого вами рисунка. Существует множество различных форматов графических документов ; сделав правильный выбор, вы выиграете в объеме файла.
GIF, JPG или PNG
Графические изображения, размещаемые на страницах, хранятся в одном из трех форматов: GIF, JPG или PNG. Какой из них используется, легко определить по расширению файла – соответственно: .gif, .jpg (.jpeg) или .png.
Когда вы создаете рисунок, который предполагается добавить на сайт, предстоит сразу же подобрать подходящий формат. По каким критериям? В двух словах, GIF-файлы (GIF расшифровывается как Graphics Interchange Format - формат обмена графическими данными) лучше подходят для изображений с небольшим количеством сильно различающихся цветов. Это идеальный вариант для четких контурных рисунков и простых значков. Формат поддерживает анимацию.
JPG (полное наименование- JPEG, что означает Joint Photographies Expert Group - формат объединенной группы экспертов в области фотографии).
Сокращение PNG (произносится "пинг" или "пнг") расшифровывается как Portable Network Graphics - портативная сетевая графика. Формат был создан как альтернатива GIF и поддерживает функции, в суть которых станут вникать лишь заядлые компьютерщики.
Ничего страшного не произойдет, если вы выбрали неидеальный формат изображения. Вероятно, ваш файл окажется объемнее, чем мог бы быть, и станет дольше загружаться. Не исключено, что ваше изображение не будет столь четким и резким, как вам хотелось бы.
Еще советуем:
