Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

Ein "Readability First" -Ansatz für Medienabfragen und Layout

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Es gibt ein paar unterschiedliche Ansätze für das Webdesign mit Mehrfachauflösung und die Anwendung von Medienabfragen, die in den letzten Jahren entstanden sind. Zu den Praktiken, von denen Sie wahrscheinlich schon gehört haben, gehören:

  • "Mobile First" - Beginnend bei einer schmalen telefonorientierten Breite von ca. 320px und dann von dort aus größer werdend.
  • "Desktop Down" - Beginnend mit einem Full-Size-Design und dann herunterskalieren wie erforderlich.
  • "Content First" - Testinhalt zu Beginn des Prozesses etablieren und dann progressiv gestalten.
  • "Gerätespezifisch" - Targeting einer Reihe von gerätespezifischen Auflösungen mit Haltepunkten bei entsprechenden px-Werten, z. Telefone mit 320px bis 480px, Tablets mit 768px bis 1024px, 1200px + für Desktop usw.
  • "Device Agnostic" - Erstellen eines "one design fits all" Systems, das flexibel zu jeder Auflösung passt.
  • "The Goldilocks Approach" - Lassen Sie die Basisschriftgröße vom Browser oder Benutzer als bevorzugt festlegen und erstellen Sie dann ein em-gesteuertes Layout mit drei Layouts: 'Too Big', 'Too Small', 'Just Right'.

In diesem Artikel werde ich über eine Methodik sprechen, die eine Mischung aus einigen der oben genannten ist, mit ein paar Extras angerührt. Es ist sowohl "Content First" als auch "Device Agnostic" und wurde ursprünglich von dem em typografieorientierten "Goldilocks Approach" inspiriert.

Ich sehe es gerne als "Readability First" -Ansatz. Die Designs, die sich aus diesem Ansatz ergeben:

  • sind auf das leichteste und bequemste Leseerlebnis optimiert, basierend auf Forschungsdaten zu Augenbewegungen bei durchschnittlichen Lesern.
  • fluidly justieren zu jeder Entschließung, sogar auf dem neuesten "8.3459 Zoll Minikühlschranktelefon".
  • proportional skalieren zusammen mit Browser oder Benutzer Schriftgröße Einstellungen.

Die Ideen, die diesen Ansatz umfassen, sind nicht neu, aber sie sind gemischt, um einen bestimmten Geschmack des responsiven Designs zu schaffen.

Um diesem Geschmack zu folgen, werde ich auch ein Skript namens "RDBL" mit Ihnen teilen, das ich erstellt habe, um Ihnen zu zeigen, wie lesbar Ihr Textinhalt an verschiedenen Stellen ist. Selbst wenn Sie die Methode "Lesbarkeit zuerst" nicht anwenden, können Sie dieses kleine Widget immer noch als hilfreich bei der von Ihnen verwendeten Responsive-Design-Methode verwenden.

"Readability First" -Prinzipien

Es gibt vier einfache Prinzipien, die die Grundlage für diesen "Readability First" -Ansatz bilden, doch wie Sie sie implementieren, wird von Entwurf zu Entwurf etwas variieren. Sie sind wie folgt:

1. Legen Sie keine explizite Basisschriftgröße fest. überlasse das dem Browser oder den Benutzereinstellungen

Die Idee, die Standardeinstellungen zu belassen und keine explizite Basisschriftgröße für Ihr Dokument festzulegen, ist ein Konzept, das mir von The Goldilocks Approach vorgestellt wurde.

Die allgemeine Idee dahinter basiert auf Folgendem:

  1. Browser haben standardmäßige Schriftgrößen, die je nach Auflösung und Pixeldichte für verschiedene Geräte am besten lesbar sind.
  2. Benutzer können auch ihre eigene Standardschriftgröße auf einer für sie komfortablen Ebene einstellen.

Indem Sie diese Standardeinstellungen nicht mit Ihrer eigenen Standardschriftgröße überschreiben, können Sie Ihrem Designtext erlauben, die Größe automatisch je nach Browser und Benutzereinstellung zu ändern. Dies gibt Ihnen einen Vorsprung mit Lesbarkeit auf verschiedenen Geräten und für Einzelpersonen von Anfang an.

