Оптимизация сайта для печати
Очень часто при разработке сайта забывают о его оптимизации для печати. В чем же она заключается? По сути, в ней две составляющих: сделать так, чтобы лист использовался рационально, и убрать все то, что на бумаге бесполезно:
Кроме того, следите, чтобы при печати использовалась вся ширина листа, то есть не было бы жестко заданной ширины в пикселях для сайта в целом или для основного блока с контентом.
Как это сделать технически? Некоторые CMS позволяют создавать отдельные страницы для печати. Но это плохое решение: с точки зрения поисковых систем получаются дубли страниц, причем иногда версия для печати индексируется лучше, чем основная, и пользователи из поисковых систем, попадая на нее, не могут понять, как перейти на основной сайт. Поэтому лучше использовать средства CSS — media-запрос print, переопределив с его помощью CSS-свойства элементов на основной странице. Выглядит это примерно так (предполагается, что на сайте используется семантическая верстка с соответствующими тегами):
Здесь мы скрыли «подвал», все навигационные элементы, а также все формы для ввода данных и правый столбец. Кроме того, для блока с основным контентом и элемента, в который обернут весь сайт (div с id=wrapper) переопределили ширину, чтобы при печати контент растягивался на весь бумажный лист. Кроме этого, на всякий случай добавили класс print_only, который можно будет прописывать тем элементам, которые должны быть видимы только при печати.
Такая оптимизация сайта для печати требует совсем немного времени, но при этом значительно улучшит впечатление пользователя о сайте, если тот захочет его распечатать (и, может быть, сэкономит лист-другой бумаги). Также она может повлиять на позиции в поисковой выдаче, так как это может быть один из факторов, который учитывает Google при ранжировании.
- навигационное меню
- формы для поиска по сайту и комментариев
- рекламные блоки, виджеты соцсетей и кнопки «поделиться»
- различные всплывающие и накладывающиеся поверх основного контента элементы (например, на этом сайте это ссылка «Задать вопрос» справа)
- облако тегов
- «подвал» сайта
Кроме того, следите, чтобы при печати использовалась вся ширина листа, то есть не было бы жестко заданной ширины в пикселях для сайта в целом или для основного блока с контентом.
Как это сделать технически? Некоторые CMS позволяют создавать отдельные страницы для печати. Но это плохое решение: с точки зрения поисковых систем получаются дубли страниц, причем иногда версия для печати индексируется лучше, чем основная, и пользователи из поисковых систем, попадая на нее, не могут понять, как перейти на основной сайт. Поэтому лучше использовать средства CSS — media-запрос print, переопределив с его помощью CSS-свойства элементов на основной странице. Выглядит это примерно так (предполагается, что на сайте используется семантическая верстка с соответствующими тегами):
.print_only{display:none}
@media print {
nav,footer,form,aside{display:none}
#wrapper,article{width:auto;min-width:none;max-width:none}
.print_only{display:initial}
}Здесь мы скрыли «подвал», все навигационные элементы, а также все формы для ввода данных и правый столбец. Кроме того, для блока с основным контентом и элемента, в который обернут весь сайт (div с id=wrapper) переопределили ширину, чтобы при печати контент растягивался на весь бумажный лист. Кроме этого, на всякий случай добавили класс print_only, который можно будет прописывать тем элементам, которые должны быть видимы только при печати.
Такая оптимизация сайта для печати требует совсем немного времени, но при этом значительно улучшит впечатление пользователя о сайте, если тот захочет его распечатать (и, может быть, сэкономит лист-другой бумаги). Также она может повлиять на позиции в поисковой выдаче, так как это может быть один из факторов, который учитывает Google при ранжировании.