Machen Sie Ihre Website bedruckbar mit CSS, Kreative Bloq
Responsive Design ist nicht nur über Bildschirmgröße; es bedeutet auch, auf unterschiedliche Medien anzupassen - einschließlich Druck. Adrian Roselli teilt einige Techniken.
Viele Äonen vor, in der längst vergessenen Zeit von tabellenbasierten Web-Seitenlayouts, Web-Entwickler hatten Zugang zu einem Feature von Cascading Style Sheets (CSS), die Autoren aktivierten einen Medientyp angeben. Diese Art der Medien sagte der Browser, wenn Stile auf die Seite anzuwenden - ob für Bildschirm, Handheld oder sogar Druck.
Heute tabellenbasierten Layouts fast wurden mit div-basierten Konstrukten ersetzt und für diejenigen mit den HTML5-Spezifikationen, andere strukturelle und semantische Elemente. Einer der wichtigsten Vorteile dieses Ansatzes ist, dass CSS im Allgemeinen verwendet wird, um das Layout der Web-Seiten zu definieren, mehr Spielraum ermöglicht für Reflowing und Umformatierung bereits codierte Seiten mit nur CSS Änderungen.
Diese Flexibilität hat auch auf den Anstieg des Responsive Webdesign (RWD) geführt, die es einfacher für eine Web-Seite macht auf verschiedene Bildschirmgrößen auf CSS bedingte Logik anzupassen. In den letzten drei Jahren haben wir die Entwicklung von Frameworks gesehen, Vorlagen, Tutorials - und sogar Parodien - die Entwickler von fast jeder Fertigkeitsstufe bedeuten können Seiten erstellen, die sich anpassen können, um nahezu jede Bildschirmgröße ein Entwickler unterstützen möchte. Die Inhalte können Reflow; Navigation kann justieren; Elemente können in Größe und Position verschieben; Typografie zwickt selbst - und so weiter.
Diese Bauweise ist ideal für einen Entwickler ermöglicht die gedruckte Seite mit wenig zusätzlichen Aufwand zu unterstützen. Außer aus irgendeinem Grund sehen Sie nicht viele dieser Ressourcen einschließlich oder sogar die gedruckte Seite betrachten.
Hoffentlich wird dieses Tutorial wird Ihnen genügend Komfort geben mit der Herstellung von Druckstilen, die Sie in der Lage sein, sie ohne Sprengung Ihr Budget für jedes Projekt hinzuzufügen.
Schritt 01. Erste Schritte
Dagegen gibt es andere Elemente, die die meisten Druck Benutzer weder Notwendigkeit noch den Wunsch des Sehens haben:
Und schließlich gibt es einige Dinge, die, ob der Benutzer oder ich möchte, dass sie gedruckt werden, wird wahrscheinlich nicht sein:
Schritt 02. Machen Sie ein Haus für Druckformate
Das erste, was zu tun ist, Ihre CSS einrichten zu halten und die Druckstile zu nennen. Wenn Sie irgendeine RWD Codierung getan haben, sollten Sie dies bekannt vorkommen:
Sie sind nicht auf diesen Ansatz beschränkt. Sie können noch Ihr Druck-Stylesheet von einem Aufruf in dem Dokument
:Die gleiche Seite gedruckt von Firefox direkt in PDF. Sie können sehen, dass einige Aspekte sind weg und das Layout wurde vereinfacht
Schritt 03. Die Anwendung der Stile
Mein Logo ist ein Text, und während es nicht schwarz auf weiß ist werde ich es schwarzen Text zu ändern, damit ein Benutzer mit einem Farbdrucker nicht mit roter Farbe auf weißes Papier zu tun hat. Dies richtet sich mein Branding Ziel.
#footer font-size: 6pt; / * Den Text klein * machen /
color: # 000;
>
#SearchForm display: none;
>
#footer img float: right; / * An anderer Stelle definiert, der Vollständigkeit halber aufgeführt * /
>
Mein fünfte Ziel der vollständigen URL-Links anzuzeigen ist kontextabhängig. Ich benutzte die Adresse nach jeder Verbindung aufzunehmen; jedoch können Probleme auftauchen zu einigen Link-Adressen aufgrund unglaublich lang ist - viel zu lang für einen Benutzer leicht zu ihnen neu eingeben.
Die Druckvorschau Dialogfeld in Chrome. Wie bei allen Druckvorschau, es bietet Ihnen eine schnelle Vorstellung davon, was zu erwarten
Wenn ich wähle die Hyperlinks angezeigt wird, ist es wichtig, dass ich es auf den Inhalt zu begrenzen erinnern (so meine Brotkrumen-und Fußzeile nicht URLs nach jedem Elemente ziehen) und möglicherweise aus Bildern auszuschließen.
Jetzt kann ich Fuß durch und blenden Sie die Elemente, die ich will nicht zu drucken. Im Gegensatz zu Elementen aus kleinen Bildschirmen versteckt, die in RWD keine gute Idee ist, können wir Elemente in Druck verstecken, weil die Seite bereits vollständig heruntergeladen hat und die Elemente, die Sie verstecken sollen keinen Wert auf die gedruckten Seite hinzufügen.
In diesem Beispiel werde ich die Navigation, Suche, Social Media Icons und alles andere, das macht keinen Sinn, auf dem Papier entfernen machen.
#nav, #FlyOutNav, #SubNav. NoPrint, p.CodeAlert, #SMLinks, #SearchForm display: none;
>
Diese Stile erreichen eine Reihe von grundlegenden Dingen:
Achten Sie darauf, auf verschiedene Papiergrößen zu testen, obwohl Landschaft der am einfachsten zu sehen ist. Dies kann schnell alle Skalierungsprobleme hervorheben
Schritt 04. Weitere Verbesserungen
An dieser Stelle müssen Sie anfangen zu überlegen, was andere Stile, die Sie an der richtigen Stelle für Layouts mit unterschiedlichen Bildschirmgrößen zu berücksichtigen. Ein gutes Beispiel ist die Abhängigkeit von Skalierungsbildgrößen basierend auf der Anzeigengröße.
Denken Sie an die Elemente des Layouts, die nicht einmal auf dem Papier angehören. Zum Beispiel haben Sie Flash eingebettet YouTube oder interaktive Widgets im Spiel?
Schritt 05. Testing
Sobald Sie alle Ihre Stile an Ort und Stelle, Test. Es gibt zwei Techniken, die ich verwende, die mich nicht benötigen die Seite zu drucken. Erstens lehne ich mich auf die Druckvorschau Funktionen des Browsers - eine schnelle Art und Weise zu sehen, wie Ihre Stile interpretiert werden. Zweitens, wenn ich will, um zu sehen, wie eine Seite verarbeitet wird ich zu einem PDF ausdrucken und dann überprüfen.
Keines dieser repliziert die Erfahrung hält ein Stück Papier in der Hand (und realisieren Sie Ihren Text unterschiedlich skalieren müssen, oder Ihre Bilder sind zu groß), aber sie ermöglichen es Ihnen, den Großteil Ihrer Tests ohne Kosten für Sie zu tun oder die Bäume.
Dieser Artikel erschien zuerst in der Ausgabe 231 von .net Magazin - die meistverkaufte Zeitschrift der Welt für Web-Designer und Entwickler.