In einigen Fällen müssen Sie möglicherweise Anpassungen vornehmen, wenn eine Schriftart im Vergleich zu den meisten anderen Schriftarten in der Standardgröße besonders klein oder groß ist. Die tatsächliche Größe von zwei Schriftarten kann sehr unterschiedlich sein, auch wenn sie im Code möglicherweise auf die gleiche Größe eingestellt ist.

Wenn Sie jedoch die Standardschriftgröße skalieren müssen, um sie zu normalisieren, tun Sie dies mit einem relativen Wert, d. H. Prozentsatz oder em, der auf das html-Element angewendet wird. Auf diese Weise wird Ihre Gesamttextgröße immer noch durch die Browser / Benutzereinstellungen bestimmt und die restlichen Prinzipien dieses Ansatzes können implementiert werden.

2. Geben Sie Dummy-Inhalt zu Beginn des Entwurfsprozesses und nicht das Ende ein

Wenn wir über "Design" im Web nachdenken, ist es leicht, sich in den "Design" -Teil des Prozesses zu verwickeln, manchmal fügen wir Inhalte nur als letzten Teil des Prozesses hinzu, nachdem alles andere vorhanden ist.

In unserem Ansatz wird jedoch zu Beginn des Prozesses Text hinzugefügt, bevor überhaupt ein visuelles Styling angewendet wird. Der grobe Gesamtprozess ist:

  1. Fügen Sie Dummy-Text in einem section oder article ein.
  2. Wählen Sie die Einstellungen für font-family und font-weight, die verwendet werden.
  3. Fügen Sie relatives, auf Einheiten basierendes CSS hinzu, um das Layout um diesen Text so zu steuern, dass die Lesbarkeit optimiert wird (mehr dazu in den nächsten Abschnitten).
  4. Fügen Sie visuelles Styling als eine Art "Farbauftrag" über dem oberen Rand dieses Layouts hinzu und passen Sie sie gegebenenfalls an.

Dies ist im Wesentlichen das Gegenteil des in der Vergangenheit beliebten Prozesses, bei dem Design mit visueller Gestaltung in einer PSD beginnt, dann wird CSS-Layoutcode passend zum Design erzeugt, CSS-Code für die Typografie wird hinzugefügt, um alles zu reproduzieren, was in der PSD vorhanden ist und schließlich wurde ein Dummy-Text eingefügt, um das fertige Produkt zu demonstrieren.

Der Grund, warum wir diesen Prozess umgedreht haben, ist:

  1. Für einen visuellen "Anstrich", der erfolgreich mit einem flexiblen Layout angepasst werden kann, müssen Sie wissen, wie das Layout aussehen wird.
  2. Um ein flexibles, lesbarkeitsoptimiertes Layout zu erstellen, müssen Sie sehen, wie der darin enthaltene Text im Browser angezeigt wird.
  3. Um zu sehen, wie der Text angezeigt wird, müssen Sie die font-family und das font-family kennen, da die Größe variieren kann.
  4. Zum Auswählen und Anwenden von font-family und font-weight benötigen Sie Dummy-Text.

Zwar können im Laufe des Polierens des Designs sicherlich später Anpassungen an den Typografieeinstellungen vorgenommen werden, doch sollten die wesentlichen Auswahlen der font-family und des font-weight auf Dummy-Text angewendet werden, bevor Layout und Styling festgelegt werden.

3. Erstellen Sie Ihr Design in relativen Werten% und em / rem, nicht px

In diesem Ansatz verwenden Sie als allgemeine Regel keine px-Einheiten. Stattdessen wird alles von Höhe und Breite über Ränder und Polsterung bis hin zu Randradius und Breite in relativen % - und em / rem Einheiten festgelegt.

Die Hauptgründe dafür sind:

  1. Wenn Sie %  Werte für Layout-Wrapper und -Spalten verwenden, können Sie ein Design erstellen, das in der Breite zwischen Ihren Haltepunkten fließt, anstatt von einer Breite zur nächsten zu springen.
  2. Wenn Sie em / rem-Werte für alles andere verwenden, wird Ihr gesamtes Design proportional zur Basisschriftgröße des Browsers / Benutzers skaliert.

Fluid% basierte Wrapper & Säulen

Verwenden Sie die folgende Technik, um einen Wrapper um Ihr Design zu erstellen, der eine flüssige Anpassung an das Ansichtsfenster zwischen Haltepunkten ermöglicht:


Erstens haben wir den Wrapper auf 100% der Breite des Darstellungsbereichs eingestellt. Dies bedeutet, dass ein Besucher, der Ihr Design irgendwo zwischen zwei Ihrer Haltepunkte betrachtet, keine leeren Bereiche um die Außenseite sehen wird, sondern stattdessen mit den Kanten bündig ist.

Text mit 100% Breite auf einem Breitbildmonitor wird jedoch nicht leicht zu lesen sein. Wir geben dann eine max-width Breite von 40 em ein, was bedeutet, dass der Wrapper der Site selbst auf einem großen Monitor niemals breiter als diese Menge ist. Dieser Wert kann zur besseren Lesbarkeit weiter angepasst werden, wie in den folgenden Abschnitten beschrieben wird.

Auf Spalten innerhalb dieses Wrappers können auch % -Werte und nicht auf px angewendet werden, sodass sie sich auch in den Ansichtsfenstern flüssig anpassen. Padding und Rahmen können auf prozentbasierte Spalten in em Werten angewendet werden, ohne das Layout zu verwerfen, indem sichergestellt wird, dass die box-sizing Eigenschaft Ihres Designs auf border-box eingestellt ist. Die Ränder der Spalten sollten in% -Werten angegeben werden.

Hinweis: Lesen Sie mehr über das Arbeiten mit dieser Art von Layoutsystem in meinem Artikel über Raster-Mixins.

Einheitlich skalierbares em / rem Layout-Design

Wenn Sie em / rem anstelle von px verwenden, haben die verschiedenen Layoutaspekte Ihres Designs immer die bestmögliche Beziehung zu Ihrem Textinhalt. Unabhängig davon, welche Einstellung der Browser oder Benutzer hat, skaliert die Basisschriftgröße Ihres gesamten Designs proportional, wobei der Text sonst nur innerhalb eines festen Containers seine Größe ändern würde:

Ihr Design wird nicht nur besser aussehen, wenn es proportional skaliert, sondern es wird auch einfacher zu lesen sein. Wir erstellen Abstände zwischen Textinhalten, um dem Besucher das Lesen dieses Inhalts so einfach wie möglich zu machen. Nur wenn der Abstand mit der Schriftgröße skaliert wird, können wir sicherstellen, dass diese sorgfältig gestalteten Layoutelemente erhalten bleiben.

4. Halten Sie Ihren primären Textinhalt in einem idealen Zeichenbereich pro Zeile

Bei der Methode "Readability First" liegt der Schwerpunkt natürlich auf dem Textinhalt und dessen Darstellung. Die meisten Websites haben einen Bereich, in dem ihr primärer Inhalt enthalten ist. Daher beginnen wir damit, diesen Bereich für die Lesbarkeit zu optimieren. Sobald der primäre Inhaltsbereich optimiert ist, kann der Rest des Layouts darauf aufgebaut werden.

Die Art und Weise, wie wir den primären Inhaltsbereich für die Lesbarkeit optimieren, besteht darin, einen idealen Zeichenbereich pro Zeile anzusteuern, der nach Forschungsergebnissen für einen durchschnittlichen Leser am bequemsten und natürlichsten ist.

Zeichen pro Sakkade, Sakkaden pro Zeile

Wenn wir Text lesen, schauen die meisten Leute nicht jeden einzelnen Buchstaben oder jedes einzelne Wort einzeln an. Stattdessen neigen wir dazu, unser Auge auf Gruppen von Charakteren zu richten, indem wir peripheres Sehen verwenden, um sie alle aufzunehmen. Jedes Mal, wenn sich das Auge von einer Gruppe von Figuren zur nächsten bewegt, wird dieser Sprung als "Sakkade" bezeichnet. Eine Sakkade kann zwischen 1 und 20 Zeichen umfassen, der Durchschnitt liegt jedoch zwischen 7 und 9.

Wenn es zu viele Zeichen / Sakkaden pro Zeile gibt, werden die Augen angespannt und müde, und wenn es zu wenige gibt, muss der Leser den Fokus unterbrechen, um zu oft zur nächsten Zeile zu gehen, um den Inhalt richtig zu absorbieren.

Es gibt eine Debatte über die genaue Anzahl von Sakkaden, die ein durchschnittlicher Leser pro Linie bequem machen kann, aber nach vielen Nachforschungen fand ich, dass etwa neun ein Wert ist, der dazu tendiert, allgemeine Übereinstimmung zu finden. Basierend auf diesen Zahlen sollte die Anzahl der Zeichen pro Zeile zwischen 63 (für sieben Sakkaden) und 81 (für neun Sakkaden) liegen, um die Lesbarkeit für den Durchschnittsleser zu optimieren.

