完璧な印刷版の作り方

18年前、Berners-Leeによって書かれた世界初のブラウザであるWorldWideWebは、すでにインターネットページをプリンタに送信する機会をユーザーに与えていました。 しかし、それにもかかわらず、インターネット上でのドキュメントの便利な印刷の問題は依然として関連しており、Web開発者の間で疑問を投げかけています。



単純な機能が一見しただけで多くの議論を引き起こすのはなぜですか? これを理解するには、ウェブ構築の歴史の最初のサイトを構成したものを覚えて、それを現代のものと比較してください。







世界初のブラウザWorldWideWebのインターフェース -議論のための別の主題。



最初のWebサイトのマークアップにより、スタイルを修正せずに「現状のまま」のドキュメントを送信して印刷できるようになり、紙の上で見栄えがよくなりました。 ただし、この市場でのMicrosoftの出現とInternet Explorerバージョン2(テーブルのサポート付き)のリリース後、サイトの外観は徐々に複雑になり始めました。 美しいデザインのためのファッションがあり、マークアップがより複雑になり、その結果、印刷​​エラーが現れ始めました。



「方法」を伝えることができる標準はありません。 ほとんどの場合、開発者は自分にとって便利な方法で印刷版を実装し、その価値を平準化し、ほとんどの一般ユーザーにとって不快なツール、したがって不必要なツールに変えます。



普遍的な解決策は可能ですか? おそらく。 それでも、タスクの詳細に目を向けて適用する必要があります。



忘れてはならないもの



Web開発者が置かれている客観的な条件を強調しましょう。



  1. リンク「印刷バージョン」を提供していない場合でも、ユーザーは常に標準の方法(ファイル-印刷)でページを印刷できます。
  2. ページ分割された長い記事を読むことはユーザーにとって便利ですが、記事全体を印刷することはユーザーにとって便利です。
  3. ユーザーが印刷するプリンターは、白黒またはカラーの場合があります。
  4. ユーザーは、最新の(またはそうでない)ブラウザーをインストールできます。
  5. 紙の上では、文書はすっきりと美しく見える必要があり、最も重要なことは読みやすいことです。
  6. 機能「印刷用のバージョン」は、サイトの通常の動作を妨げません。




各項目をより詳細に検討してください。



ファイル-印刷

サイトに「印刷可能なバージョン」リンクがない場合、これはコンテンツが印刷されないという意味ではないことを理解する必要があります。



さらに、Wordでの作業に慣れている経験の浅いユーザーは、ツールバーからページを印刷しようとします。



したがって、前提条件は、印刷バージョン用に最適化されたCSSスタイルシートの存在です(スタイルは、印刷値のメディア属性に関連付けられています)。 出力タイプの詳細な説明はwww.w3.org/TR/CSS2/media.htmlにありますが、最適化されたバージョンの実装方法については、 www.webmascon.com / topics / coding / 33a.aspという優れた翻訳記事があります



したがって、ユーザーが通常の方法でページを印刷することを決定した場合、彼の期待は完全に満たされます-ナビゲーションや不要な要素なしで印刷用に最適化されたページがプレビューウィンドウに表示されます。



歴史的に、ブラウザがCSS 2をサポートする前に、印刷バージョンの問題は、ページのライトバージョンを参照する特別なリンクを使用して解決されていました。 ブラウザ開発者とWeb開発者はどちらも非常に不活性であるため、CSS 2のこの機能が遍在するようになるには数年かかりました。



実際、CSS 2のサポートにより、ほとんどの場合「印刷可能なバージョン」リンクの必要性はなくなりました。 ただし、次のようなリンクを「手元に」用意することをお勧めします。 ユーザーの注意を引くための闘争の文脈では、サイト外のスペースへの余分なフォーカスシフトは望ましくありません。



長い記事

残念ながら、CSS 2は、大量の資料が章の形で提示され、ページ分割されている場合には役に立ちません。 情報を提示するこの方法は確かに読書には便利ですが、印刷するときに不便があります。 最も簡単な方法は、Wordまたはメモ帳のすべてのページを1つずつコピーすることです。 この場合、「バージョンの印刷」リンクは非常に重要です。 そして、ここで疑問が生じます-どこに配置するのが良いですか?



まず第一に、リンクは記事のすべてのページで、コンテキスト内(たとえば、タイトルの隣)で利用可能でなければなりません。



垂直スクロールなしでロードした直後に表示されるはずです。 ユーザーは、記事の印刷専用のブックマークに移動できます。



リンクもコンテンツの下に存在する必要があります。 1つの章を読んだ後に記事を印刷したいという欲求が生じる場合があります。



コンテンツ管理者は、記事をページに分割して、各ページが垂直に2つのブラウザ画面を占有しないようにすることをお勧めします。



著作権を争うためにマウスの右クリックをブロックする人にとって、より魅力的な解決策は、標準のブラウザコンテキストメニューを独自のメニューに置き換えることです。



このリンクをクリックするとどうなりますか?



ユーザーはオフィスアプリケーションでの作業に慣れていることを覚えておく必要があります。オフィスアプリケーションでは、画面からドキュメントが送信され、ほとんど変更されずに印刷されます。 したがって、印刷ダイアログを開く前に、ドキュメントの最終バージョンが表示されるはずです。



最適なソリューションは、印刷用に最適化されたコンテンツを含む新しいウィンドウを開くことです。 良い口調は、ロゴの付いた細い帽子の存在です。 商用サイトの場合、組織名と連絡先の電話番号をヘッダーに追加し、より詳細な連絡先情報と永続的な発信元アドレスを「地下室」に追加するのが正しいでしょう。 前提条件は、印刷ダイアログを引き起こす大きなリンク/ボタン「印刷」の存在です。



