Размещение текста, еще о шрифтах

Оформление текста на рис. 5.2 эффективно и экономично (это моя быстрая переделка сайта оптовой торговли свадебными товарами).

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

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

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

Отображение шрифтов в браузерах

Работая над оформлением текста в любой области дизайна, помните о двух важных законах:

  1. В различных браузерах и операционных системах одинаково выглядит только ограниченное количество шрифтов.
  2. Единственный способ быть уверенным в том, что пользователи увидят ваш шрифт таким, как вы хотели бы его видеть, — это использование картинок вместо XHTML-текста. Иногда такая практика целесообразна, иногда — нет. Об этом будет рассказано в следующих разделах.

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

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

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

Вернемся ненадолго к табл. 5.1, в которой перечислены шрифты для каждо­го элемента текста. Заголовки будут оформлены шрифтом Georgia, если у пользователя есть этот шрифт на компьютере. (Практически у всех пользова­телей Windows и Мае он есть.) Если нет, заголовки будут оформлены Times New Roman, а если у пользователя нет ни одного шрифта из этого списка — любым имеющимся у него на компьютере шрифтом с засечками. В чрезвычайно ред­ких случаях, если у пользователя нет шрифтов с засечками, будет использован шрифт, стоящий в системе по умолчанию. Не забудьте назначить несколько шрифтов для каждого элемента текста.

В зависимости от доступных на данном компьютере шрифтов, вы должны отметить прежде всего предпочтительный шрифт, затем альтернативные шрифты, а потом — шрифт по умолчанию. Например, классическая операцион­ная система Мае обладает шрифтом Helvetica, однако для мелкого текста мно­гие пользователи Мае предпочитают Geneva, который чаще всего недоступен в Windows. Шрифтом по умолчанию стоит сделать Geneva, чтобы быть уверен­ным в том, что у пользователей Мае не появится Helvetica, который, как прави­ло читается хуже.

Управление шрифтами посредством изображений

В примере с сайтом оптовой торговли свадебными товарами я выбрала шрифт Zapfino в качестве декоративного шрифта для логотипа сайта. Держу пари, что Zapfino есть далеко не у всех посетителей сайта. Тем не менее мне хочется быть уверенной в том, что все посетители сайта увидят логотип именно в Zapfino. Единственный гарантированный способ — создать логотип в графическом ре­дакторе, таком какAdobe Photoshop или Macromedia Fireworks (рис. 5.3), и экс­портировать его в формат GIF благодаря функции Photoshop под названием Save for Web. Затем нужно включить это изображение в XHTML-страницы.

Рис. 5.З. Это файл изображения логотипа втом виде, в каком я работаю над ним в Photoshop. Я могу создать изображение, используя любой шрифт, имеющийсяу меня накомпьютере, а затем экспортировать его в GIF-файл, который будетиспользоватьсяу меня насайте. Такая практика широко используется всеми Web-дизайнерами

Угроза бюджету:

Ни Adobe Photoshop, ни его альтернатива, Macromedia Fireworks, — программы не из дешевых. Однако ничто не может с ними сравниться, когда речь идет о создании про­фессионально выполненной графики. В случае с графическими редакторами я не могу предложить никакой дешевой альтернативы; придется потратиться. Из-за экономии на графических редакторах пострадает ваш сайт.

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

Угроза бюджету    

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

Еще одна статья ваших расходов — создание и размещение этих картинок. Создание, оптимизация, обновление, затем опять оптимизация — все это требу­ет времени. В любое время, когда мне понадобится изменить текст на рис. 5.3, мне придется открывать карт^инку в редакторе, сохранять изменения, оптими­зировать картинку, а затем отправлять измененный GIF-файл снова на сервер. Если бы я могла использовать текст в виде шрифта, времени потребовалось бы меньше. Это имеет мало значения, когда на вашем сайте находится лишь не­сколько картинок, но по мере добавления новых картинок, требующих часто­го обновления, вы сразу же заметите, как возрастут расходы на производство.

Кто-то скажет, что я преувеличиваю проблемы, связанные с использовани­ем изображений вместо текста. Это будет вполне справедливо. Существуют способы работы с изображениями, которые не вызывают сложностей, связан­ных с большим трафиком и расходами на производство. Во-первых, размер изображения должен быть как можно меньше. Функция Photoshop Save for Web легко справляется с этой задачей без потери качества. Во-вторых, помните о том, что повторяющиеся изображения сохраняются на жестком диске пользо­вателя, экономя время пользователя на передачу данных (и ваши расходы на хостинг) при посещении более чем одной страницы вашего сайта. Это не смер­тельный, даже не страшный грех — использовать картинки таким образом; удо­стоверьтесь, что вы не применяете текстовые изображения неоправданно. Используйте их разумно!

Текстовые GIF-изображения подходят для логотипов, а в некоторых случа­ях — даже для подзаголовков. Однако большую часть Web-текста, включая под­заголовки, лучше всего оформлять в виде форматированной XHTML-разметки при помощи CSS.

Posted in Экономичный Web-дизайн.