Beachten Sie, dass diese Nummern als allgemeine Richtlinie verwendet werden sollten. Streng genommen könnte ein Leser, der sich sehr anstrengt, in neun Sakkaden nur neun Zeichen aufnehmen, während ein hochbegabter Leser einhundertachtzig aufnehmen könnte. Wenn Sie also diesen Bereich anvisieren sollten, ist Ihr Layout etwas höher oder niedriger als dieser Bereich.

So implementieren Sie "Lesbarkeit zuerst"

Jetzt, da Sie mit den Prinzipien von "Readability First" vertraut sind, werde ich Ihnen zeigen, wie Sie diese in einem Layout implementieren können. Ich zeige Ihnen, wie die Demo für das RDBL-Skript erstellt wurde, die ich bereits erwähnt habe.

Dies ist nur eine monochrome "Programmiererkunst", um sie zu demonstrieren, aber Sie können diese Prinzipien und Techniken auf praktisch jeden Design-Stil anwenden.

Beginnen Sie damit, die maximal lesbare em-basierte Breite zu finden

Um Ihren primären Inhaltsbereich auf maximal etwa 81 Zeichen pro Zeile zu beschränken, müssen Sie die Breite auch für Breitbild-Layouts entsprechend einschränken. Dies entspricht in der Regel einer maximalen Breite von etwa 35m - 40m geben oder nehmen ein paar ems.

Dies bezieht sich auf das, was wir oben in Bezug auf unsere flüssige Seitenumhüllung bei 100% Breite mit einem Maximum von ungefähr 40 em abgedeckt haben. Diese Einstellung der maximalen Breite ist einer der Werte, die Sie anpassen, um Ihre Zeichen pro Zeile unterhalb der oberen lesbaren Grenze zu halten. Wenn Sie also ein einzelnes Kolumnendesign erstellen, liegt der äußere Wrapper Ihrer Site irgendwo bei 35em - 40em plus der Füllmenge, die Sie um den Text herum platzieren.

Wenn Sie dagegen ein mehrspaltiges Design erstellen, werden die Spaltenbreiten auch zur Gesamtbreite Ihres Wrappers hinzugefügt. Wenn Ihr primärer Inhaltsbereich beispielsweise nicht breiter als 40 m sein sollte und innerhalb einer Spalte mit einer Breite von 66,66% und einer Seitenleiste daneben bei 33,33% liegt, benötigt Ihr äußeres Umhüllungselement eine max-width Breite von ungefähr 60em. Dies mag auf den ersten Blick kompliziert erscheinen, aber es ist tatsächlich etwas, das in der Praxis ziemlich einfach umzusetzen ist, wie Sie unten sehen werden.

Egal, was Sie mit Ihrem Design machen, Sie werden die maximale Breite Ihres primären Inhaltsbereichs herausfinden, um im Bereich der Lesbarkeit zu bleiben. Sobald Ihr oberes Limit festgelegt ist, können Sie mit dem Hinzufügen weiterer Layout-Elemente beginnen und anschließend so viel wie möglich für den gesamten Bereich zwischen dieser maximalen Breite und Null optimieren.

Wenn Sie die Lesbarkeit zuerst festlegen, wählen Sie nicht zuerst einen bestimmten Gerätetyp wie Desktop oder Handy aus. Stattdessen berücksichtigen Sie von Anfang an alle Geräte und Browser-Auflösungen und planen gleichzeitig.

Verwenden Sie RDBL, um Ihre maximal lesbare Breite zu finden

Anfangs verwendete ich eine Kombination aus Größenanpassung meines Browsers, einem Breitenauslese-Plugin, einem Zeichenzähler, Firebug und einem Taschenrechner, um meine maximale Breite herauszufinden. Aber bevor ich diesen Artikel begonnen habe, habe ich mich entschieden, mein Leben und dein Leben etwas einfacher zu machen, mit einem Skript, das den gesamten Prozess für dich übernimmt. Sie können eine Kopie des Skripts auf GitHub greifen.

