Webdesign: Ist das Zentrieren eines Inhaltsbereichs eine gute Idee?

Ich habe ein Design, bei dem die Kopf- und Fußzeile 1170 Pixel breit sind. (Standardcontainergröße von Twitter Bootstrap mit 12 Spalten.)

Ich habe über die ideale Breite für eine gute Lesbarkeit gelesen und festgestellt, dass die Breite des Inhalts nicht mehr als 600-700 Pixel betragen sollte . Das Problem, mit dem ich konfrontiert bin, ist Folgendes:

Mit Ausnahme des Blogs, der eine Seitenleiste hat, haben alle anderen Seiten Inhaltsabschnitte, die 600 Pixel breit sind (versucht, der obigen Richtlinie zu folgen). Wenn ich es also links ausrichte, ist rechts ein leerer Platz, und wenn ich es in der Mitte ausrichte, passt es nicht zur Kopf- und Fußzeile und es fühlt sich an, als würde es schweben

So sehen diese Seiten aus . Schnell verspottet, da ich das tatsächliche Design nicht verwenden kann. Es ist für eine Online-Kurs-Website.

Wie geht man dieses Layoutproblem an? Sollte ich zwangsweise Seitenleisteninhalte erstellen, sodass Inhalt + Seitenleiste mit Kopf- und Fußzeile ausgerichtet werden können (wie die Blog-Seiten), oder ist es in Ordnung, die Inhaltsfelder auf diesen Seiten zentriert auszurichten (einschließlich Seiten wie „Über uns“, „Nutzungsbedingungen“, „Meine Dashboard, mein Profil, meine Zahlungen, die derzeit nur eine Inhaltsspalte haben)

Ich kann die Breite nicht reduzieren, da Homepage und Blogartikel durch das Design die gesamten 1170px nutzen können. Gibt es eine Richtlinie oder bewährte Verfahren für solche Situationen?

...hast du ein Bild? Ich bin Designer und aus irgendeinem Grund ziemlich visuell orientiert. Vielen Dank!
Sie können den Text um ein Bild mit 300 bis 400 Pixel schweben lassen. Zentrierter Text ist ein schwierig auszubalancierendes Element, und ich persönlich finde es viel weniger lesbar. Ich denke, ich hätte lieber den leeren Raum, als den Text zu zentrieren. Eine weitere Option besteht darin, dieselbe Seitenleiste wie anderswo zu verwenden und sie mit Kontaktdaten und Links oder etwas anderem zu füllen, auf das ein Benutzer einfachen Zugriff haben möchte.
Sie erhalten möglicherweise bessere Antworten, wenn Sie Beispiele posten.
Die beste Antwort ist, die Website auf die Breite umzugestalten, die Sie erreichen möchten, anstatt verschiedene Seitenbreiten zusammenzuschustern, nur weil eine Seite bereits etwas verwendet. Die ganze "XX-Breite kann nicht verwendet werden, weil Seite Y XX mit hat" ist albern. Ändern Sie die Seitenbreiten. Das machen Webdesigner.
Wir brauchen einige Bilder; Was Sie sagen, ist, dass "es aussieht, als würde es schweben" - und das könnte eher ein visuelles Problem als ein Problem mit Withs sein.
@Vincent Ich habe ein schnelles Modell als Referenz hinzugefügt. Benötigen Sie weitere Einzelheiten?
Grobes Mockup hier, Leute – i.imgur.com/K1bIx4v.png
@thedigitalmonk, um nicht unhöflich zu sein , aber es scheint nicht , dass Sie viel Zeit mit Ihrem Mock-up verbracht haben. Ich habe vor ein paar Tagen eine Blog-Seite entworfen und mehr als 4 Stunden damit verbracht, etwa 10 Mockups zu erstellen . Ich hätte länger gebraucht, wenn ich nicht schon so viele Designelemente vom Rest der Seite vorbereitet hätte. Mein Rat ist, viele Modelle für jede Seite zu erstellen und dann das Beste auszuwählen. Das mag sich nach einer beträchtlichen Menge an Arbeit anhören, aber Sie müssen bedenken, dass Sie herausbekommen, was Sie sagen.
@GiantCowFilms Ich gebe zu, dass ich nicht viel Zeit hatte, das Design zu überarbeiten, nachdem sie beschlossen hatten, einige Funktionen zu entfernen (die eigentlich in der Seitenleiste erscheinen sollten). Die Dinge wurden etwas überstürzt, weil sie das MVP für eine Überprüfung durch eine Regierungsbehörde fertig machen wollten, die 3 Monate dauern wird, um zu genehmigen. Im Moment habe ich also etwas Zeit, um einige alternative Layouts zu erkunden, weshalb ich mich entschieden habe, diese Frage zu stellen.
@thedigitalmonk, okay :).
Es sollte beachtet werden, dass der Vorschlag „600–700 Pixel“ rein willkürlich ist. Die ideale Leselänge hat nichts mit Pixeln zu tun. Es hat alles mit Schriftgröße, Zeilenabstand, Augenabstand, Kontext usw. zu tun.