「印刷」リンク自体が印刷領域に収まらないように、スタイルシートの印刷バージョンを使用するか、印刷ダイアログを表示する前にリンクを非表示にすることができます(表示なし)。 「印刷」ボタンはテキストにする必要があります。 ブラウザでオフにした画像は、altボタンとtitleボタンの存在にもかかわらず、全体のアイデアを台無しにします。 印刷ダイアログをすぐに呼び出すことができます(たとえば、このような実装はMSDN Webサイトにあります)が、多くの場合、ボタンを使用した最初のオプションは顧客を感動させます。



美しく便利だと考える人もいます。



スタイルの印刷バージョンを元のページに接続して、追加のレイヤーを使用して印刷するか、通常のフォームに戻るというオファーを表示できます。 ただし、このような解決策は実用的ではなく、複数ページの記事の場合はまったく役に立ちません。 スタイルを更新した後、コンテンツはヘッダーの高さ、広告モジュールとブラウザーの可用性に応じて「ジャンプ」する場合があります。 さらに、ユーザビリティの原則に従って、プロポーザルレイヤーは常に中央に残り、スクロールとともに移動する必要があります。 そして最後に、リンクをクリックして印刷をキャンセルすると、前のスタイルシートがマークアップに適用され、スクロールと連動して、コンテンツの予期しない「ジャンプ」が発生します。



カラーレンダリング

ほとんどの印刷バージョンでは、プリンター機能がまったく考慮されていません。 悪い効果の良い例は、演色の違反です。



多くの場合、サイト上のリンクは色のみで強調表示され、白黒印刷ではリンクとテキストを区別することは不可能です。 この場合、印刷版では、スタイルをリンクに再割り当てする価値があります(下線を引きます)。 さらに、カラーインクジェットプリンタの所有者は、ノズルを簡単に詰まらせたり、カラーカートリッジのいずれかの消耗に近づいたりする可能性があります。 この場合、「ダークダークブルー」のテキストを送信して印刷することは非人道的です。 テキストは黒でなければなりません。



ブラウザー間の互換性

ブラウザー開発者はこの方向に進んでいますが、今後数年間、普遍的な標準化に依存する必要はありません。 ここで特定のことをアドバイスすることは困難です。異なるブラウザ(PCとMacの両方)で印刷バージョンをテストし、実績のあるソリューションを使用する必要があります。



あなたが見るものはあなたが得るものです

紙の場合、ユーザーは「印刷バージョン」リンクをクリックした後、ウィンドウ内と同じドキュメントを受け取る必要があります。 テキストは読みやすく、余分なボイドがあってはなりません。



まず、フォントとインデントに依存します。 フォントは、画面表示の慣例に従って、ピクセルではなくポイントで指定することをお勧めします。



本文のインデントはゼロにする必要があり、テキストは別の方法で配置する必要があります。 デフォルトでは、印刷用のページオプションには端からの距離が含まれます。



リンクに関しては、「デプロイ」する必要があるという意見があります。 完全なURLを添付します。 これは、ドキュメント内のすべてのリンクの重要性に自信がある場合にのみお勧めします。 サイト内のリンクがユーザーフレンドリーでない場合、たとえば、contain?、&、= .Phpおよびその他のアタビズムなどの場合、このソリューションを放棄することをお勧めします。 他のサイトへのリンクは、ドメイン名に切り捨てるか、サイト内の特殊文字の長さと存在を確認する必要があります。



ソリューションの詳細な説明は、記事に記載されています。



www.webmascon.com/topics/coding/33a.asp

imfo.ru/archive/2004/11/05/print_version_and_links



害を及ぼさない

印刷版は、検索エンジンでのサイトの発行に大きな影響を及ぼします。 実際には、メインページのコンテンツが完全に複製されています。 また、印刷バージョンには追加の要素が含まれていないため(メニューを含む)、その重みはメインページの重みよりも大きく、検索エンジン...インデックス内のメインページを印刷バージョンに置き換えます。 検索エンジンからそのようなページにアクセスした結果、訪問者はサイトの他のページにアクセスできなくなり、去ることができます。 記事ポータルに壊滅的なものがない場合(ユーザーが記事を検索して見つけた場合)、オンラインストアで製品カードを印刷版に置き換えることは致命的です。



したがって、特定のSEO目的で印刷バージョンを使用しない場合は、リンクを必ずnoindexに入れてください。



関連リンク:



* www.alistapart.com



Webデザイン、レイアウト、およびコンテンツのリストマガジン



* www.webmascon.com/topics/coding/33a.asp



印刷版のスタイルシートに印刷可能な記事。 ソース:リストを離れて



* imfo.ru/archive/2004/11/05/print_version_and_links



印刷可能なリンクの記事



* npj.netangels.ru/seminar/print_version



「Printable HTML-documents」ワークショップの一部として読まれるレポートのテキスト



* forum.searchengines.ru



検索エンジンフォーラム



* www.w3.org/TR/CSS2/media.html



CSS 2のさまざまな出力デバイスのディスプレイタイプの説明



* www.itrack.ru/spytrack



サイトへの訪問者の行動を分析するシステム



著者について:



ウラジミール・スターコフ-iTrackの責任者(WebサイトおよびWebベースのソリューションの開発、売上増加を目的としたマーケティングコミュニケーション)。



ソース: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800



All Articles