Webseiten-Layouts durch Print-Layouts beeinflussen

Jen Simmons hat einen überzeugenden Vortrag (Video), in dem sie das Webdesign kritisiert, da es viel zu sehr vom HEADER CONTENT SIDEBAR FOOTER-Muster dominiert wird, das wir alle nur zu gut kennen. Printdesign, obwohl von uns Webdesignern oft als "tot" oder im massiven Niedergang bezeichnet, glänzt immer noch durch Layout-Qualität und -Vielfalt.

Sicherlich können wir vom Printdesign im Web lernen, oder?

Haben wir die Werkzeuge im Web, um das zu tun?

Ich würde sagen: Ja. In dem Sinne, dass wir keine unglaublich ausgefeilten CSS-Fähigkeiten brauchen, um interessantere Layouts zu erstellen, als wir es jetzt tun. Alte Werkzeuge wie Floats und absolute Positionierung sind in der Lage, ziemlich coole Dinge zu tun. Besonders in Kombination mit etwas moderneren Webtechnologien, auf die wir heute gerne zurückgreifen, wie Webfonts, Media Queries und Flexbox.

Was sind einige moderne Werkzeuge, die uns weiterbringen?

CSS-Shapes sind ziemlich cool! Razvan Caliman hat einen Artikel darüber. Man kann Text innerhalb eines Elements zwingen, einem bestimmten Pfad zu folgen. Diese Pfade können Dinge wie gekrümmte Ellipsen, Polygone oder sogar eine Bildmaske sein.

.element {
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
}

Sara Soueidan hat für A List Apart darüber geschrieben. Chen Hui Jing hat ebenfalls einen großartigen Artikel darüber. Schauen Sie sich die Demo direkt in diesem Blogbeitrag an.

Beachten Sie, wie gut der Fallback funktioniert?

Das Tolle an CSS Shapes ist, dass es einen natürlichen Fallback hat. Kein Problem. Man hat ein Quadrat. https://#/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP

— Jen Simmons (@jensimmons) 11. Februar 2015

Viewport-Einheiten sind auch für printähnliche Layouts ziemlich nützlich. Sie machen es trivial einfach, zum Beispiel einen Container in der exakten Größe des Bildschirms zu dimensionieren.

header.full-screen-hero {
  height: 100vh;
  background: url(/images/supergirl.jpg);
  background-size: cover;
}

Ganz zu schweigen von Layouts bestem Freund – Flexbox. Wenn Sie etwas Zeit investieren, um Flexbox zu lernen, gebe ich Ihnen meiner Meinung nach super Layout-Kräfte, da Ihr Gehirn sich instinktiv an sie wendet, um fast jedes Layoutproblem zu lösen.

Was ist schade, dass wir nicht haben?

Das Bedeutendste sind wahrscheinlich "CSS regions", die kurz davor standen, Realität zu werden. Adobe hat viel Arbeit hineingesteckt. Es gab Anwendungsfälle (Magazin-Layout war ein ziemlich solider). Es gab Polyfills. Sie erlaubten Ihnen, Inhalte von Element zu Element fließen zu lassen. Diese Elemente konnten beliebig positioniert und gestylt werden. Super cool.

Dann haben sie sozusagen den Arschtritt bekommen (meiner Meinung nach unfair) und Blink hat die Unterstützung eingestellt. Sara Soueidan hat in CSS Regions Matter hervorragend für ihre Bedeutung gekämpft, aber leider scheinen sie auf dem Sperrmüll der Geschichte zu landen.

Ich würde argumentieren, dass :nth-everything auch ziemlich nützlich wäre.

Gibt es Dinge, die in Zukunft helfen werden?

Vielleicht

@chriscoyier Ich denke, was uns Print am nächsten bringt, sind CSS Figures + Regions kombiniert mit dem Overflow-Modul https://#/UvcR97kiLi

— Sara Soueidan (@SaraSoueidan) 13. Januar 2016

