Bei der Arbeit habe ich kürzlich ein neues System für einen unserer Kunden, das Rick Wilcox Magic Theater, eingeführt. Ihre Website ist größtenteils informativ über sie und ihre Show und dient als Portal für den Online-Ticketverkauf. Da ihr Theater Teil eines Urlaubsziels ist, kaufen die Leute oft lange im Voraus Tickets. Die beste Methode, ihren Spielplan darzustellen, ist buchstäblich im Kalenderformat, sodass die Leute die Monatsspieltermine auf einen Blick sehen können.
Dies war schon immer eine beliebte Seite zum Ausdrucken für ihre Kunden. Lange Zeit boten wir ein PDF zum Download an, das wir mit den aktuellen Spielterminen aktuell hielten. Dies ermöglichte eine gute Designkontrolle, war aber sehr umständlich, ständig zu aktualisieren. Bei der Einführung der neuen Version dachte ich, dies sei der ideale Zeitpunkt, um eine Seite zu erstellen, die **für den Druck konzipiert** ist und sich dynamisch mit dem Rest des Kalenders auf dem Laufenden hält.
Im Web kann man sich darauf verlassen, dass die Monitore der Leute Farben anzeigen (Gott sei Dank). Wir nutzen dies gut aus, wenn wir den Spielplan im Web anzeigen. Mein erster Versuch mit einem Print-Stylesheet war meiner Meinung nach großartig. Es setzte den Text in Punkten, passte gut auf eine Seite, eliminierte alles außer den notwendigen Informationen und sah dabei gut aus. **Bis auf einen einzigen fatalen Fehler:** Es beruhte auf Farbe.
Dafür gibt es zwei Probleme
- Nicht jeder hat einen Farbdrucker.
- Hintergrundfarben und -bilder **werden standardmäßig nicht gedruckt**.
Ja, es ist eine Druckereinstellung, die Ihre Benutzer ändern könnten, aber Sie können sich absolut nicht darauf verlassen, dass Ihre Benutzer dies wissen oder tun. Sie können dies von der Web-Seite aus nicht steuern (soweit ich weiß).
Lösung: Einen Weg finden, um Schwarzweiß zu gehen
Eine Lösung wäre, eine listenbasierte Darstellung zu wählen, die keine Farben benötigt, um Vorstellungszeiten zu unterscheiden. Wir mochten die Kalenderansicht jedoch sehr, daher brauchten wir eine Möglichkeit, Vorstellungszeiten im begrenzten Rahmen einer Tages-Tabellenzelle zu unterscheiden, ohne Farbe zu benötigen.
CSS-Rahmen zur Rettung!
Sicherlich ist es nicht so hübsch wie die farbige Lösung, aber es erfüllt seinen Zweck!
Das ist eigentlich eine ziemlich schicke Lösung, und jetzt weiß ich, dass Hintergrundfarben nicht funktionieren, aber Rahmen schon :). Ich frage mich, ob es noch andere CSS-Eigenschaften gibt, die bei der Druckausgabe eines Dokuments nicht berücksichtigt werden...
Sehr guter Punkt, Luke.
Vielleicht bedeutet dies, dass Chris einen weiteren großartigen Artikel über print.css und welche Attribute druckersicher und unterstützt sind, schreiben sollte. *Hinweis, Hinweis, Anstupsen* Kluge Idee, sich von PDF zu lösen. Mein einziger Vorschlag wäre, einen dynamischen PDF-Generator auf Abruf zu erstellen, denn ansonsten wäre es zu viel Zeit und Aufwand.
Viele Grüße,
Dormgear.net
Haben Sie sich Lösungen angesehen, die PDFs auf Abruf erstellen? Wenn Sie PHP verwenden, können Sie FPDF (http://www.fpdf.org) verwenden. Es gibt zweifellos viele andere – und nicht nur PHP-basierte.
Ich genieße diese Beiträge vom Typ **Problem>Lösung** wirklich. Beispiele aus der Praxis sind definitiv der beste Weg, um Ratschläge zu geben.
Danke!
PS – Gefällt mir die Twitter-Blase im Footer!
Ich mag die Art und Weise, wie Sie Kalender auf der Titelseite mit diesen Grafiken umgesetzt haben. Ich wäre nicht darauf gekommen. Ich hätte einen Download-PDF-Button. Ich glaube, die meisten Leute, die vielleicht drucken möchten, würden annehmen, dass es eine Option dafür gibt. Aber gute technische Lösung.
Klar, Farbe ist schöner, aber auch ich denke, dass nicht jeder Farbdrucker hat. Zum Beispiel: Ich habe einen Farbdrucker, aber wo kann ich Abzüge in Schwarzweiß bestellen, um den Toner nicht zu verbrauchen.
Ein Zweifel, wäre es schlecht, wenn wir Schwarz in Graustufen anstelle der Kanten verwenden?
Ein kleiner Bug: Die druckbare Seite hat schlechte Links in jeder Kalenderzelle!
Danke, kleine Anpassung beim Umzug von Server zu Server =)
Hallo Chris, gute Arbeit! – aber wenn der Rahmen in Print-Stylesheets funktioniert, wie wäre es, ihn auch einzufärben, um ihn für Leute mit Farbdruckern auf einen Blick leichter erkennbar zu machen?
Offensichtlich würden Sie immer noch gepunktete / gestrichelte / durchgezogene Linien für diejenigen mit Schwarzweißdruckern benötigen, da die entstehenden Graustufen allein möglicherweise nicht klar genug sind...
Ich denke, wenn Sie mehr Variation als die Rahmenstiloptionen benötigen, können Sie auch unterschiedliche Stärken verwenden!
Mach weiter so!
Andy
Warum also nicht einfach die beiden Methoden kombinieren, so dass diejenigen mit Farbdruckern immer noch Farbe mit Rahmen drucken können und diejenigen ohne nur Schwarzweiß mit den Rahmen erhalten. So wird die druckbare Seite beim Anzeigen auf dem Monitor die Farben anzeigen, um sie hübsch aussehen zu lassen.
Wie sieht es mit Barrierefreiheit aus? Ich frage mich, ob die Bildschirmversion des Kalenders WCAG 2.0 erfüllt: 1.4.1 – Verwendung von Farbe?
„Die Absicht dieses Erfolgskriteriums ist es, sicherzustellen, dass alle Benutzer auf Informationen zugreifen können, die durch Farbunterschiede vermittelt werden, d. h. durch die Verwendung von Farben, wobei jeder Farbe eine Bedeutung zugewiesen ist. Wenn die Informationen durch Farbunterschiede in einem Bild (oder einem anderen nicht-textuellen Format) vermittelt werden, kann die Farbe von Benutzern mit Farbsehschwäche möglicherweise nicht gesehen werden. In diesem Fall stellt die Bereitstellung der durch Farbe vermittelten Informationen auf andere visuelle Weise sicher, dass Benutzer, die Farben nicht sehen können, die Informationen dennoch wahrnehmen können.“
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
Vielleicht ist die Druckversion auch für den Bildschirm der richtige Weg?
Sehr guter Punkt bezüglich der Farbe, die für Farbenblinde problematisch ist. Glücklicherweise haben wir JavaScript-Popups, wenn wir mit der Maus über jedes Datum fahren, die deutlich die Vorstellungsuhrzeit anzeigen. Obwohl... JavaScript-Popups sind auch nicht gerade für ihre Barrierefreiheit bekannt.
Sie könnten immer einen CSS-Hover-"Ballon"-Tooltip anstelle eines JavaScript-Popups verwenden, um die Informationen anzuzeigen.
Ich finde, dass JavaScript so aufdringlich oder unaufdringlich sein kann, wie der Programmierer es wünscht – es geht darum, es zugänglich zu machen, eine Ersatzmethode zu haben, um dieselbe Funktionalität bereitzustellen, wenn JS deaktiviert oder nicht unterstützt wird, und dann CSS zu verwenden, um es zu gestalten.
In diesem Fall ist CSS besser als JS!
Ich bin farbenblind und kann es lesen. Alles gut. So einfach.
Die Anordnung von Problem – Lösung habe ich sehr geschätzt. Ich hatte gestern tatsächlich dieses Problem. Ich habe mich entschieden, eine PDF-Version für diejenigen anzubieten, die das vollständige Dokument wünschen. Dies könnte jedoch funktionieren und es dem Benutzer erleichtern.
Gute Lösung, aber ich bin vielleicht besorgt, dass jemand gestrichelte und gepunktete Linien verwechselt. Vielleicht stattdessen eine doppelte Linie? Oder vielleicht Seitenrahmen für verschiedene Vorstellungszeiten verwenden; linke Seite ist 7:30, rechte Seite ist 7:00 usw.
Ich würde auch die Textfarbe grau schalten, wenn an diesem Tag keine Vorstellung ist, nur um die Sichtbarkeit der Vorstellungstermine zu erhöhen.
Sehr clevere Lösung.
Allerdings haben Sie (und glücklicherweise für Sie)
7:00 » Durchgezogen
7:30 » Gepunktet
2:30 » Gestrichelt
Sonderaufführungen » 2px breit
…
Aber was, wenn Sie weitere Vorstellungszeiten hinzufügen?... Mmm... Ich schätze, Sie würden sich auf % Schwarz verlassen, wie 20%, 50%, 100% (mit reserviertem Schriftzug [weiße Schrift]). Ich bin mir nicht sicher, ob die anderen Arten von Rahmen funktionieren würden... doppelte Rahmen dann?
Es wäre interessant zu testen, wie weit diese Lösung reicht.
Wie funktioniert das in IE6? Ich habe keinen Drucker.
Wieder eine clevere Lösung.
Eine PDF-Version würde das gleiche Farbproblem haben wie die Webversion. Nur weil ich es mit intakten Hintergrundfarben drucken kann, heißt das nicht, dass ich einen Farbdrucker habe.
Ich mag die Rahmenlösung, obwohl, wie rzea bemerkte, sie wirklich nicht skalierbar ist, wenn Sie zusätzliche Arten von Vorstellungen hinzufügen.
Mich interessiert mehr, wie Sie wissen, dass Ihre Benutzer die ursprüngliche Seite ausdrucken. Gehen Sie einfach davon aus, dass sie drucken, weil sie die PDF-Version heruntergeladen haben?
Ich bin sicher, diese Theorie könnte auf eine Reihe von Lösungen angewendet werden. Gut gemacht, dass Sie ein reales Problem und ein praktisches Konzept für eine Lösung aufgezeigt haben, die für verschiedene Szenarien angepasst werden kann!
Tolle Idee und gute Lösung.
Was ist mit IE6? Er unterstützt keine gepunkteten Linien (rendert sie als gestrichelt), oder? Werden dann die 14:00-Boxen genauso gedruckt wie die 19:00-Boxen? (Entschuldigung, ich habe gerade keinen Zugriff auf IE6.)
Abgesehen von diesem Problem, das zugegebenermaßen wahrscheinlich keine höchste Priorität hat, gute Arbeit, danke.
Ich stimme cancel bubble zu, Sie könnten versuchen, einen "Druck"-Button für den Kalender zu haben, der beim Auswählen die Seite in ein PDF umwandelt und dann anstatt sie anzuzeigen, einfach das druckt, was Ihre print.css zum Drucken vorgibt. (fpdf oder pdflib)
Ich fand es schon immer sinnlos, dass der Autor die Hintergrunddruckeinstellungen nicht überschreiben kann. Wenn eine Hintergrundfarbe als !important markiert ist oder etwas Ähnliches, sollte sie gedruckt werden.
Oder zumindest sollte der Browser dies erkennen und den Benutzer benachrichtigen, dass „Der Autor dieser Seite hat angegeben, dass Sie den Druck von Hintergrundfarben aktivieren sollten. Möchten Sie diese Funktion aktivieren, während Sie diese Seite drucken? [ja] [nein]“.
Auf jeden Fall... Probieren Sie das.
http://www.rickwilcox.com/shows/print.phpin der print.css-Datei
.calendar td a {
display:block;
padding:0;
}
.a6F009F {
border-bottom:21px solid orange;
height:0;
padding:0;
}
.abb7902 {
border-bottom:21px solid coral;
height:0;
}
.a11bc1b {
border-bottom:21px solid skyBlue;
height:0;
}
.aSPECIAL, .aE48E00 {
border-bottom:18px solid lightgreen;
height:0;
}
#show-key span {
bottom:16px;
margin:0 5px 0 0;
overflow:hidden;
padding:0 6px;
position:relative;
}
Scheitert wahrscheinlich in IE, aber mit Firefox druckt es gut.
Diese Lösung mit dicken Rahmen ist eine brillante Lösung, die perfekt für meine Bedürfnisse ist!! Vielen Dank. Ich habe sie in Firefox, Chrome und IE 8 getestet und sie funktioniert!!
Wer hatte jemals einen Kunden, der **darauf bestand**, dass Ausdrucke seiner Website genau so aussehen müssen wie auf dem Bildschirm, bis hin zu dem Punkt, dass Sie das gesamte Layout mit Tabellen und Bild-Tags neu erstellen mussten?
Fast, es hat mehrere Stunden gedauert, sie davon zu überzeugen!
Puh!
Viel Glück damit. Jeder Kunde, den ich je hatte, hätte sich darüber beschwert. Wenn es nicht den Richtlinien für Barrierefreiheit entspricht, wird es nicht in den Druckstapel aufgenommen.
Und für die Person, die nach PDF auf Abruf fragt: Nicht jeder hat oder möchte einen PDF-Reader. Ich habe einmal einen Flash-Drucker erstellt, da über 80 % der Computer damals Flash hatten (heute über 90 %). Er war leichtgewichtig und konnte von dort aus drucken. Er war etwas wie Flashpaper, nur ohne Branding und sah nicht wie ein Präsentator aus und fügte sich in das Dokument ein.
Das war zu Flash 8 Zeiten, aber ich habe jetzt einen starken Drang, wieder einen zu erstellen.
Ich bin kein Windows-Benutzer, daher bin ich mir nicht sicher, ob dies unter Windows der Fall ist, aber unter MacOS, wenn Sie keine PDF-Ansicht installiert haben, werden alle PDF-Dokumente im Bildbetrachter geöffnet.
Das ist, was ich für all meine PDFs benutze.
Ich bin mir ziemlich sicher, dass Windows meckern wird!
Ich mache immer einen Testdruck auf minderwertiges Papier, bevor ich mit der Arbeit drucke. Es ist wichtig, dass ich Konsistenz bei meinen Bildern erziele. Es dauert nur ein paar Minuten, um Probleme zu beheben (Reinigung und Ausrichtung der Druckköpfe), was sinnvoll ist, wenn Sie A3+ Papier verwenden.
Ich warte immer noch darauf, dass jemand uns einen ausreichend guten Grund gibt, warum das Hintergrunddrucken standardmäßig deaktiviert ist.
Einfach. Eine Reihe von Websites hat weiße Schrift auf dunklem Hintergrund. Diese auszudrucken würde eine ganze Druckerpatrone verbrauchen. Es ist besser, den Hintergrund nicht auszudrucken.
Es ist eher „besser als nichts“ als eine „Lösung“... Ich meine, sehen Sie sich die Originalseite und die gedruckte Version an. Wie erklären Sie das einem Kunden?
@muckluck
Sie wissen es gar nicht.... 98% der Kunden denken: „Lassen Sie mich das ausdrucken und meine Notizen dazu machen“.
Stattdessen rufen sie nun an und fragen, warum „die Website nicht richtig druckt“, anstatt sich auf die Korrektur von Inhalten zu konzentrieren.
Man, man, wie ich manchmal Tabellen vermisse.
Hallo Chris – Toller Beitrag. Ich hatte gehofft, Sie könnten eines Tages einen Beitrag darüber schreiben, wie Sie diesen Kalender implementiert haben und wie er funktioniert.
Es wäre großartig, etwas Kleines wie das auf einem Blog mit einem jQuery-Slider zum entsprechenden Beitrag/sogar Datum zu integrieren.
Toller Beitrag……..Ich möchte das ausprobieren…
Ich muss rzea zustimmen, dass Ihre Lösung nicht skalierbar ist und die Kommentare, dass die Referenz eher verwirrend sein kann.
Ich muss jedoch sagen, dass dies eine sehr gute Idee ist. Im Wesentlichen bitten Sie potenzielle Kunden, ihre eigenen Ressourcen (Papier und Tinte) zu verschwenden, um Ihnen beim Verkauf zu helfen, und je weniger Tinte (Schwarz ist auch billiger) und Papier sie benötigen, desto besser – gut gemacht für eine billigere Lösung, und wenn keine Farbe vorhanden ist, sollte sie auch schneller drucken, also keine Zeitverschwendung.
Alles in allem – eine großartige Lösung.
Ich wünschte, mehr Leute würden ein spezielles Print-CSS-Blatt verwenden. Ein großes Ärgernis, das ich habe, ist, dass Serifen auf Papier leichter zu lesen sind und Sans-Serif besser auf dem Bildschirm. Allein mit dieser Änderung könnten einige Blogs, denen ich folge, offline viel leichter zu lesen sein.
Chris, ausgezeichnet, und ich stehe gerade vor einer ähnlichen Weggabelung. Wie savagecorp sagte, würden Sie bitte mitteilen, wie Sie einen Kalender dynamisch erstellen? Genau so.
Ich hasse es, dieser Typ zu sein, aber das kann gemacht werden.
Es geht entweder darum, PHP-Code zu bekommen, der die Tabelle parst und GD die Zellinhalte als Bilder rendert (und vielleicht zwischenspeichert) und das Vorhandene ersetzt, oder Jquery zu bekommen, das die Tabelle parst und den Zellinhalt durch eine vorgerenderte JPEG- oder GIF-Datei ersetzt.
Jetzt habe ich gesagt, dass DAS gemacht werden kann, weil wir mit einer endlichen Anzahl von Alternativen zu tun haben (31 Zahlen mal 5 Farben = 155 Alternativen), und wir müssen uns immer noch mit den Monatsüberschriften befassen.
Wir könnten auch die fpdf-Bibliothek verwenden, um es serverseitig als PDF-Datei zu rendern...
Was wir jedoch tun sollten, ist, das Publikum anzuweisen, dass sie, wenn sie möchten, dass die Website wie gesehen gedruckt wird, Tools wie Cute PDF, Bullzip PDF und mehr (diese sind kostenlos) herunterladen und installieren können, um dann in eine PDF-Datei zu drucken und diese auf Papier zu drucken.
@chriscoyier
Die betreffende Website verwendet jetzt Ihre Methode für ihre Druckstile ;)
Fügen Sie dies in Ihre print.css ein, es funktioniert großartig!