RDBL gibt Ihnen einen kleinen Schieberegler über Ihrem Design und eine Anzeige von verschiedenen Informationen, die Sie als Teil dieses Prozesses hilfreich finden. Sie teilen ihm einfach mit, auf welchen Teil Ihrer Website Sie abzielen, um die Lesbarkeit zu überprüfen, d. H. Ihren primären Inhaltsbereich, und Sie erfahren, ob dieses Element "Zu weit", "Zu schmal" oder "In Reichweite" ist.

Hinweis: Das Skript sucht automatisch nach einem article, section oder main Tag (in dieser Reihenfolge), aber Sie können auch einen beliebigen Klassennamen oder eine ID im Feld "Ziel-Inhaltselement" eingeben.

Sie können den kleinen Schieberegler ziehen, um die Größe Ihrer Site zu ändern (dies emuliert die Größe des Browsers auf eine überschaubarere Weise), und es aktualisiert automatisch die Ausgabe, während Sie fortfahren. Wenn die kleine grüne "In Range" -Anzeige rot wird, können Sie sich die angezeigten Informationen ansehen, um festzustellen, an welchem Punkt dies geschah.

Sie können die angezeigten Informationen verwenden, um die maximal lesbare Breite Ihres primären Inhaltsbereichs zu bestimmen, und zu diesem Zweck wird auch eine grobe Schätzung angezeigt, was der lesbare Bereich sein wird.

In diesem Beispiel habe ich mit einem Dummy-Inhalt in einem sehr einfachen HTML-Layout begonnen und ein article in einen main -Wrapper eingefügt (Sie können die von Ihnen bevorzugten Tags verwenden):


Hinweis: Stellen Sie als Teil Ihres HTML-Dokuments sicher, dass Sie das Viewport-Meta-Tag einschließen, damit die Medienabfragen, die Sie später hinzufügen, an dem Punkt reagieren, den Sie auf Geräten mit unterschiedlicher Pixeldichte erwarten:


Ich wende dann auch ein sehr einfaches CSS an, das die Standardschriftgröße allein lässt, die box-sizing-Eigenschaft auf border-box setzt, einen flüssigen Wrapper um meinen Inhalt erstellt und meinen primären Textinhalt auf die font-family "Open Sans" setzt von Google Webfonts und der font-weight dieses Texts auf 400:


Das ist alles, was ich brauche, um die maximale lesbare Breite für Text zu ermitteln, der diese font-family und font-weight über RDBL verwendet, indem ich Folgendes tue.

Zuerst lege ich mein einfaches Layout in Firefox auf und sehe, ob das kleine Lesbarkeits-Flag rot oder grün auftaucht:

Bei 40 m Breite kommt dieser Text auf etwa 85 Zeichen pro Zeile, was etwas zu hoch ist. Dies ist ein Durchschnitt aus dem ersten Absatz des Textes im Zielelement.

Jetzt habe ich zwei Möglichkeiten. Die erste besteht darin, einfach die obere Zahl aus dem "Geschätzten lesbaren Em-Bereich" zu verwenden, die auf dem Auslesen als mein Maximum angezeigt wird, was in diesem Fall 38,117 em ist. Dies ist jedoch eine Schätzung, so dass ich den Slider auch verwenden kann, um den Standort schrittweise zu verkleinern, bis ich sehe, dass das Lesbarkeits-Flag grün wird und die an diesem Punkt angezeigte Em-Breite annimmt:

Dies entspricht 38,5 Millionen, ziemlich nah an der Schätzung. Also ändere ich die maximale Breite des Wrappers auf diesen Wert:


Und beim Aktualisieren zeigt RDBL jetzt an, dass der Text in der maximal möglichen Breite innerhalb des lesbaren Bereichs ist.

Padding hinzufügen

Jetzt, da ich weiß, dass meine maximale lesbare Breite 38.5 ist, möchte ich etwas Füllung um die Ränder dieses Inhalts hinzufügen. Ich ändere das CSS für mein Artikelelement wie folgt (mit einer Hintergrundfarbe, so dass Sie die Auffüllung sehen können):


Um die zusätzlichen 2,25em der Breite hinzuzufügen, die jeder Seite des Artikels hinzugefügt wird, füge ich 4.5em zur maximalen Breite des max-width hinzu. Sie können diesen Prozess sogar mithilfe von CSS-Präprozessorvariablen automatisieren.


Jetzt wird ein Refresh-Padding hinzugefügt, aber da die Innenbreite von 38,5 cm beibehalten wurde, ist das Lesbarkeits-Flag immer noch grün.


