Webdesign für welche Website-Breite?

Hallo,
mein Theme bietet sehr gute Responsive-Unterstützung (über media queries, ich kann aber z.b. auch manuell festlegen, bei welcher Breite Elemente nach unten verschoben werden).

Ungeachtet dessen stellt sich die Frage, für welche Breite man eine Website entwirft bzw. optimiert, also für Desktop-Besitzer.
Meine Besucher sind v.a. Frauen zwischen 35 und 60, wenig technikaffin und ich vermute, dass sie tendentiell eher etwas kleinere Monitore haben als der statistische Durchschnitt.

ca. 960 Px (für 1024-Auflösung)? http://www.webmasterpro.de/portal/webanalyse-systeme.html

Die meisten Wordpress Seiten sind 960px, also fährst du nicht schlecht.
Die CB Seite ist auch so breit.

Die Frage stellt sich eigentlich gar nicht. Mach einen Mobile First - Ansatz und arbeite dich von der kleinsten (sinnvollen) Auflösung (~320px, drunter gibts quasi nix) nach oben, inkl. Open End. Jedes Mal, wenn die Seite anfängt irgendwie beschissen auszusehen, machst du einen Bruch und beginnst einen neuen min-width - Abschnitt, in dem du die neu entstandenen Fehler ausbügelst.