Die Figures-Spezifikation Die CSS Page Floats scheint direkt auf Print-Layouts abzuzielen!

Diese Spezifikation beschreibt, wie in Print übliche Figuren – z. B. Tabellen, Fotos mit Bildunterschriften und Pullquotes – mit CSS formatiert werden können.

Die Overflow-Spezifikation scheint eine Möglichkeit zu entwickeln, das zu tun, was CSS Regions zu tun versuchten (Inhalte fließen lassen).

Die Continue-Eigenschaft gibt Autoren die Möglichkeit, zu verlangen, dass Inhalte, die nicht in ein Element passen, fragmentiert werden, und bietet Alternativen, wo der verbleibende Inhalt fortgesetzt werden soll.

... obwohl es nicht so klingt, als könnte man ein ganz anderes Element für den Inhalt angeben, zu dem er fließen soll.

Möchten Sie üben? Kaufen oder leihen Sie eine Zeitschrift und versuchen Sie es.

Das habe ich letztes Wochenende getan. Ich habe eine Gourmet Zeitschrift gekauft und eines der Layouts, das ich darin gefunden habe, nachgebildet.

Das bedeutet nicht, dass Sie aufhören müssen, das zu tun, was das Web zum Web macht.

Universeller Zugriff, Responsivität, all das gute Zeug. Meine Demo verwendete etwas Flexbox, um das Layout einfacher und letztendlich starrer zu machen. Ich habe ein wenig background-size: cover; verwendet, damit die Burger so gut wie möglich in den Raum passen. Ein paar Media Queries rundeten das Ganze ab und dieses Print-Layout ließ sich ziemlich gut auf das Web übertragen.

Weitere Beispiele

Hier ist eine weitere, die ich gemacht habe.

Siehe den Stift Zeitschriftenlayout-Versuch #2 von Chris Coyier (@chriscoyier) auf CodePen.

Diese hier war aus einem Scientific American.

Sie hatte sogar eine SVG-Type-Lockup darin.

---

Stuart Robson hat ein Layout erstellt, das auf einem Artikel basiert, den er in der Zeitschrift Lagom gesehen hat.

---

Helen V. Holmes ist von der Idee angetan.

@chriscoyier Ich bin von solchen Dingen angetan (https://#/oPPnKAvvXR). Plane, mehr zu tun. Wirklich inspiriert von https://#/l07e3NHX9R.

— Helen (@helenvholmes) 13. Januar 2016

Und sie hat Recht bezüglich The Great Discontent.

---

Hier ist ein weiteres von Bart Veneman.

Siehe den Stift Magazinlayout – Ein Stück von Pierce von Bart Veneman (@bartveneman) auf CodePen.

Das ist irgendwie wie "Art Directed Articles", richtig?

In gewissem Sinne. Ich betrachtete diese als Einzelstücke, die sich absichtlich voneinander unterschieden. Es scheint ein Trend zu sein, aber wenn man die letzten 5-6 Jahre betrachtet, ist es vielleicht nicht so sehr ein Trend, sondern eher, dass Webdesigner ihre Arme ab und zu ausstrecken.

Die Inspiration vom Print-Layout kann in Form von Einzelartikeln oder ganzen Websites erfolgen.

Eine weitere Sache, die früher versucht wurde: Treesaver. Es war der Versuch, diese Art von Layouts zu automatisieren, der wahrscheinlich etwas zu früh dran war.

Es gibt etwas Gegenwind gegen diese ganze Idee.

Manche Leute mögen es schlichtweg nicht.

@chriscoyier Es ist eine Übung in Eitelkeit, die zu unproduktiven, verbrannten Stunden und verschwendetem Geld führt.

— John V. Petersen (@johnvpetersen) 13. Januar 2016

Ach ja. Man kann sie nicht alle überzeugen.

Weitere Lektüre

• DESIGN MACHINES Wie man die digitale Apokalypse überlebt von Travis Gertz
• The Web’s Grain von Frank Chimero