Antworten (4)

Ich bin auf dem Zaun und trinke eine Limonade, weil ich dies als Antwort gepostet habe, aber die Antwort, die ich Ihnen geben werde, werde ich möglicherweise später als Referenz verwenden, wenn andere diese ähnliche Frage stellen.

Wie Sie sagten, befinden Sie sich bereits in der Designphase ... Wenn Sie einem ordnungsgemäßen Arbeitsablauf gefolgt sind (da Sie nicht erwähnt haben, ob Sie ein Mockup, eine Inhaltsbewertung oder ein Wireframe-Ereignis hatten), werde ich sagen, dass dies ein Paradebeispiel dafür ist warum PLANUNG der Schlüssel zu einer effektiven Website ist. Jetzt kämpfen sie, wie viele andere auch, damit, dass ihre Website funktioniert und für das Auge ansprechend aussieht, haben aber Probleme mit schlecht gestalteten Inhalten und unzufriedenen Kunden.

Das im obigen Absatz gesagte bezweifle ich, dass eine Antwort hilfreich wäre. Ich sage, dass ich nicht unhöflich sein will, aber Sie müssen ein paar Schritte zurücktreten und Ihren Inhalt, Ihre Struktur und DANN Ihr Design bewerten. Da wir Ihre Inhaltslast, den zukünftigen Plan der Website, ihre Funktionsweise und ihre Aufgaben nicht kennen, gehe ich basierend auf Ihrer Frage von Folgendem aus:

(einschließlich Seiten wie „Über uns“, „Nutzungsbedingungen“, „Mein Dashboard“, „Mein Profil“ und „Meine Zahlungen“, die derzeit nur eine Inhaltsspalte haben)

Normalerweise verwenden Benutzer Navigationselemente, aber Sie können auf Probleme im Tablet- und Telefonbereich stoßen. Basierend auf der oben zitierten Währung, die Sie erwähnen, würde ich vielleicht eine Seitenleiste mit einem Einkaufswagen bewerten. Auch hier weiß ich nicht, was der Inhalt ist, wie er gestaltet ist. Ich kann keinen effektiven Vorschlag machen, da Sie möglicherweise eine Inhaltsredundanz haben und wenn ich auf einer Website bin und dasselbe mehr als 4 Mal sehe, es sei denn, es ist für die Website von entscheidender Bedeutung. Ich gehe mal davon aus, dass es schlecht gemacht wurde.

Um den Titel Ihrer Frage zu beantworten: Ist das Zentrieren eines Inhaltsbereichs eine gute Idee? Hängt vom Design der Website und den Wünschen des Kunden ab. Das ist eine andere Sache, die nicht erwähnt wurde. Sie geben an, dass Sie sich mit diesem Problem in der Designphase befinden, aber anstatt über das Design zu entscheiden, treten Sie zurück und Drahtgitter. Spielen Sie mit dem Inhalt, wenn Sie ihn haben. Wenn Ihnen die Website gehört, treten Sie zurück und sehen Sie sich an, wie Sie die möchten Website zu funktionieren und zu fließen.

