Ещё 18 лет назад первый в мире браузер WorldWideWeb, написанный Бернерс-Ли, уже давал пользователю возможность отправить на принтер интернет-страницу. Но, несмотря на это, проблематика удобной печати документов в интернете до сих пор остается актуальной и вызывает вопросы в среде веб-разработчиков.
Почему же простая, на первый взгляд, функция вызывает так много дискуссий? Чтобы понять это, достаточно вспомнить, что представлял собой первый в истории веб-строительства сайт, и сравнить его с современными.
Интерфейс первого в мире браузера WorldWideWeb – отдельный предмет для обсуждения.
Разметка первых веб-сайтов позволяла отправлять на печать документы «as is», без какой-либо стилевой коррекции, и они отлично смотрелись на бумаге. Однако после появления на этом рынке Microsoft и выхода Internet Explorer версии 2 (с поддержкой таблиц) внешний вид сайтов стал постепенно усложняться. Появилась мода на красивый дизайн, усложнилась разметка и, как следствие, стали появляться ошибки при печати.
Стандартов, которые могли бы рассказать, «как надо», не существует. В большинстве случаев разработчики реализуют версию для печати так, как удобно им, нивелируя её ценность, превращая в неудобный для большинства простых пользователей и, следовательно, ненужный инструмент.
Возможно ли универсальное решение? Возможно. Тем не менее, его надо применять с оглядкой на специфику задачи.
О чем нельзя забывать
Давайте выделим объективные условия, в которые поставлен веб-разработчик:
Рассмотрим каждый пункт подробнее.
Файл–Печать
Следует понимать, что если на сайте нет ссылки «Версия для печати», то это не значит, что содержимое не будут печатать.
Более того, неопытный пользователь, привыкший к работе в Word, будет пытаться распечатать страницу именно через панель инструментов.
Поэтому обязательным условием является наличие оптимизированной таблицы стилей CSS для печатной версии (стили подключаются с указанием атрибута media в значении print). Полное описание типов вывода можно найти здесь: www.w3.org/TR/CSS2/media.html, а о том, как именно реализовать оптимизированную версию, есть отличная переводная статья: www.webmascon.com/topics/coding/33a.asp
Таким образом, если пользователь решил распечатать страницу привычным способом, то его ожидания оправдаются в полной мере – он увидит в окне предварительного просмотра оптимизированную для печати страницу без навигации и лишних элементов.
Исторически сложилось так, что до поддержки браузерами CSS 2 проблему версии для печати решали при помощи специальной ссылки, которая обращалась к облегченной версии страницы. И разработчики браузеров, и веб-разработчики довольно инертны, поэтому потребовалось несколько лет на то, чтобы эта возможность CSS 2 стала применяться повсеместно.
В действительности с поддержкой CSS 2 необходимость в ссылках «Версия для печати» в большинстве случаев отпала. Однако хорошим тоном является наличие такой ссылки «под рукой», т.к. в условиях борьбы за внимание пользователя лишний перевод фокуса на пространство вне сайта нежелателен.
Длинные статьи
К сожалению, CSS 2 не поможет в тех случаях, когда объемный материал представлен в виде глав и разбит на страницы. Такой способ подачи информации безусловно удобен для чтения, но при печати возникают неудобства. Самым «простым» способом оказывается поочередное копирование всех страниц в Word или блокнот. В этом случае ссылка «Версия для печати» просто жизненно необходима. И вот здесь возникает вопрос – а где ее лучше поместить?
Прежде всего, ссылка должна быть доступна на всех страницах статьи, причем в контексте (например, рядом с заголовком).
Она должна быть видна сразу после загрузки без вертикальной прокрутки, т.к. пользователь может зайти по закладке специально для печати статьи.
Ссылка должна присутствовать и под контентом, т.к. желание распечатать статью может возникнуть после прочтения одной главы.
Контент-менеджерам рекомендуется разбивать статью на страницы так, чтобы каждая страница занимала не более двух экранов браузера по вертикали.
Для тех, кто в борьбе за авторское право блокирует правый клик мыши, более привлекательным решением может стать замена стандартного контекстного меню браузера собственным, одним из пунктов которого будет «Печать».
Что должно происходить по клику на эту ссылку?
Надо помнить, что пользователь привык работать в офисных приложениях, где документ с экрана отправляется на печать почти без изменений. Поэтому прежде чем открывать диалог печати, он должен увидеть итоговый вариант документа.
Оптимальное решение – открытие нового окна, содержащее оптимизированный для печати контент. Хорошим тоном считается наличие узкой шапки с логотипом. В случае коммерческого сайта правильным будет добавить в шапку название организации и контактный телефон, а в «подвал» – более подробную контактную информацию и постоянный адрес источника. Обязательным условием является наличие крупной ссылки/кнопки «Распечатать», вызывающей диалог печати.
Чтобы сама ссылка «Распечатать» не попала в область печати, можно либо использовать print-версию таблицы стилей, либо просто скрыть ссылку перед выводом диалога печати (display в значении none). Кнопка «Распечатать» должна быть текстовой, т.к. выключенные в браузере картинки испортят всю идею, несмотря на наличие у кнопки alt и title. Можно сразу вызвать диалог печати (например, такая реализация есть на сайте MSDN), но часто клиентам импонирует именно первый вариант с кнопкой.
Я встречал другое решение, которое некоторые считают красивым и удобным.
Можно подключить print-версию стилей к исходной странице и вывести дополнительным слоем предложение распечатать или вернуться к обычному виду. Тем не менее, такое решение непрактично, а в случае многостраничных статей и вовсе бесполезно. После обновления стилей контент может «отпрыгнуть» в зависимости от высоты шапки, наличия рекламных модулей и браузера. Кроме того, следуя принципам юзабилити, слой с предложением должен всегда оставаться в центре, перемещаясь вместе со скроллом. И наконец, при клике на ссылку для отмены печати, к разметке применяется прежняя таблица стилей, что в совокупности со скроллом даст очередное неожиданное «отпрыгивание» контента.
Цветопередача
Большинство версий для печати совершенно не учитывают особенностей принтера. Хороший пример плохих последствий — это нарушение цветопередачи.
Часто ссылки на сайте выделены только цветом, и при черно-белой печати различить, что было ссылкой, а что текстом, становится невозможно. В этом случае, в версии для печати стоит переназначить ссылкам стили (сделать подчеркнутыми). Кроме того, у обладателя цветного струйного принтера легко могут засориться дюзы или быть близким к истощению один из цветных картриджей. В этом случае отправлять на печать «темно-темно-синий» текст негуманно. Текст должен быть черным.
Кроссбраузерность
В ближайшие годы рассчитывать на всеобщую стандартизацию не придется, хотя разработчики браузеров делают шаги в этом направлении. Посоветовать здесь что-либо конкретное трудно, нужно тестировать версии для печати в разных браузерах (как для PC, так и для Mac) и стараться использовать проверенные временем решения.
What You See Is What You Get
На бумаге пользователь должен получить такой же документ, как и в окне после клика на ссылку «Версия для печати». Текст должен удобно читаться, не должно быть лишних пустот.
Прежде всего, это зависит от шрифтов и отступов. Шрифты рекомендуется задавать в пунктах, а не пикселях, как это принято для экранного отображения.
Отступы body нужно обнулить, а позиционировать текст иным способом, т.к. по умолчанию параметры страницы при печати предусматривают расстояния от краев.
Что касается ссылок, то существует мнение, что их надо «разворачивать», т.е. сопровождать полным адресом URL. Это целесообразно делать только в том случае, если вы уверены в важности всех ссылок в документе. Лучше отказаться от этого решения, если ссылки в рамках сайта не являются дружественными к пользователю, например, содержат ?, &, = .php и прочие атавизмы. Ссылки на другие сайты лучше обрезать до имени домена или производить проверку на длину и наличие в них специальных символов.
Более подробное описание решений приводится в статьях:
www.webmascon.com/topics/coding/33a.asp
imfo.ru/archive/2004/11/05/print_version_and_links
Не навредить
Версия для печати имеет сильное влияние на выдачу сайта в поисковых машинах. Дело в том, что она полностью дублирует контент основной страницы. А поскольку версия для печати не содержит никаких дополнительных элементов (в том числе и сквозных меню), то ее вес оказывается выше, чем вес основной страницы, и поисковики… замещают в индексе основные страницы их версиями для печати. В результате попадания на такую страницу из поисковика посетитель не может перейти на другие страницы сайта – и может уйти. Если для статейного портала в этом нет ничего катастрофического (пользователь искал статью, и он ее нашел), то для интернет-магазина замена карточек товаров их версиями для печати может оказаться губительным.
Поэтому, если вы не собираетесь использовать версии для печати в специфических целях SEO, обязательно помещайте ссылки в noindex.
Ссылки по теме:
* www.alistapart.com
Журнал List Apart, посвященный проблематике веб-дизайна, верстки и контентного наполнения
* www.webmascon.com/topics/coding/33a.asp
Переводная статья, посвященная таблице стилей версии для печати. Источник: List Apart
* imfo.ru/archive/2004/11/05/print_version_and_links
Статья, посвященная выводу ссылок в версии для печати
* npj.netangels.ru/seminar/print_version
Тексты докладов, прочитанных в рамках семинара «Версия для печати HTML-документов»
* forum.searchengines.ru
Форум о поисковых системах
* www.w3.org/TR/CSS2/media.html
Описание типов отображения для различных устройств вывода в CSS 2
* www.itrack.ru/spytrack
Система анализа действий посетителей на сайте
Об авторе:
Владимир Старков – руководитель компании iTrack (разработка интернет-сайтов и решений, основанных на веб-технологиях; маркетинговые коммуникации, направленные на повышение уровня продаж).
Источник: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800
Почему же простая, на первый взгляд, функция вызывает так много дискуссий? Чтобы понять это, достаточно вспомнить, что представлял собой первый в истории веб-строительства сайт, и сравнить его с современными.
Интерфейс первого в мире браузера WorldWideWeb – отдельный предмет для обсуждения.
Разметка первых веб-сайтов позволяла отправлять на печать документы «as is», без какой-либо стилевой коррекции, и они отлично смотрелись на бумаге. Однако после появления на этом рынке Microsoft и выхода Internet Explorer версии 2 (с поддержкой таблиц) внешний вид сайтов стал постепенно усложняться. Появилась мода на красивый дизайн, усложнилась разметка и, как следствие, стали появляться ошибки при печати.
Стандартов, которые могли бы рассказать, «как надо», не существует. В большинстве случаев разработчики реализуют версию для печати так, как удобно им, нивелируя её ценность, превращая в неудобный для большинства простых пользователей и, следовательно, ненужный инструмент.
Возможно ли универсальное решение? Возможно. Тем не менее, его надо применять с оглядкой на специфику задачи.
О чем нельзя забывать
Давайте выделим объективные условия, в которые поставлен веб-разработчик:
- Пользователь всегда может распечатать страницу стандартным способом (Файл-Печать), даже если вы не предусмотрели ссылку «Версия для печати»;
- Пользователю удобно читать длинную статью с разбиением на страницы, но печатать ему удобно всю статью целиком;
- Принтер, на котором печатает пользователь, может быть черно-белым или цветным;
- У пользователя может быть установлен любой современный (или не очень) браузер;
- На бумаге документ должен выглядеть опрятно и красиво и, главное, легко читаться;
- Функционал «Версия для печати» не должен нарушать нормальной работы сайта.
Рассмотрим каждый пункт подробнее.
Файл–Печать
Следует понимать, что если на сайте нет ссылки «Версия для печати», то это не значит, что содержимое не будут печатать.
Более того, неопытный пользователь, привыкший к работе в Word, будет пытаться распечатать страницу именно через панель инструментов.
Поэтому обязательным условием является наличие оптимизированной таблицы стилей CSS для печатной версии (стили подключаются с указанием атрибута media в значении print). Полное описание типов вывода можно найти здесь: www.w3.org/TR/CSS2/media.html, а о том, как именно реализовать оптимизированную версию, есть отличная переводная статья: www.webmascon.com/topics/coding/33a.asp
Таким образом, если пользователь решил распечатать страницу привычным способом, то его ожидания оправдаются в полной мере – он увидит в окне предварительного просмотра оптимизированную для печати страницу без навигации и лишних элементов.
Исторически сложилось так, что до поддержки браузерами CSS 2 проблему версии для печати решали при помощи специальной ссылки, которая обращалась к облегченной версии страницы. И разработчики браузеров, и веб-разработчики довольно инертны, поэтому потребовалось несколько лет на то, чтобы эта возможность CSS 2 стала применяться повсеместно.
В действительности с поддержкой CSS 2 необходимость в ссылках «Версия для печати» в большинстве случаев отпала. Однако хорошим тоном является наличие такой ссылки «под рукой», т.к. в условиях борьбы за внимание пользователя лишний перевод фокуса на пространство вне сайта нежелателен.
Длинные статьи
К сожалению, CSS 2 не поможет в тех случаях, когда объемный материал представлен в виде глав и разбит на страницы. Такой способ подачи информации безусловно удобен для чтения, но при печати возникают неудобства. Самым «простым» способом оказывается поочередное копирование всех страниц в Word или блокнот. В этом случае ссылка «Версия для печати» просто жизненно необходима. И вот здесь возникает вопрос – а где ее лучше поместить?
Прежде всего, ссылка должна быть доступна на всех страницах статьи, причем в контексте (например, рядом с заголовком).
Она должна быть видна сразу после загрузки без вертикальной прокрутки, т.к. пользователь может зайти по закладке специально для печати статьи.
Ссылка должна присутствовать и под контентом, т.к. желание распечатать статью может возникнуть после прочтения одной главы.
Контент-менеджерам рекомендуется разбивать статью на страницы так, чтобы каждая страница занимала не более двух экранов браузера по вертикали.
Для тех, кто в борьбе за авторское право блокирует правый клик мыши, более привлекательным решением может стать замена стандартного контекстного меню браузера собственным, одним из пунктов которого будет «Печать».
Что должно происходить по клику на эту ссылку?
Надо помнить, что пользователь привык работать в офисных приложениях, где документ с экрана отправляется на печать почти без изменений. Поэтому прежде чем открывать диалог печати, он должен увидеть итоговый вариант документа.
Оптимальное решение – открытие нового окна, содержащее оптимизированный для печати контент. Хорошим тоном считается наличие узкой шапки с логотипом. В случае коммерческого сайта правильным будет добавить в шапку название организации и контактный телефон, а в «подвал» – более подробную контактную информацию и постоянный адрес источника. Обязательным условием является наличие крупной ссылки/кнопки «Распечатать», вызывающей диалог печати.
Чтобы сама ссылка «Распечатать» не попала в область печати, можно либо использовать print-версию таблицы стилей, либо просто скрыть ссылку перед выводом диалога печати (display в значении none). Кнопка «Распечатать» должна быть текстовой, т.к. выключенные в браузере картинки испортят всю идею, несмотря на наличие у кнопки alt и title. Можно сразу вызвать диалог печати (например, такая реализация есть на сайте MSDN), но часто клиентам импонирует именно первый вариант с кнопкой.
Я встречал другое решение, которое некоторые считают красивым и удобным.
Можно подключить print-версию стилей к исходной странице и вывести дополнительным слоем предложение распечатать или вернуться к обычному виду. Тем не менее, такое решение непрактично, а в случае многостраничных статей и вовсе бесполезно. После обновления стилей контент может «отпрыгнуть» в зависимости от высоты шапки, наличия рекламных модулей и браузера. Кроме того, следуя принципам юзабилити, слой с предложением должен всегда оставаться в центре, перемещаясь вместе со скроллом. И наконец, при клике на ссылку для отмены печати, к разметке применяется прежняя таблица стилей, что в совокупности со скроллом даст очередное неожиданное «отпрыгивание» контента.
Цветопередача
Большинство версий для печати совершенно не учитывают особенностей принтера. Хороший пример плохих последствий — это нарушение цветопередачи.
Часто ссылки на сайте выделены только цветом, и при черно-белой печати различить, что было ссылкой, а что текстом, становится невозможно. В этом случае, в версии для печати стоит переназначить ссылкам стили (сделать подчеркнутыми). Кроме того, у обладателя цветного струйного принтера легко могут засориться дюзы или быть близким к истощению один из цветных картриджей. В этом случае отправлять на печать «темно-темно-синий» текст негуманно. Текст должен быть черным.
Кроссбраузерность
В ближайшие годы рассчитывать на всеобщую стандартизацию не придется, хотя разработчики браузеров делают шаги в этом направлении. Посоветовать здесь что-либо конкретное трудно, нужно тестировать версии для печати в разных браузерах (как для PC, так и для Mac) и стараться использовать проверенные временем решения.
What You See Is What You Get
На бумаге пользователь должен получить такой же документ, как и в окне после клика на ссылку «Версия для печати». Текст должен удобно читаться, не должно быть лишних пустот.
Прежде всего, это зависит от шрифтов и отступов. Шрифты рекомендуется задавать в пунктах, а не пикселях, как это принято для экранного отображения.
Отступы body нужно обнулить, а позиционировать текст иным способом, т.к. по умолчанию параметры страницы при печати предусматривают расстояния от краев.
Что касается ссылок, то существует мнение, что их надо «разворачивать», т.е. сопровождать полным адресом URL. Это целесообразно делать только в том случае, если вы уверены в важности всех ссылок в документе. Лучше отказаться от этого решения, если ссылки в рамках сайта не являются дружественными к пользователю, например, содержат ?, &, = .php и прочие атавизмы. Ссылки на другие сайты лучше обрезать до имени домена или производить проверку на длину и наличие в них специальных символов.
Более подробное описание решений приводится в статьях:
www.webmascon.com/topics/coding/33a.asp
imfo.ru/archive/2004/11/05/print_version_and_links
Не навредить
Версия для печати имеет сильное влияние на выдачу сайта в поисковых машинах. Дело в том, что она полностью дублирует контент основной страницы. А поскольку версия для печати не содержит никаких дополнительных элементов (в том числе и сквозных меню), то ее вес оказывается выше, чем вес основной страницы, и поисковики… замещают в индексе основные страницы их версиями для печати. В результате попадания на такую страницу из поисковика посетитель не может перейти на другие страницы сайта – и может уйти. Если для статейного портала в этом нет ничего катастрофического (пользователь искал статью, и он ее нашел), то для интернет-магазина замена карточек товаров их версиями для печати может оказаться губительным.
Поэтому, если вы не собираетесь использовать версии для печати в специфических целях SEO, обязательно помещайте ссылки в noindex.
Ссылки по теме:
* www.alistapart.com
Журнал List Apart, посвященный проблематике веб-дизайна, верстки и контентного наполнения
* www.webmascon.com/topics/coding/33a.asp
Переводная статья, посвященная таблице стилей версии для печати. Источник: List Apart
* imfo.ru/archive/2004/11/05/print_version_and_links
Статья, посвященная выводу ссылок в версии для печати
* npj.netangels.ru/seminar/print_version
Тексты докладов, прочитанных в рамках семинара «Версия для печати HTML-документов»
* forum.searchengines.ru
Форум о поисковых системах
* www.w3.org/TR/CSS2/media.html
Описание типов отображения для различных устройств вывода в CSS 2
* www.itrack.ru/spytrack
Система анализа действий посетителей на сайте
Об авторе:
Владимир Старков – руководитель компании iTrack (разработка интернет-сайтов и решений, основанных на веб-технологиях; маркетинговые коммуникации, направленные на повышение уровня продаж).
Источник: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800