Mehrspaltige Layouts

Wenn ich nur ein einzelnes Spaltenlayout entwerfen würde, wäre ich in der Lage, mit der nächsten Stufe des Einrichtens von Haltepunkten fortzufahren, in dem Wissen, dass mein primärer Inhalt auf seine maximal lesbare Breite eingestellt ist. Aber was ist mit mehrspaltigen Layouts?

Der Prozess ist im Wesentlichen derselbe wie oben: Erstellen Sie einfach Ihr mehrspaltiges Layout mit flexiblen prozentualen Breiten und verkleinern Sie dann Ihre Website mit dem RDBL-Schieberegler, bis Sie die richtige max-width Breite für Ihren Wrapper gefunden haben, um Ihren Inhalt beizubehalten lesbare Reichweite.

Um dieses Layout von einem einzelnen Spaltenlayout in eine mehrspaltige umzuwandeln, indem ich eine Seitenleiste hinzufüge, fange ich damit an, nach dem Artikelelement ein side-Element in mein HTML einzufügen:


Ich füge dann etwas CSS hinzu, um den Artikel und die Seitenelemente in Spalten mit prozentualer Breite umzuwandeln. Da ich eine zusätzliche Spalte hinzufüge, muss die Hauptverpackung jetzt auch breiter sein, um sie aufzunehmen. Allerdings bin ich mir noch nicht sicher, welche Breite der Wrapper eigentlich sein sollte, um in die neue Sidebar zu passen und trotzdem den Inhalt lesbar zu halten.

Daher habe ich die max-width Breite des Haupt-Wrappers vorübergehend auskommentiert. Dadurch kann ich den RDBL-Schieberegler verwenden, um das Layout von 100% herunter zu skalieren, bis ich die neue Einstellung gefunden habe, die angewendet werden sollte.


Ich aktualisiere dann die Seite und verkleinere nach wie vor die Breite des Layouts, bis das Lesbarkeits-Flag grün wird.

Wenn das Flag grün wird, zeigt die Anzeige "Current Document Width" einen Wert von 66,25 em, daher entferne ich die maximale Breite des Haupt-Wrappers und ändere es auf 66,25em. Jetzt bei der Aktualisierung habe ich ein flüssiges zweispaltiges Layout, in dem der primäre Inhalt standardmäßig im lesbaren Bereich eingestellt ist.

Sie können denselben Ansatz verwenden, um so viele Spalten hinzuzufügen, wie Sie möchten, indem Sie die max-width Breite des Wrappers zurücksetzen und dann Ihr Layout mit RDBL verkleinern, bis Sie den neuen Wert finden, der angewendet werden sollte, um die Lesbarkeit des primären Inhalts zu erhalten.

Finden Sie Lesbarkeit 'Breakpoints' und optimieren Sie dann über Medienabfragen

Ursprünglich hatte der Begriff "Breakpoint" nichts damit zu tun, dass etwas kaputt ging. Für die Zwecke dieser Methode werden wir das Wort jedoch wörtlich nehmen. Mit unserer maximal lesbaren Breite in unserem Design können wir anfangen, nach unten zu skalieren, um die "Punkte" zu finden, bei denen unsere Lesbarkeit "bricht", d. H. Wenn RDBL erneut seine rote Flagge zeigt. Wir fügen dann Medienabfragen hinzu, um das Layout an jedem dieser Punkte anzupassen.

Unter Verwendung des RDBL-Schiebereglers, um die Breite des zweispaltigen Layouts zu reduzieren, ist der erste Punkt, an dem das rote Flag erneut angezeigt wird, 54,812 m, diesmal wegen zu geringer Zeichenanzahl pro Zeile unter 63.

Dies ist der erste Lesbarkeits- "Unterbrechungspunkt", und daher erstelle ich eine Medienabfrage, um zu verhindern, dass der primäre Inhaltsbereich diesen Punkt erreicht. Ich möchte die Anpassung vor dem Punkt vornehmen, an dem das Layout zu eng wird. Daher benutze ich den RDBL-Schieberegler, um die Breite wieder hoch zu blasen, um zur grünen Flagge zurückzukehren. An dieser Stelle sagt mir das Auslesen, dass ich 55 Meter breit bin. Ich kopiere den Inhalt des Feldes "Media query code" und füge es in mein CSS ein:


Ich muss jetzt entscheiden, wie das Layout an diesem Punkt am besten angepasst werden kann. Ich weiß von der früheren einspaltigen Phase des Designs, dass der primäre Inhalt eine maximale Breite von 43em benötigt. Dies bedeutet, dass 55em zu breit wäre, als dass der primäre Inhalt als einzelne Spalte gefüllt werden könnte, sodass ich die Seitenleiste nicht einfach vollständig aus dem Weg räumen kann. Stattdessen kann ich einfach seine Größe reduzieren, sodass der Inhalt mehr Speicherplatz benötigt.

Stattdessen kann ich einfach seine Größe reduzieren, sodass der Inhalt mehr Platz beansprucht. Dazu verkleinere ich die prozentuale Breite des side-Elements und erhöhe die prozentuale Breite des Artikelelements:


Ich aktualisiere nun die Seite und beginne wieder runter zu skalieren, und diesmal komme ich über den 55em-Punkt mit dem Hauptinhalt noch in lesbarem Bereich.

Der nächste Punkt, an dem die Lesbarkeit bricht, liegt bei 50,875 m, wenn der Text wieder zu schmal wird. Wieder stoße ich die Breite gerade hoch genug, um wieder ins Grün zu kommen, und kopiere die Medienabfrage aus dem RDBL-Widget, diesmal bei 51em. Dies ist immer noch zu groß, um das Layout in eine einzelne Spalte umzuwandeln, so dass ich die Artikelbreite noch einmal vergrößern und die Seitenleiste verkleinern kann:


Der nächste Lesbarkeitsunterbrechungspunkt erscheint bei 47,5 em und die Seitenleiste wird jetzt zu klein, um sie dünner zu machen. Allerdings bin ich immer noch etwas höher als die ursprünglich auf dem Hauptwrapper eingestellte 43em, damit der Inhalt in einer einzelnen Spalte lesbar bleibt. Also was mache ich?

Die Antwort besteht darin, das Layout an dieser Stelle trotzdem in eine einzelne Spalte zu konvertieren, aber dem Artikelelement genügend Auffüllung hinzuzufügen, damit der Inhalt innerhalb des lesbaren Bereichs bleibt. Also erstelle ich eine weitere Medienabfrage bei 47.75em, erhöhe den Artikelabstand auf 4em und konvertiere das Layout in eine einzelne Spalte:


Bei der Aktualisierung ist das Layout jetzt in einer einzelnen Spalte lesbar, sobald es schmaler als 47,75em wird.

Der nächste Punkt, bei dem die Lesbarkeit bricht, ist 40.187eme, wobei der Text zu schmal ist. Das Layout befindet sich bereits in einer einzelnen Spalte. Jetzt müssen Sie nur noch den Abstand verringern, um mehr Platz für den Inhalt zu schaffen. Um dies zu tun, erstelle ich eine Medienabfrage bei 40.5em und setze das Padding auf seine ursprüngliche Größe zurück.


Mit dieser abschließenden Medienabfrage kann das Layout nun sicher von der Standardmaximalbreite skaliert werden, wobei es innerhalb des lesbaren Bereichs bleibt und das Darstellungsfeld die ganze Zeit flüssig füllt.

Sollten Sie alle oben genannten Schritte für sich selbst wiederholen, werden Sie an dieser Stelle feststellen, dass Sie, wenn Sie weiter nach unten gehen, die rote Flagge "Zu schmal" sehen. Sie haben jedoch bereits so weit wie möglich auf Lesbarkeit optimiert. Sie können das Padding nicht weiter reduzieren, ohne die Lesbarkeit zu beeinträchtigen, indem Sie den Text zu nahe an den Kanten haben. Sie können auch raten, dass jemand, der sich in dieser Größe befindet, wahrscheinlich auf einem kleinen Gerät sitzt. Eine kleinere Schriftgröße würde also nur die Lesbarkeit beeinträchtigen.

Obwohl der Text unterhalb der Mindestanzahl von Zeichen pro Zeile von unten nach unten verschoben wird, werden Sie tatsächlich bereits für die Lesbarkeit bei all diesen kleinen Größen optimiert worden sein, was auch möglich ist.

Allerdings ist das Flag "Zu schmal" unter diesem Punkt nicht besonders wichtig, da Geräte, die nur eine geringere Größe anzeigen können, nur 2,9% des mobilen Speicherplatzes ausmachen und selbst dann nur etwa 5 bis 6 Zeichen enthalten Linie zu wenig, was noch akzeptabel ist.