Danke für die Antwort Matthias. Es ist eigentlich ein Ort, an dem Sie einen Bootssicherheitskurs belegen können. Ähnlich wie boaterexam.com und boat-ed.com. In der Designphase hatte ich tatsächlich einige Funktionen vorgeschlagen, die in einem Seitenleistenformat erscheinen würden, aber diese wurden aufgrund von Budgetbeschränkungen nicht implementiert. Also im Grunde bin ich jetzt verwirrt, was ich mit dem leeren Raum machen soll. Soll ich einfach Links zu Seiten hinzufügen, die sowieso in der Benutzer-Dropdown-Liste erscheinen? Oder ist das überflüssig? Hier ist ein kurzes Modell des Layouts, da ich keine tatsächlichen Designs verwenden kann - i.imgur.com/K1bIx4v.png
Die Kapitelseiten haben eine Seitenleiste mit den anderen Kapiteln (wie ein Index). Und die Homepage hat ein Layout, das die Breite richtig nutzt, indem es Drittel-, Zwei-Drittel- + Drittel- und Vollbreite-Elemente enthält.

der digitale Mönch!

Ich bin Webdesigner und -entwickler und denke, dass dies etwas ist, auf das Einzelpersonen ziemlich oft stoßen. Es ist nicht immer die gleiche Antwort, daher denke ich, dass einige Screenshots hilfreich wären.

Ich neige jedoch dazu, eine Seitenleiste hinzuzufügen. Andernfalls sieht die Seite aus, unabhängig davon, ob der Inhalt zentriert ist oder nicht. Es sieht unausgeglichen aus, besonders wenn es andere Seiten gibt, die mit der Seitenleiste ein ausgewogeneres Aussehen haben.

Die "Seitenleiste" könnte bei Bedarf sogar eine Art Designaspekt sein (ein abstraktes Kunstwerk usw.). Aber auch nur das Hinzufügen einiger Social-Media-Links oder ähnliches würde helfen.

Hier ist ein einfaches Mockup der Situation – i.imgur.com/K1bIx4v.png Es ist eine Online-Website für Bootssicherheitskurse. Links zu sozialen Medien erscheinen in der Fußzeile und es gibt ein Benutzer-Dropdown-Menü mit Links zu allen eingeloggten Seiten wie Zahlungen, Profileinstellungen und Abmeldung. Soll ich das zur Seitenleiste hinzufügen? Wird es dadurch überflüssig?
Haben Sie versucht, die linke Seite des Inhalts an der rechten Seite des Logos auszurichten? Das könnte viel helfen und dann brauchen Sie sich keine Sorgen um eine Seitenleiste zu machen. Ich habe keinen Zugriff auf eine Software, um ein schnelles Mockup für Sie zu erstellen, aber ich hoffe, das macht Sinn. Ansonsten denken Sie an einen echten Live-Feed für Facebook/Twitter, anstatt nur Schaltflächen in einer Seitenleiste zu folgen.
Ja das habe ich probiert. Aber dann stimmt es nicht mit irgendetwas Besonderem auf der rechten Seite überein. Scheint, als wäre das der einzige Weg, der übrig bleibt. Der Kunde ist nicht sehr an der Präsenz in den sozialen Medien interessiert.
Kann ich Sie dazu bringen, einen Screenshot davon zu posten, wenn es mit der rechten Seite des Logos ausgerichtet ist? Ich bin nur neugierig, wie seltsam es aussieht, weil ich in meinem Kopf sehen konnte, dass es vollkommen in Ordnung aussieht.
**Nebenbemerkung: Wenn Ihr Kunde keine Lust auf Social-Media-Präsenz hat … nun, er muss mit der Zeit gehen.

die ideale breite für gute lesbarkeit ... sollte nicht mehr als 600-700px breit sein

Das trifft in etwa zu, aber nur für Inhaltsabschnitte , im Allgemeinen große Textblöcke. Einen lesbaren Typ haben, irgendwo zwischen 13px und 17px (im Allgemeinen 15-17px), abhängig von der Art der Website, wenn sehr wichtig, und die Breite des Abschnitts sollte mit der verwendeten Schriftgröße lesbar sein. Seitenleisten neben dem Haupttextabschnitt zu haben, ist für große Bildschirme vollkommen akzeptabel – manchmal sogar empfohlen.

Es ist wichtig, die zusätzliche Bildschirmgröße zu nutzen, die große Viewports bieten, sollte aber nur als progressive Verbesserung verwendet werden , was bedeutet, dass Sie (der Reihenfolge nach, nicht wichtig) zuerst für mobile, kleine Bildschirme entwerfen sollten.