Am Ende hast du ein Layout, dass in JEDER Auflösung gut aussieht und immer gut bedienbar ist. Die ganze 960px-Geschichte ist natürlich gewachsen (eben durch alte 15"-Monitore mit 1024px) und wurde spätestens durch die verschiedenen 960-Grids und Frameworks dann unnötig zementiert. Ein Responsive Design, das seinen Namen verdient, optimiert für keine Auflösung. So würde das CB-Forum auf nem FullHD-Monitor bei 1160px Content-Breite trotzdem noch gut aussehen. Weit darüber leidet die Lesbarkeit (außer man setzt auf Multi-Column, was aber bei sehr langen Texten schief geht.).

Noch ein Tip auf den Weg: Weg mit px, her mit em und rem. Damit kannst du deutlich besser auf die Les- und Bedienbarkeit (um die gehts dir ja) reagieren.

Wegen em/rem muss ich mal schauen, was das Theme hergibt.

Von 320 Px ausgehend nach oben... interessanter, für mich neuer Ansatz. Da ich eine gut lesbare, mittige Textzeilenbreite als zentralen Ausgangspunkt betrachte, die eine gewisse Breite auch bei kleiner Schrift braucht, habe ich bislang immer nur von groß nach klein gedacht.

Mich hat bei der verlinkten Statistik überrascht, dass noch 12,6% mit 800x600 unterwegs sind. Desktop-Besucher, bei denen die media queries nichts erkennen, würden bei fixem 960 also seitlich scrollen müssen...

Das LG Optimus One ist sogar noch schmaler, das is (laut Chrome Entwicklertools) nur 213px breit *G*

Aber was kratzt dich eine Statistik mit ABSOLUTEN Auflösungen? Die bringt dir nichts, weil die nicht relevant ist. Relevant ist der tatsächliche Browser-Viewport.

In erster Linie sind es Textseiten, die in der Mitte Zeilen mit ca. 10 bis 14 Wörter und 85 bis 95 Zeichen (mit Leerzeichen) haben.
Links und rechts eine Sidebar, links mit 2. Navi. Rechts ein paar kleine Bilder und wenig Text.

213 Px werden schon alleine den Text nie vernünftig darstellen können, so klein kann die Schrift gar nicht werden. Darauf kann ich keine Rücksicht nehmen.
Den Textteil wollte ich fix machen.

Was denkst du, mit welcher Browser-Einstellung 800x 600 unterwegs ist?

Daaron schrieb:

Die Frage stellt sich eigentlich gar nicht. Mach einen Mobile First - Ansatz und arbeite dich von der kleinsten (sinnvollen) Auflösung (~320px, drunter gibts quasi nix) nach oben, inkl. Open End. Jedes Mal, wenn die Seite anfängt irgendwie beschissen auszusehen, machst du einen Bruch und beginnst einen neuen min-width - Abschnitt, in dem du die neu entstandenen Fehler ausbügelst.

Noch ein Tip auf den Weg: Weg mit px, her mit em und rem. Damit kannst du deutlich besser auf die Les- und Bedienbarkeit (um die gehts dir ja) reagieren.

Zum Vergrößern anklicken....

Wie immer (): Full Ack!

Martinus33 schrieb:

213 Px werden schon alleine den Text nie vernünftig darstellen können, so klein kann die Schrift gar nicht werden. Darauf kann ich keine Rücksicht nehmen.

Zum Vergrößern anklicken....

Was spricht denn dagegen? Geh mal in einen CB-Artikel und setz #main > article auf eine Breite von 210px und evtl. die Schriftgröße auf 0.9em. Du wirst überrascht sein, wie gut sich das lesen lässt.
Tatsächlich liest sich so eine Einstellung sogar besser als ein 6-700px breiter Text-Container. Genau das setzt ja z.B. auch column-count bzw. column-width an...

Den Textteil wollte ich fix machen.

Zum Vergrößern anklicken....

Feste Breiten sind ein No-Go. Wenn du irgend etwas fest machst, dann wars das mit Responsive. Dann kannst du auch gleich ne 90er-Jahre - Webseite schreiben.

Was denkst du, mit welcher Browser-Einstellung 800x 600 unterwegs ist?

Zum Vergrößern anklicken....

Es spielt keine Rolle. Zieh getrost 10-15px für den Scrollbar ab und, bei so manchem User, nochmal 200-250px für die Lesezeichenleiste. Bleibt nicht mehr viel, hm?

Schreib einen Mobile-First - Ansatz mit Bruchpunkten von unten nach oben. Das löst deine Probleme. Schmeiß alles weg, was du bisher an Größen hast.

Da ich gerne langfristig denke, sich ständig viel verändert und schon jetzt ein unüberschaubares Durcheinander an Monitorgrößen, Mobile-Geräten und verwendeten Browsergrößen besteht, habe ich grundsätzlich nichts gegen einen konsequenten Responsive-Ansatz.

Maßgeblich ist aber doch letztlich immer der Aufbau und Zweck der Site sowie der typische Besucher. Das beides gibt einen gewisen Rahmen vor. Der Rahmen heißt bei mir "gut lesbarer, längerer Text". Meist so um die 25 Absätze (und daran wird sich nichts ändern). Mein typischer Besucher ist kein 13-jähriger Gamer, sondern eine Frau zwischen 40 und 60, die froh ist, den Browser bedienen zu können und daher wenig flexibel, mit tendentiell eher kleinerem Monitor und vielleicht nicht mehr den allerbesten Augen. Das Verhältnis von mobile/Desktop zeigt wohl weniger mobile-Besucher als bei anderen Besuchergruppen, aber es sind nicht wenig und werden sicher mehr.

Angesichts all dessen geht es mir als einzige Vorgabe nur darum, dass der Text von allen gut gelesen werden kann. Ob ein Text gut lesbar ist, hängt (neben dem Inhalt) von Schriftart, Schriftgröße, Zeilenlänge (!) und Absatzgröße (als "Sinnabschnitt" stark vom Inhalt abhängig) ab.

Breakpoints sind toll, um auf möglichst viele User individuell eingehen zu können, aber bei den extrem kleinen Geräten/Browserfenstern bzw. großen wird bei responsive der Text m.E. in der Zeilenlänge zu kurz+klein oder zu lang. Absätze werden dann ggf. nur noch zwei Zeilen oder 20 Zeilen hoch. Bez. Optik und Scrollen ebenfalls suboptimal.

Ein CB-Artikel mit 210 Px lässt sich m.E. bestenfalls dann passabel lesen, wenn es nur ein einziger Absatz ist, aber längeren Text würde ICH so nicht lesen wollen.
Wie sehen andere das?

Ich lese selbst Romane auf meinem Smartphone, welche sicher noch komplexer und länger als die Inhalte der Webseite seien sollten.

Auch meine Mutter hat mittlerweile das 7" Tablet für sich entdeckt. Auch hier lassen sich Internetseiten mit einem festen 960px-Layout nicht (für sie) komfortable bedienen.

Fest steht: Mobilität und Responsive-Designs sind Trends die man nicht wegdiskutieren kann. Inwieweit deine Zielgruppe auf diese "Features" verzichten kann oder nicht solltest du anhand Webanalytics-Daten, etc. am besten einschätzen können. Hiermit kannst du auch die häufigste Bildschirmauflösung deiner Nutzer auslesen ...

Ich selber habe vor kurzen erst eine komplett responsive Webseite gestaltet wo das Textlayout immer gleichbleibt, sich die Schriftgröße/Zeilenabstände/Bildergröße etc. jedoch mit der Fensterbreite skaliert. Damit ist gewährleistet dass die Absätze immer die identischen Dimensionen haben. Nach unten hin muss man natürlich irgendwann davon abweichen, da das Absatz-Layout nur noch mit zu kleinen Schriftgrößen unverändert bestehen bleiben könnte ...

Bei umfangreichen Texten und dem Wunsch nach kompakten Zeilenlängen (analog zu Printmedien) hat man das Problem eh nicht bei den niedrigen Auflösungen, sondern bei den hohen....

x.treme schrieb:

Ich lese selbst Romane auf meinem Smartphone, welche sicher noch komplexer und länger als die Inhalte der Webseite seien sollten.

Auch meine Mutter hat mittlerweile das 7" Tablet für sich entdeckt. Auch hier lassen sich Internetseiten mit einem festen 960px-Layout nicht (für sie) komfortable bedienen.

Zum Vergrößern anklicken....

Eine Textzeile ist aber bei mir nicht die kompletten 960 Px breit. Solche Zeilen wären viel zu lang. Sie sind etwas kürzer als hier im Forum.

Mal ne ganz dumme Frage. Die Macher von CB sind ja wohl selbst Fachleute und haben hier jeden Tag tausende Besucher, die sicher alle Geräte- und Browser-Varianten abdecken. Warum wählen sie keinen konsequenten responsive-Ansatz?

Martinus33 schrieb:

Eine Textzeile ist aber bei mir nicht die kompletten 960 Px breit. Solche Zeilen wären viel zu lang. Sie sind etwas kürzer als hier im Forum.

Zum Vergrößern anklicken....

Na, ist sie doch auf Computerbase auch nicht. Auf der Homepage sind es 624px und im Forum 721px.
Die 960px beziehen sich auf Webseite + Seitenmenüs.

Computerbase ist eine funktionale Seite, die mit der Zeit gewachsen ist. Vom Layout und technischen Seite her ist sie aber nicht auf der Höhe der Zeit. Das sind aber die wenigsten Seiten. Meistens behilft man sich mit einem separaten Mobilen Layout, Apps oder Tapatalk, etc. um die Seite und Foren auch für Tablets und Smartphones zu "optimieren".

Martinus33 schrieb:

Mal ne ganz dumme Frage. Die Macher von CB sind ja wohl selbst Fachleute und haben hier jeden Tag tausende Besucher, die sicher alle Geräte- und Browser-Varianten abdecken. Warum wählen sie keinen konsequenten responsive-Ansatz?

Zum Vergrößern anklicken....

Uralte Seite, uralte Software und natürlich gewachsene Strukturen.

Es ist nicht so einfach, ein seit x-wieviel Jahren bestehendes Layout vollkommen zu modernisieren, noch dazu ohne dabei den Charakter der Seite zu verändern. Statt dessen werden einfach behutsam notwendige Upgrades (Backend, Kern-Funktionalität) eingefügt. Wir reden hier auch von ordentlich Geld, dass für ein komplettes Redesign notwendig ist.
Und dann ist da immer noch das Problem mit der Lesbarkeit. Für Foren sind die hier verwendeten 720px Textbreite, im Verhältnis zur 12px-Verdana, absolut in Ordnung. Nach OBEN muss man immer Vorsicht walten lassen, vor allem da CSS Multi Column nur begrenzt einsatzfähig ist. Nach UNTEN hingegen: Da kann man alles lesbar darstellen, wenn man nur will.