Hinzufügen Ihrer visuellen Styling- "Lackierung"

Sobald Sie Ihr erstes flüssiges Layout vollständig gelesen haben, wissen Sie, mit was Sie arbeiten müssen, wenn es um das visuelle Styling geht. In der Tat werden Sie wahrscheinlich ein paar unausgerüstete Layouts wie diese erstellen und sie mehrfach mit unterschiedlichem Styling verwenden.

Wenn Sie Ihr visuelles Styling anwenden, stellen Sie möglicherweise fest, dass Sie das Layout bis zu einem gewissen Grad anpassen müssen. Wenn dies der Fall ist, verwenden Sie RDBL, um Ihre Einstellungen zu optimieren, um sicherzustellen, dass Sie im lesbaren Bereich bleiben.

Ich werde hier nicht auf Details eingehen, aber es gibt ein paar allgemeine Empfehlungen, die ich habe, um Ihre Website flüssig zu halten:

  • Verwenden Sie wo immer möglich CSS3 anstelle von Bildern (z. B. für Schatten, Verläufe, abgerundete Ecken, Rahmen, Leuchten), da auf diese Weise erstellte Stile vollständig skalierbar sind, solange em / rem-Werte verwendet werden.
  • Verwenden Sie Schriftart-Symbole (z. B. Fontello) anstelle von Bildsymbolen, da diese ebenfalls mit der Browser- / Benutzerschriftgröße skaliert werden.
  • Wenn Sie Bilder als Hintergrund verwenden, stellen Sie sicher, dass sie gekachelt werden können, um den Platz zu füllen, den Ihr Design skalieren muss.

Hinweis: Wenn Sie es gewohnt sind, mit Photoshop zu arbeiten, um stark bildgesteuerte Designelemente zu erstellen, möchten Sie vielleicht lieber Adobe Edge Reflow verwenden, um CSS3-Stile auf eine Ihnen vertraute Weise zu generieren. Weitere Informationen zu dieser Option finden Sie in meinem Artikel unter "5 nützliche Dinge, die Sie jetzt mit dem Reflow durchführen können".

Zusätzliche Notizen, Tipps und Verpackung

Die im Abschnitt Implementierung dieses Artikels gezeigten Techniken sind nur ein Beispiel dafür, wie Sie den Ansatz "Lesbarkeit zuerst" umsetzen können. Es gibt keine festen Regeln dafür, wie Sie sich mit Lesbarkeits- "Breakpoints" beschäftigen, und wenn Sie völlig andere Anpassungsoptionen treffen würden als ich es im selben Szenario getan habe, ist das völlig in Ordnung.

Jedes Design ist anders und Sie sollten erwarten, während der Anwendung dieses Ansatzes ein paar Urteile zu fällen. Wenn etwas nicht richtig für Sie aussieht, dann optimieren Sie die zulässigen Zeichen pro Zeile, die RDBL verwendet, denn bei allen Abweichungen von einer Schriftart zur anderen ist es unmöglich, dies zu einer exakten Wissenschaft zu machen.

Sie können die Zeichen pro Zeile jederzeit ändern, indem Sie die Werte direkt im Widget ändern, oder Sie geben Ihren bevorzugten Bereich ein, wenn Sie die Initialisierungsfunktion des Skripts ausführen, z. init_rdbl (63, 90);

Während Sie Ihr Layout nach oben oder unten skalieren, machen Sie sich keine Sorgen, wenn Sie die rote Markierung "Too Wide" oder "Too Narrow" kurz aufblitzen sehen. Wenn es zu wenige Zeichen gibt, die für 0,001 Ems Breite angezeigt werden, ist das kein großes Problem. Solange Sie nur diesen roten Blitz für einen Moment sehen, können Sie Ihr Layout als in lesbarem Bereich betrachten.

Ich hoffe, Ihnen einige neue Ideen für die Art und Weise, wie Sie Ihren Layout-Design-Prozess angehen, und zumindest ein nützliches Tool in Form des RDBL-Skripts zur Verfügung gestellt zu haben. Viel Spaß beim Erstellen Ihrer eigenen Inhalte zuerst, Geräte Agnostiker, "Lesbarkeit erste" Website-Designs!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.