Was die Verwendung von links oder rechts positionierten Inhalten betrifft, gibt es keinen wirklichen Nachteil bei der Verwendung, vorausgesetzt, Sie beschränken die Breite auf einigemax-width , damit der Text nicht über einen riesigen Bildschirm gezogen wird (wie Sie es bei einem Design mit zentrierter Position tun sollten). Die einzige Links- oder Rechtspositionierung des Inhalts könnte auf sehr großen Bildschirmen schlecht sein, wenn Sie einen Inhaltsbereich mit einer geringen Breite haben. In diesem Fall kann das Zentrieren dazu führen, dass es etwas mehr Platz auf der Seite einnimmt, da der zusätzliche weiße Raum auf beide Seiten verteilt ist und nicht nur auf eine.

Wenn Sie den Inhalt zentrieren, empfiehlt es sich, auch die Kopfzeile zu zentrieren. Dies bedeutet normalerweise, dass Sie auch max-widthden Hauptinhaltsbereich haben sollten, falls vorhanden. Das erste Beispiel, das mir in den Sinn kommt, ist das Desktop-Layout von FaceBook.

Wenn dies gesagt ist , nutzen Sie das, was gegeben ist . Das bedeutet, dass nach und nach weitere Funktionen für Bildschirme hinzugefügt werden, die mehr verarbeiten können, vorausgesetzt, es ist immer noch ein gutes Design. Auf Websites, die ich entwerfe, verstecke ich oft die Seitenleiste für Mobilgeräte oder lasse sie unter dem Hauptinhaltsbereich für Bildschirme fließen, auf die sie nicht passen kann (weitere Informationen dazu finden Sie in meiner anderen Antwort ).

Dies ist vielleicht eine Frage des Geschmacks, aber es gibt ein paar offensichtliche Probleme mit Ihrer Herangehensweise.

Ich habe über die ideale Breite für eine gute Lesbarkeit gelesen und festgestellt, dass die Breite des Inhalts nicht mehr als 600-700 Pixel betragen sollte.

Dies ist nicht wahr, es hängt davon ab, wie Sie Ihren Text dimensionieren und welche Schriftart Sie verwenden. Der eigentliche typografische Prozess ist die Taktwahl. Es gibt verschiedene Faustregeln für die Auswahl von Maßen, aber Sie müssen Ihre durchschnittliche Zeichenbreite für Ihre Schriftart berechnen und dann die Zeilenlänge daraus bestimmen (die je nach Größe des Textes in Ihrem CSS im Web variieren kann). Dazu gibt es einen Abschnitt in Robert Bringhursts The Elements of Typographic Style , der hier im Internet zu finden ist .

Das Dokument, mit dem Sie verlinkt haben, hat jedoch ein brauchbares Maß, sodass Sie mit diesem Layout zufrieden sein sollten.

Um das größere Layoutproblem anzugehen, würde ich sagen, dass es ein Prozess ist, das kleinere von zwei Übeln zu wählen. Sie können eine Seitenleiste hinzufügen, um ein besser ausgerichtetes Layout zu erstellen, aber aus gestalterischer Sicht fügen Sie nur überflüssige Inhalte hinzu, die Ihre Benutzer ablenken, indem sie mehr Text- und Layoutelemente in ihrem Sichtfeld haben. Lassen Sie also aus Sicht der Benutzerfreundlichkeit die Seitenleiste los und richten Sie Ihre Inhalte zentriert aus, denn Ihre Inhalte sind der Grund, warum Menschen auf Ihre Website gehen ( nicht Ihr Layout ).

Alternativ richte ich standardmäßig links aus, da negativer Raum im Web selten negativ ist und westliche Benutzer es nicht viel bemerken werden, da sie es gewohnt sind, von links nach rechts zu lesen.

Sie müssen sich auch darüber im Klaren sein, dass nicht jeder die gleiche Viewport-Größe hat wie Sie. Es kann eine große Anzahl von Benutzern geben, für die linksbündiger oder zentrierter Inhalt gut aussieht (wenn ihr Darstellungsbereich kleiner ist, haben sie weniger leeren Raum). Unabhängig von der Größe des Darstellungsbereichs ist ein überfüllter Bildschirm nie die bessere Option.

Möglicherweise möchten Sie sich die Analysen für die Website ansehen, um die Größe des Darstellungsbereichs zu bestimmen.