Websitegröße

[M3-Power]

Hallo liebes Selfhtml-Team,

ich habe ein Problem zum Thema Websitegröße.
Ich habe schon einige Artikel hier darüber gelesen, habe aber nichts richtiges darüber gefunden was für mich zu tun ist.

Ich möchte eine Website mit zentralem Layout gestalten, sprich alle Inhalte sind in einem mittigen Kasten, welcher weiter nach unten verläuft.
Links und rechts davon soll einfach frei bleiben.

Mein Problem ist nun: Wie groß soll/darf/kann ich den mittleren Kasten, also den Main-Container maximal machen, damit er für alle bildschirmformate gut aussieht oder soll ich da gänzlich auf eine feste Pixelgröße verzichten.
Das ganze soll vom Layout ungefähr so aussehen: So soll das ganze aussehen

Über eine Antwort würde ich mich sehr freuen
mfG M3-Power

[dre]

Das ganze soll vom Layout ungefähr so aussehen:

Der Content ist meiner Meinung nach etwas zu breit. Regeln gibt es aber keine. Schaue dir doch einfach verschiedene Seiten an und welche Breite diese verwenden. Es sind schliesslich fast alle Webseiten in der Breite beschränkt (auch nicht zentrierte), du hast also jede Menge Anschauungsmaterial. Im Endeffekt musst du dich aber einfach für etwas entscheiden. Hängt dann auch vom gewünschten Design ab und wie dieses z.B. auf einem 800x600px-Bildschirm aussehen soll...

[dre]

Edit: Vielleicht noch eine Anmerkung: Ich persönlich würde niemals den Inhalt (also den Container mit dem Text) breiter als 800px machen. Tatsächlich wird dieser immer etwas weniger sein, weil kein Rand auch extrem unschön ist.

Ausnahmen sind allenfalls Seiten mit mehreren Containern, die sich über float der Browserfensterbreite anpassen.

[snorri]

800 Pixel wäre mir zu eng.

Standard ist heute eigentlich 960 Pixel; von diesem Wert geht z.B. auch der Browser im iPhone aus, sofern man ihm nicht etwas anderes vorgibt.

Warum 960?

1. Das passt auch bei einer horizontalen Auflösung von 1024 Pixeln gut rein (Platz für den Scrollbar!).

2. Die Zahl ist vielfältig teilbar, so dass man flexibel ist, wenn man mit gleichmäßigen Modulspalten arbeiten möchte.

Tipp: Mit CSS kann man mittlerweile (in halbwegs modernen Browsern) auch auf die Bildschirmbreite reagieren und das Layout an besonders enge oder besonders breite Verhältnisse individuell anpassen.

-- snorri

[Gunnar Bittersmann]

@@snorri:

nuqneH

Standard ist heute eigentlich 960 Pixel

Das war vielleicht von zwei, drei Jahren so. Für heute ist das Unsinn.

Standard heute sind Layouts, die auf verschiedenen Endgeräten darstellbar sind (responsive webdesign). Die Anzahl der Nutzer, deren Anzeigebereich deutlich schmaler ist als 960 Pixel, wird von Tag zu Tag größer.

Qapla'

[snorri]

Hallo Gunnar,

Standard heute sind Layouts, die auf verschiedenen Endgeräten darstellbar sind (responsive webdesign).

Das ist nach meiner Erfahrung alles andere als "Standard", sondern in der Praxis nur selten anzutreffen. Wahrscheinlich weils erheblich mehr Aufwand macht ... die meisten Seiten öffnen sich am iPhone jedenfalls im gleichen Layout wie am großen Monitor.

Aber keine Frage: Das ist die eleganteste Lösung.

Die Anzahl der Nutzer, deren Anzeigebereich deutlich schmaler ist als 960 Pixel, wird von Tag zu Tag größer.

... und diese Geräte können in der Regel gut damit umgehen, indem sie die Seiten verkleinert darstellen. Das iPhone hat ja auch nur 640 Pixel in der Breite.

-- snorri

[Gunnar Bittersmann]

@@snorri:

nuqneH

in der Praxis nur selten anzutreffen

Es wird immer mehr.

Wahrscheinlich weils erheblich mehr Aufwand macht

Erheblich? Weiß nicht.

Mehr, ja. Nicht einmal so viel mehr beim Umsetzen in CSS, sondern vorher: bei der Konzeption.

Aber Aufwand, der sich lohnt.

... und diese Geräte können in der Regel gut damit umgehen, indem sie die Seiten verkleinert darstellen.

Von einer solchen Übersicht hat der Nutzer aber auch nichts, wenn die Schrift nicht mehr lesbar ist.

Qapla'

[dre]

Aber Aufwand, der sich lohnt.

Das muss ich aber widersprechen (siehe auch meinen anderen Post). Das ist unnötig und bei den heutigen Geräten, die keine Probleme mehr haben die Web-üblichen Layouts darzustellen ausserdem auch nicht User-freundlich. Ich hasse nichts mehr, als extra-Layouts auf unterschiedlichen Plattformen. Lieber sich beim Standardlayout entsprechende Gedanken machen!

[Ole.]

extra-Layouts auf unterschiedlichen Plattformen.

Genau das ist responsive Design eben nicht; Da bedient ein Layout eben alle Ausgabemedien in optimaler Form.

Lieber sich beim Standardlayout entsprechende Gedanken machen!

s.o.

Gruß
Ole

[dre]

responsive Design

Wer prägt diese Begriffe für offensichtlichste Selbstverständlichkeiten eigentlich immer?

dre

[Ole.]

Wer prägt diese Begriffe für offensichtlichste Selbstverständlichkeiten eigentlich immer?

Wenn man der Wikipedia Glauben schenken darf, war es in diesem Fall Ethan Marcotte von A List Apart im Jahr 2010

Gruß
Ole

[Steel]

Hi!

Die Anzahl der Nutzer, deren Anzeigebereich deutlich schmaler ist als 960 Pixel, wird von Tag zu Tag größer.

Hier wage ich mal die Prognose dass das nicht mehr viel langer der Fall ist. Was an Smartphones so rauskommt schlaegt mit der Aufloesung mittlerweile bald mein Notebook.

Samsung Galaxy S III: 4,8"-Display mit full HD (1080p Auflösung in 16:9)
HTC ONE X: 4,7-Zoll-LCD mit 1280 × 720 Bildpunkten
...

Natuerlicih muss man damit rechnen, dass die Geraete mal 1280 und mal nur 720 Pixel Breite haben.

[Gunnar Bittersmann]

@@Steel:

nuqneH

Hier wage ich mal die Prognose dass das nicht mehr viel langer der Fall ist. Was an Smartphones so rauskommt schlaegt mit der Aufloesung mittlerweile bald mein Notebook.

Was ein neues Problem aufwirft: Die Desktop-Standardschriftgröße von 16px ist dann viel zu klein.

Qapla'

[Steel]

Korrekt!

Deshalb sollte man, meiner bescheidenen Meinung nach, generell nicht in Pixeln messen. Es passen zwar 1000 Pixel bald auf jedes (gekippte) Mobiltelefon, aber der Screen von sonem Ding is trotzdem nicht groesser.

[dre]

Deshalb sollte man, meiner bescheidenen Meinung nach, generell nicht in Pixeln messen. Es passen zwar 1000 Pixel bald auf jedes (gekippte) Mobiltelefon, aber der Screen von sonem Ding is trotzdem nicht groesser.

Meiner bescheidenen Meinung nach unterschätzt du damit die Zoom-Funktionalität obig genannter Geräte gewaltig. Dies ist ja wohl einer der Hauptunterschiede im Vergleich der Bedienung eines konventionellen Computers mit einem Smartphone: Der Smartphone-User ist sich gewohnt, sich nicht nur hoch und runter zu bewegen, sondern auch "rein und raus".

Ich würde im Gegenteil eher dazu tendieren, Inhalte möglichst nicht zu breit werden zu lassen, damit dann der User auf keinen Fall in mehrere Richtungen scrollen muss (also nur hoch/runter, nicht auch noch seitwärts). Und das ganze übrigens im Standarddesign.
Denn ich halte es für eine der grössten modernen Unarten, den mobile-Usern auf ihren angeblich eingeschränkten Plattformen eine verdünnisierte und abgeänderte Schmalspurvariante der Seiten zu liefern. Der User will die Seite sehen, die er kennt, mit allen Funktionalitäten.

Gruss

[Gunnar Bittersmann]

@@dre:

nuqneH

Der Smartphone-User ist sich gewohnt, sich nicht nur hoch und runter zu bewegen, sondern auch "rein und raus".

Der Nutzer hat sich dran gewöhnt (zwangsläufig, was blieb ihm anderes ürig?) != Es ist nutzerfreundlich.

Ich würde im Gegenteil eher dazu tendieren, Inhalte möglichst nicht zu breit werden zu lassen

Für Fließtext gilt das auf jeden Fall. Zu lange Zeilen sind schlecht lesbar.

Dennoch kann man die Breite des Viewports dazu nutzen, verschiedene Dinge nebeneinander zu plazieren. Aber aufgepasst: Nicht den Nutzer von seinem Anliegen (bspw. einen Artikel lesen) ablenken!

Denn ich halte es für eine der grössten modernen Unarten, den mobile-Usern auf ihren angeblich eingeschränkten Plattformen eine verdünnisierte und abgeänderte Schmalspurvariante der Seiten zu liefern. Der User will die Seite sehen, die er kennt, mit allen Funktionalitäten.

ACK. Auf einem mobilen Gerät mochte man von einer Website nicht weniger sehen, sondern mehr als am Desktop-PC, nämlich all die Dinge, die nur bei mobiler Nutzung sinnvoll sind.

Was aber nicht heißt, dass eine Webseite auf einem mobilen Gerät und auf einem Desktop-PC gleich aussehen muss. Und das bezieht sich nicht nur auf die Anordnung des Inhalts, sondern Dinge, die bei großen Viewports gleich mit auf der Seite sind, könnten bei kleinem Viewport verlinkt sein.

Qapla'

[dre]

Der Nutzer hat sich dran gewöhnt (zwangsläufig, was blieb ihm anderes ürig?) != Es ist nutzerfreundlich.

Gewohnheit und Nutzerfreundlichkeit sind zwei Begriffe, die sehr sehr viel miteinander zu tun haben.

Dennoch kann man die Breite des Viewports dazu nutzen, verschiedene Dinge nebeneinander zu plazieren.
Was aber nicht heißt, dass eine Webseite auf einem mobilen Gerät und auf einem Desktop-PC gleich aussehen muss. Und das bezieht sich nicht nur auf die Anordnung des Inhalts, sondern Dinge, die bei großen Viewports gleich mit auf der Seite sind, könnten bei kleinem Viewport verlinkt sein.

Dazu möchte ich zuerst dich selber zitieren:

Das Verstecken von Features und Einstellungsmöglichkeiten hilft diesbezüglich nicht weiter.

Ist die Darstellung anders, bedeutet dies für den User, dass er sogar auf bekannten Seiten nach den Features die er will suchen muss.
Auch ist der Zoomvorgang um einiges angenehmer, schneller und damit benutzerfreundlicher, als zuerst dreimal auf einen Link klicken und eine neue Seite laden zu müssen. Einen Link, den man, um es noch einmal zu betonen, notabene auch noch zuerst suchen muss.

Bei den ersten Mobiltelefonen, mit denen man surfen konnte, hatte man keine Wahl, da musste man das Design möglichst auf das Wesentliche reduzieren. Doch bei der heutigen Generation ist dies nicht nur nicht mehr nötig, sondern nur noch mühsam für den User.

Du willst das Dargestellte möglichst reduzieren? Dem halte ich entgegen, dass du damit - solange das Design nicht völlig chaotisch ist - das menschliche Sehvermögen um eine seiner grossen, über Jahrtausende antrainierten Stärken beraubst: Das schnelle Filtern der erhaltenen Information und des Herauspicken des Gesuchten.

Hier auch noch erwähnen möchte ich einen Punkt, der häufig vergessen geht wenn Leute davon schreiben, wie mickrig doch ein so und so viele Pixel grosser Text dann auf den kleinen Displays von mobilen Geräten absolut dargestellt wird: Der Absolutwert darf durchaus kleiner sein, denn die Lesedistanz des menschlichen Auges ist bei mobilen Geräten auch signifikant kleiner als bei Bildschirmen von Desktopcomputern.

dre

[Der Martin]

Hi,

Gewohnheit und Nutzerfreundlichkeit sind zwei Begriffe, die sehr sehr viel miteinander zu tun haben.
[...]
Ist die Darstellung anders, bedeutet dies für den User, dass er sogar auf bekannten Seiten nach den Features die er will suchen muss.

richtig, und aus diesem Grund möchte man als Autor auch nicht Funktionen nachbauen, die nahezu alle Browser von sich aus mitbringen (Zoom, Schriftgrößeneinstellung, Scrolling/Panning). Der Nutzer ist seinen Browser gewöhnt und kennt dessen Bedienelemente. Zumindest die wesentlichen.

Es spricht aber IMO nichts dagegen, Irrelevantes (also Ausschmückung) mehr und mehr wegzulassen, wenn es nicht mehr angemessen dargestellt werden kann.

Du willst das Dargestellte möglichst reduzieren?

Ja, das würde ich auf sehr vielen Webseiten gern.

Dem halte ich entgegen, dass du damit - solange das Design nicht völlig chaotisch ist - das menschliche Sehvermögen um eine seiner grossen, über Jahrtausende antrainierten Stärken beraubst: Das schnelle Filtern der erhaltenen Information und des Herauspicken des Gesuchten.

Wenn weniger Überflüssiges da ist, habe ich es also noch leichter, das Wesentliche zu erfassen.

Hier auch noch erwähnen möchte ich einen Punkt, der häufig vergessen geht wenn Leute davon schreiben, wie mickrig doch ein so und so viele Pixel grosser Text dann auf den kleinen Displays von mobilen Geräten absolut dargestellt wird: Der Absolutwert darf durchaus kleiner sein, denn die Lesedistanz des menschlichen Auges ist bei mobilen Geräten auch signifikant kleiner als bei Bildschirmen von Desktopcomputern.

Dafür sind aber die Bildschirme von Mobilgeräten viel, viel kleiner. Beim Monitor auf dem Schreibtisch haben wir, nur um ein Beispiel zu nennen, 20" Bildschirmdiagonale und 50cm Abstand. Beim Smartphone haben wir zum Beispiel 5" Diagonale, aber immer noch 30..40cm Abstand (knapp eine Armlänge bei leicht gebeugtem Ellbogen.

Ciao,
 Martin

[dre]

richtig, und aus diesem Grund möchte man als Autor auch nicht Funktionen nachbauen, die nahezu alle Browser von sich aus mitbringen

Absolut.

Es spricht aber IMO nichts dagegen, Irrelevantes (also Ausschmückung) mehr und mehr wegzulassen, wenn es nicht mehr angemessen dargestellt werden kann.

Ein Bild? Ok. Aber den Link, den ich mich gewohnt bin oben rechts zu finden ans Ende der Seite zu verschieben, das geht überhaupt nicht.

Ja, das würde ich auf sehr vielen Webseiten gern.

Ich habe so ein Gefühl, dass es hier noch um etwas anderes geht. :) Das ist dann Geschmacksache. Ich persönlich mag den schon länger um sich greifenden Hang zum Minimalismus verschiedenster Webdesigner überhaupt nicht. Ich weiss aber auch, dass sehr viele Leute diesen als positiv empfinden.

Wenn weniger Überflüssiges da ist, habe ich es also noch leichter, das Wesentliche zu erfassen.

Auf Kosten einer weniger dynamischen, langsameren Bedienung, ja.

Dafür sind aber die Bildschirme von Mobilgeräten viel, viel kleiner. Beim Monitor auf dem Schreibtisch haben wir, nur um ein Beispiel zu nennen, 20" Bildschirmdiagonale und 50cm Abstand. Beim Smartphone haben wir zum Beispiel 5" Diagonale, aber immer noch 30..40cm Abstand (knapp eine Armlänge bei leicht gebeugtem Ellbogen.

Mit den 50cm klebst du aber ziemlich an deinem Bildschirm ;) Ich bewege mich hier, je nach Sitzlage in einem Abstand von 80cm bis 1m. Das heisst, dass die absolute Grösse des Texts auf dem Smartphone schon die Hälfte und mehr kleiner sein darf, um genauso gut wie der Text auf dem grossen Screen lesbar zu sein (vorausgesetzt der kleine Screen kriegt die Darstellung sauber hin, hat eine genügend hohe Auflösung). Der Effekt ist signifikant und nicht zu unterschätzen, auch wenn er die Grössenverminderung nicht komplett aufhebt. Mit einem grossen Smartphone mit 5" Diagonale wirst du allerdings schon recht gut fahren. Meines hat gerade mal 3.5".

dre.

[Der Martin]

Hallo,

Es spricht aber IMO nichts dagegen, Irrelevantes (also Ausschmückung) mehr und mehr wegzulassen, wenn es nicht mehr angemessen dargestellt werden kann.
Ein Bild? Ok. Aber den Link, den ich mich gewohnt bin oben rechts zu finden ans Ende der Seite zu verschieben, das geht überhaupt nicht.

da sind wir uns einig. Aber was für einen Link findest du oben rechts, oder woraus entsteht diese Gewohnheit?

Ja, das würde ich auf sehr vielen Webseiten gern.
Ich habe so ein Gefühl, dass es hier noch um etwas anderes geht. :)

Ja, vielleicht. Das sind aber verschiedene Detailbereiche, die eng ineinandergreifen. Die Art, wie eine Information grundsätzlich präsentiert wird; die Art, wie die Präsentation auf schlechter werdende Anzeigebedingungen reagiert (degradation); die Flexibilität, die man dem Browser, aber auch dem Benutzer lässt (was nicht dasselbe sein muss).

Das ist dann Geschmacksache. Ich persönlich mag den schon länger um sich greifenden Hang zum Minimalismus verschiedenster Webdesigner überhaupt nicht. Ich weiss aber auch, dass sehr viele Leute diesen als positiv empfinden.

Ja, ich zum Beispiel. Wobei ich eher den gegenteiligen Eindruck habe, nämlich dass in letzter Zeit (sagen wir, in den letzten drei Jahren) die Webauftritte immer noch opulenter, verspielter und mit unnützem Krempel bestückt und dadurch oft unübersichtlicher und schlechter benutzbar werden.

Wenn weniger Überflüssiges da ist, habe ich es also noch leichter, das Wesentliche zu erfassen.
Auf Kosten einer weniger dynamischen, langsameren Bedienung, ja.

Weniger dynamisch? Nicht unbedingt. Und nicht langsamer, sondern schneller, weil ja auch der Browser weniger überflüssigen Ballast verarbeiten muss.

Dafür sind aber die Bildschirme von Mobilgeräten viel, viel kleiner. Beim Monitor auf dem Schreibtisch haben wir, nur um ein Beispiel zu nennen, 20" Bildschirmdiagonale und 50cm Abstand. Beim Smartphone haben wir zum Beispiel 5" Diagonale, aber immer noch 30..40cm Abstand (knapp eine Armlänge bei leicht gebeugtem Ellbogen.
Mit den 50cm klebst du aber ziemlich an deinem Bildschirm ;)

Naja, mein Schreibtisch hat eine Tiefe von 60cm, der Fuß des Monitors muss noch auf der Tischplatte stehen, die Bildebene ist also etwa 45..50cm von der Vorderkante des Tisches entfernt. Und ich sitze mit rund 10cm zwischen Bauch und Tischkante, leicht nach vorn gebeugt - kommt also schon hin.

Mit einem grossen Smartphone mit 5" Diagonale wirst du allerdings schon recht gut fahren.

Ich weiß, ich habe bewusst zugunsten des Smartphones "aufgerundet". Ich finde, das Verhältnis ist immer noch ausgesprochen schlecht.

Ciao,
 Martin

[dre]

da sind wir uns einig. Aber was für einen Link findest du oben rechts, oder woraus entsteht diese Gewohnheit?

Das typische Beispiel wäre wohl der Logout-Link.

Ja, vielleicht. Das sind aber verschiedene Detailbereiche, die eng ineinandergreifen. Die Art, wie eine Information grundsätzlich präsentiert wird; die Art, wie die Präsentation auf schlechter werdende Anzeigebedingungen reagiert (degradation); die Flexibilität, die man dem Browser, aber auch dem Benutzer lässt (was nicht dasselbe sein muss).

Ja das stehe ich dir zu.

Ja, ich zum Beispiel.

Das war mir klar :)

Wobei ich eher den gegenteiligen Eindruck habe

Dies wiederum ist interessant. Mein Eindruck ist, dass beispielsweise weiss immer dominanter wird, Farben immer mehr zurückgefahren werden, Bilder nicht mehr als Designelemente benutzt werden und allgemein die Darstellung immer einheitlicher wird (Was allerdings auch an den CMS liegt).

Und nicht langsamer, sondern schneller, weil ja auch der Browser weniger überflüssigen Ballast verarbeiten muss.

Langsamer wenn ich anstatt kurz zu zoomen und den Link anklicken, zweimal klicken und einmal mehr eine neue Seite laden muss. Ich beziehe mich hier immer noch auf die Thematik der Webseitendarstellung auf mobilen Geräten.

Naja, mein Schreibtisch hat eine Tiefe von 60cm, der Fuß des Monitors muss noch auf der Tischplatte stehen, die Bildebene ist also etwa 45..50cm von der Vorderkante des Tisches entfernt. Und ich sitze mit rund 10cm zwischen Bauch und Tischkante, leicht nach vorn gebeugt - kommt also schon hin.

Ich hätte Mühe, derart nahe am Bildschirm zu sitzen.

Ich finde, das Verhältnis ist immer noch ausgesprochen schlecht.

Wie gesagt, der Effekt räumt das Problem keinesfalls aus dem Weg, aber er schafft dennoch schon einen nicht zu missachtenden Ausgleich.

dre

[Ole.]

allgemein die Darstellung immer einheitlicher wird (Was allerdings auch an den CMS liegt).

Das halte ich, um es mal diplomatisch auszudrücken, für eine gewagte These.

Langsamer wenn ich anstatt kurz zu zoomen und den Link anklicken, zweimal klicken und einmal mehr eine neue Seite laden muss. Ich beziehe mich hier immer noch auf die Thematik der Webseitendarstellung auf mobilen Geräten.

Warum sollte a) überflüssiger Ballast für Mobile Devices auf eine extra Seite verfrachtet werden, wenn er doch überflüssig ist und
b) du dir diesen auch noch anschauen wollen?

Gruß
Ole

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Es spricht aber IMO nichts dagegen, Irrelevantes (also Ausschmückung) mehr und mehr wegzulassen, wenn es nicht mehr angemessen dargestellt werden kann.

Was die Frage aufwirft, ob Irrelevantes nicht auch dann wegzulassen wäre, wenn es Platz hätte.

Das ist der Vorzug des Mobile-first-Ansatzes: Man konzentriert sich als Entwickler aufs Wesentliche. Primär ist auf einer Webseite nur das, was auf einem mobilen Gerät (Smartphone, evtl. sogar Featurephone) dargestellt werden sollte (d.h. muss und kann). Für größere Viewports kann man weitere Inhalte dazutun (progressive enhancement) und steht dabei vor der Frage: Warum sollten die Inhalte mit auf die Seite? Auf die Weise werden auch Webseiten für PCs nicht mit überflüssigen Dingen zugeballert.

Andersrum wird’s problematischer: Eine überfrachtete (Desktop-)Webseite von Inhalten zu befreien, um sie sinnvoll auf mobilen Geräten darstellen zu können. Dabei läuft man Gefahr, relevante Inhalte wegzuschmeißen. Und auf dem Desktop-PC bleibt die Seite immer noch überfrachtet.

Du willst das Dargestellte möglichst reduzieren?
Ja, das würde ich auf sehr vielen Webseiten gern.

„Mobile first.“

Wenn weniger Überflüssiges da ist, habe ich es also noch leichter, das Wesentliche zu erfassen.

„Mobile first.“

Qapla'

[Gunnar Bittersmann]

@@dre:

nuqneH

Gewohnheit und Nutzerfreundlichkeit sind zwei Begriffe, die sehr sehr viel miteinander zu tun haben.

Wenn du mit Gewohnheit Erwartungskonformität (ISO 9241-110) meinst, ja.

Wenn du mit Gewohnheit das notwendige Übel des Verwendens eines schlechten UIs mangels Alternative meinst, nein.

[…] Dinge, die bei großen Viewports gleich mit auf der Seite sind, könnten bei kleinem Viewport verlinkt sein.

Dazu möchte ich zuerst dich selber zitieren:

Das Verstecken von Features und Einstellungsmöglichkeiten hilft diesbezüglich nicht weiter.

Es ist ein gewaltiger Unterschied, ob etwas in einem Drop-down-Menü (das selbst nur durch ein Icon dargestellt wird) versteckt ist oder ob ein ohne Nutzeraktion sichtbarer Text präsentiert wird.

Ist die Darstellung anders, bedeutet dies für den User, dass er sogar auf bekannten Seiten nach den Features die er will suchen muss.

Die Kunst liegt darin, die Seite so zu gestalten, dass sie fürs jeweilige Gerät optimal präsentiert wird. Das heißt für verschiedene Geräte verschiedene Darstellung, ja. Das heißt nicht gänzlich verschieden.

Auch ist der Zoomvorgang um einiges angenehmer, schneller und damit benutzerfreundlicher, als zuerst dreimal auf einen Link klicken und eine neue Seite laden zu müssen.

Es muss nicht zwangsläufig eine neue Seite geladen werden. Der Inhalt kann schon da sein und wird per JavaScript eingeblendet. (Und ein Fallback für Nutzer ohne JavaScript.)

Qapla'

[molily]

960 Pixel; von diesem Wert geht z.B. auch der Browser im iPhone aus, sofern man ihm nicht etwas anderes vorgibt.

Die physikalische Auflösung des iPhone 4 ist in der Höhe 960 Pixel.
Die Breite des virtuellen Viewports ist standardmäßig 980 Pixel (Quelle).

Mathias

[snorri]

Hallo Mathias,

stimmt, das waren 980. Ich habs mir wohl falsch gemerkt, weil ich die 960 lieber mag, aufgrund der m.E. sinnvolleren Teilbarkeit.

Danke für die Korrektur!

-- snorri

[Steel]

Hi!
Deine Beispielseite passt z.B. grad noch so in mein Browserfenster hier. Finde ich definitv ne Nummer zu gross. Zuhause auf meinem 24" Monitor mit entsprechender Aufloesung sollte das etwas besser sein. Nein. Ich habe selten ein Browserfenster gemaxt.

Du solltest mal % oder em Angaben versuchen. Ich bevorzuge em, denn damit richtet sich die Darstellung nach der vom User eingestellten Schriftgroesse. Skaliert also schoen mit. Wer also bevorzugt mini Browserfenster nutzt, wird wahrscheinlich auch eine entsprechende Schriftgroesse eingestellt haben um seinem Minimalismus Tribut zu zollen.

[dre]

wird wahrscheinlich auch eine entsprechende Schriftgroesse eingestellt haben um seinem Minimalismus Tribut zu zollen.

Gibts eigentlich Statistiken, wieviele User entsprechende Anpassungmöglichkeiten des Browsers tatsächlich nutzen? Rein intuitiv würde ich jetzt davon ausgehen, dass das gerade mal ein Bruchteil ist.

[Steel]

wird wahrscheinlich auch eine entsprechende Schriftgroesse eingestellt haben um seinem Minimalismus Tribut zu zollen.
Gibts eigentlich Statistiken, wieviele User entsprechende Anpassungmöglichkeiten des Browsers tatsächlich nutzen? Rein intuitiv würde ich jetzt davon ausgehen, dass das gerade mal ein Bruchteil ist.

Keine Ahnung. Ihren Autositz und Rueckspiegel stellen sie ja wohl auch ein. Da kann man doch erwarten, dass sie ihren Browser genauso an ihre persoenlichen Beduerfnisse anpassen. Und das hoffentlich nicht nur dadurch, dass sie nen huebsches Hintergrundbild installieren.

[Gunnar Bittersmann]

@@Steel:

nuqneH

Ihren Autositz und Rueckspiegel stellen sie ja wohl auch ein. Da kann man doch erwarten, dass sie ihren Browser genauso an ihre persoenlichen Beduerfnisse anpassen.

Das würde ich nicht unbedingt erwarten. Beim Autositz und beim Rückspiegel ist den Nutzern bekannt, dass sie eingestellt werden können und warum sie es sollten.

Bei Browsern ist das nicht der Fall; und das immer schlanker werdende Browser-Chrome trägt seins dazu bei und vesteckt die Einstellmöglichkeiten. Und die meisten Nutzer wollen sicherlich einfach nur surfen, nicht ihren Browser einstellen, weil ihnen nicht bewusst ist, warum sie das tun sollten.

Qapla'

[Der Martin]

Hallo,

Beim Autositz und beim Rückspiegel ist den Nutzern bekannt, dass sie eingestellt werden können und warum sie es sollten.

ja, zumal man schon in der Fahrschule darauf gedrillt wird.

Bei Browsern ist das nicht der Fall; und das immer schlanker werdende Browser-Chrome trägt seins dazu bei und vesteckt die Einstellmöglichkeiten.

Leider. Dass vielen Nutzern die Einstellmöglichkeiten nicht oder nur oberflächlich bekannt sind, kann ich aus meiner Erfahrung bestätigen. Dass viele Nutzer sich auch nicht dafür interessieren, jedoch nicht. Dafür werde ich zu oft gefragt: "Sag mal, ich finde ... unpraktisch, kann man das nicht ...?" Und das beschränkt sich natürlich nicht auf den Browser.
Und wenn ich dann sage, "Klar kann man", und den Jungs oder Mädels zeige wie's geht, sind sie oft erstaunt und begeistert, wie einfach das war, und nicht selten habe ich damit das Interesse an weiteren Einstellmöglichkeiten geweckt.

Und die meisten Nutzer wollen sicherlich einfach nur surfen, nicht ihren Browser einstellen, weil ihnen nicht bewusst ist, warum sie das tun sollten.

Ich würde es anders formulieren: Den meisten ist nicht bewusst, dass ihnen irgendwas missfällt, was man eigentlich leicht ändern könnte. Entweder man lässt sie also in ihrem Unwissen, oder man zeigt ihnen gelegentlich mal die eine oder andere Kleinigkeit.

Ich praktiziere letzteres.

Ciao,
 Martin

[Steel]

Moin!

Sehe ich aehnlich. Fast alle Kollegen hier handeln so: "Was? Son Quatsch. Bei deinem Auto MUSS man doch das und das einstellen koennen." (Ich weiss es besser, schliesslich hab ich die Bedienungsanleitung) Da wird dann im Zweifel auch rumprobiert bis man es einsieht, das das Lenkrad nicht verstellbar ist, das die Fahrertuer von aussen nur mit Schluessel zu verriegeln ist (beim verriegeln der offenen Tuer springt  beim schliessen der Riegel raus)...

Beim Browser dagegen wird geflucht: "Die Schrift ist zu gros zu klein. Bei jeder Webseite anders. Warum kann man das nicht einstellen?" Dann komme ich "Drueck doch mal Control und scrolle das Mausrad... *seuftz*"

Daher auch mein Kommentar. Mir ist bewusst, dass die Leute das nicht wissen. Nur hab ich persoenlich keinen Bock mehr drauf. Die Leute informieren sich ueber alles, probieren ueberall rum, nur wenns um ihren Computer geht... Deshalb mein leicht zynisch zu verstehender Kommentar. Was man regelmaessig benutzt, muss man auch einstellen koennen. Wenigstens oberflaechlich. Is ja nicht so, dass man z.B. den Zoom gross suchen muss. Jedenfalls nicht bei FF und IE.

[Der Martin]

Hallo,

Sehe ich aehnlich. Fast alle Kollegen hier handeln so: "Was? Son Quatsch. Bei deinem Auto MUSS man doch das und das einstellen koennen."

immer wieder gern genommen: Vergleiche mit Autos. :-)

(Ich weiss es besser, schliesslich hab ich die Bedienungsanleitung) Da wird dann im Zweifel auch rumprobiert bis man es einsieht, das das Lenkrad nicht verstellbar ist, ...

Aber beim Auto erlebe ich ebenfalls oft, dass die Besitzer von bestimmten "Features" gar nichts wissen. Da grummeln sie tagtäglich über die beim Anfahren automatisch verriegelnden Türen, oder darüber, dass die Anzeige im Kombiinstrument immer die Kilometer seit Beginn der Fahrt anzeigt, anstatt seit dem letzten Tanken und Nullstellen. Aber das nehmen sie auch einfach so hin, denn "das ist halt so". Ein Blick in die Betriebsanleitung, zwei, drei Handgriffe, und schon ist der Anlass des Ärgers weg.

das die Fahrertuer von aussen nur mit Schluessel zu verriegeln ist (beim verriegeln der offenen Tuer springt  beim schliessen der Riegel raus)...

Das hat ja auch durchaus seinen Sinn.
Ich habe bei meinem Auto anfangs auch gerade über manche Merkwürdigkeiten der Zentralverriegelung gestaunt (und weiß nach dem Lesen der Betriebsanleitung, dass man sie nicht umstellen kann). Zum Beispiel entriegle ich die Türen mit der Schlüssel-Fernbedienung, öffne aber nicht sofort die Tür, sondern bleibe noch einen Moment neben dem Auto stehen (um etwas zu beobachten oder noch mit jemand zu plaudern). Und nach etwa 30..40s verriegelt das Auto die Türen von allein wieder.

Beim Browser dagegen wird geflucht: "Die Schrift ist zu gros zu klein. Bei jeder Webseite anders. Warum kann man das nicht einstellen?" Dann komme ich "Drueck doch mal Control und scrolle das Mausrad... *seuftz*"

Okay, das ist noch die einfache Methode, aber da muss man natürlich auch jedesmal wieder aufs Neue eingreifen. Schöner ist es, wenn man sich die Standard-Schriftgröße einmal so einstellt, wie man's gern hätte, dann passt es wenigstens bei vielen Webseiten (nicht bei allen). Aber diese Einstellung ist wieder wesentlich aufwendiger.

Oder in Word: Da meckert man immer wieder und wieder, dass bei einem neuen Dokument die Schrift erstmal zu klein ist, die Schriftart nicht gefällt und überhaupt die ganze Formatierung nicht so ist, wie man sie möchte. Anstatt das also bei jedem neuen Dokument wieder und wieder zu ändern, stellt man sich halt *einmal* die Standard-Formatvorlage passend ein.

Daher auch mein Kommentar. Mir ist bewusst, dass die Leute das nicht wissen. Nur hab ich persoenlich keinen Bock mehr drauf. Die Leute informieren sich ueber alles, probieren ueberall rum, nur wenns um ihren Computer geht...

Das ist aber oft nicht aus Gleichgültigkeit, sondern aus der Angst heraus, das sei bestimmt so kompliziert, dass man es sowieso nicht verstehen würde.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Ein Blick in die Betriebsanleitung, zwei, drei Handgriffe, und schon ist der Anlass des Ärgers weg.

Nutzer lesen keine Betriebsanleitungen. Punkt.

Das mag man schlechtfinden, wie man will, man kann sich den Fakt aber nicht schönreden.

Die Kunst ist, ein Produkt so zu designen, dass es intuitiv benutzbar ist. Grundsätze Selbstbeschreibungsfähigkeit und Lernförderlichkeit der ISO 9241-110.

Das Verstecken von Features und Einstellungsmöglichkeiten hilft diesbezüglich nicht weiter.

Qapla'

[Der Martin]

Hallo,

Ein Blick in die Betriebsanleitung, zwei, drei Handgriffe, und schon ist der Anlass des Ärgers weg.
Nutzer lesen keine Betriebsanleitungen. Punkt.

das kann man so pauschal nicht sagen. Sicher ist der Prozentsatz gering, aber nicht Null.

Die Kunst ist, ein Produkt so zu designen, dass es intuitiv benutzbar ist. Grundsätze Selbstbeschreibungsfähigkeit und Lernförderlichkeit der ISO 9241-110.

Ja. Der Anteil der Hersteller, die diese Kunst beherrschen, dürfte aber ähnlich hoch sein wie der Anteil der Nutzer, die Bedienungsanleitungen aufmerksam lesen ...

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Nutzer lesen keine Betriebsanleitungen. Punkt.
das kann man so pauschal nicht sagen. Sicher ist der Prozentsatz gering, aber nicht Null.

So wollte ich verstanden werden.

Die Kunst ist, ein Produkt so zu designen, dass es intuitiv benutzbar ist.
Ja. Der Anteil der Hersteller, die diese Kunst beherrschen, dürfte aber ähnlich hoch sein wie der Anteil der Nutzer, die Bedienungsanleitungen aufmerksam lesen ...

Der Anteil der Hersteller, die diese Kunst beherrschen, lässt sich erhöhen. Der Anteil der Nutzer, die Bedienungsanleitungen aufmerksam lesen, nicht.

Qapla'

[dre]

Beim Browser dagegen wird geflucht: "Die Schrift ist zu gros zu klein. Bei jeder Webseite anders. Warum kann man das nicht einstellen?"

In was für einem Umfeld lebt ihr? Alter? Sowas höre ich so gut wie nie.

Zu den schon aufgeführten Punkten ist vielleicht noch die Art des Produkts anzufügen, bzw. wie ein Produkt aufgefasst wird: Das Auto ist ein Gebrauchsgegenstand. Ich kauf mir eines das mir passt, wenn mir etwas nicht passt geh ich zum Mechaniker oder hab einen Kollegen der es anpassen kann. (Oder zumindest häufig konnte, mit all den eingebetteten Systemen wird das ja auch immer schwieriger.)
Der Arbeitstisch ist ein Gebrauchsgegenstand. Er gehört mir. Ist er zu tief, mach ich ihn höher.
Der Computer ist ein Gebrauchsgegenstand. Ich statte ihn mit den Programmen aus, die ich benötige um gewollte Aufgaben ausführen zu können.
Die Webseite aber wird mehr als eine Art Kombination zwischen Broschüre/Zeitschrift und Fernsehen wahrgenommen. Da hat jemand etwas entworfen, das ich mir anschauen kann. Wenn ich Mühe mit der Darstellung eines Inhalts habe, dann ist das halt so, ich kann mich höchstens beschweren. Der Browser geht doch für die meisten User bei diesem Prozess völlig unter, seine einzige Aufgabe ist es, einem Zugang zu den Inhalten zu verschaffen. Die User kommen nicht auf die Idee, dass er diese auch in der Darstellung verändern kann. Denn gerade Schrift bekommt man eigentlich überall nur vorgesetzt. Man kann sich höchstens eine Brille oder Lupe kaufen wenn man Probleme hat, etwas zu lesen. In dem Sinne ist die Zoom-Funktion wohl auch jene, die der User intuitiv am ehesten erwartet. Dies wird ja gerade auch durch die Smartphones gefördert.

[Der Martin]

Hallo,

Das Auto ist ein Gebrauchsgegenstand. [...]
Der Arbeitstisch ist ein Gebrauchsgegenstand. [...]
Der Computer ist ein Gebrauchsgegenstand. [...]

und diese Gebrauchsgegenstände "biege" ich mir so zurecht, wie ich am besten damit klarkomme.
Warum sollte das also bei der Software anders sein?

Die Webseite aber wird mehr als eine Art Kombination zwischen Broschüre/Zeitschrift und Fernsehen wahrgenommen. Da hat jemand etwas entworfen, das ich mir anschauen kann. Wenn ich Mühe mit der Darstellung eines Inhalts habe, dann ist das halt so, ich kann mich höchstens beschweren.

Ja. Ich kann die Website aber auch mit dem Radio- oder Fernsehprogramm gleichstellen: Das wird mir auch so angeboten wie es ist, ich kann es inhaltlich nicht beeinflussen. Das ist eben so. Ich kann es annehmen oder auch nicht, oder ich kann einen anderen Sender wählen.
Aber ich kann Klang und Lautstärke, beim Fernsehen auch noch Bildhelligkeit, Kontrast, vielleicht sogar Farbtemperatur und andere Parameter so einstellen, dass sie zu meinem Sehvermögen und zur Umgebung (Lichtverhältnisse) pasen.

Der Browser geht doch für die meisten User bei diesem Prozess völlig unter

Aber wieso? Der Browser spielt hier die Rolle des Fernsehers. Er verschafft mir den Zugang zu den Informationen, die anderswo aufbereitet werden. Das Umschalten auf einen anderen Sender entspricht hier dem Wechseln zu einem anderen Webangebot. Und ebenso wie beim Fernseher ist es doch irgendwie naheliegend, dass man auch den Browser auf seine eigenen Bedürfnisse einstellen kann.

Denn gerade Schrift bekommt man eigentlich überall nur vorgesetzt.

Bei Printmedien ist das so, ja. Aber die betrachten wir ja im Moment nicht.

Ciao,
 Martin

[dre]

Warum sollte das also bei der Software anders sein?

Ist es nicht. Bzw. nicht mehr. Es wird nur anders wahrgenommen.

Ja. Ich kann die Website aber auch mit dem Radio- oder Fernsehprogramm gleichstellen:

Eben, wie ich geschrieben habe.

Aber ich kann Klang und Lautstärke, beim Fernsehen auch noch Bildhelligkeit, Kontrast, vielleicht sogar Farbtemperatur und andere Parameter so einstellen, dass sie zu meinem Sehvermögen und zur Umgebung (Lichtverhältnisse) pasen. [...] Und ebenso wie beim Fernseher ist es doch irgendwie naheliegend, dass man auch den Browser auf seine eigenen Bedürfnisse einstellen kann.

Und genau da wird der durchschnittliche User genau wie du beschrieben hast den BILDSCHIRM einstellen wollen, und nicht den Browser.

Aber wieso? Der Browser spielt hier die Rolle des Fernsehers.

Der Bildschirm spielt die Rolle des Fernsehers. Der Browser ist mehr wie, vielleicht die Entschlüsselungsbox die man zum Empfang kostenpflichtiger Programme benötigt. Eine zwischengeschaltete Komponente.

Bei Printmedien ist das so, ja. Aber die betrachten wir ja im Moment nicht.

Ich spreche von meinem Verständnis der intuitiven Wahrnehmung des durchschnittlichen Users. Wir sind uns gewohnt, dass wir Text nur dann anpassen können, wenn wir ihn selbst verfassen. Also wenn wir einen Brief schreiben, in Word einen Text schreiben oder vielleicht auch in Photoshop einen Flyer entwerfen. Es ist gedanklich ein eher weiter Weg, auf die Idee zu kommen, dass man den Text einer Webseite unabhängig von den Bildern und weiteren Designelementen vergrössern könnte. Das Ganze zu zoomen liegt jedoch eher auf der Hand. Von einer Trennung zwischen Inhalt und Darstellung weiss der User nichts.

dre.

[molily]

Das würde ich nicht unbedingt erwarten. Beim Autositz und beim Rückspiegel ist den Nutzern bekannt, dass sie eingestellt werden können und warum sie es sollten.

Bei Browsern ist das nicht der Fall; und das immer schlanker werdende Browser-Chrome trägt seins dazu bei und vesteckt die Einstellmöglichkeiten.

Man sollte zwischen Zoomen und Schriftgrößeneinstellung unterscheiden. Zooming ist in allen Browser-UIs relativ einfach zugänglich, die Standardschriftgröße lässt sich in allen Browsern nur über siebenundzwanzig verschachtelte Dialoge ändern (ich finde auch nicht, dass Chrome da negativ heraussticht). Demnach wird Zooming vermutlich viel häufiger verwendet.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

das immer schlanker werdende Browser-Chrome
ich finde auch nicht, dass Chrome da negativ heraussticht

?? Ich meinte Browser-Chrome, nicht Browser Chrome.

Qapla'

[molily]

das immer schlanker werdende Browser-Chrome
ich finde auch nicht, dass Chrome da negativ heraussticht

Ups, sorry.
Deutsch, Leseverstehen: 4-
Versetzungsgefährdet.

Mathias

[Alexjander]

Ich möchte eine Website mit zentralem Layout gestalten, sprich alle Inhalte sind in einem mittigen Kasten, welcher weiter nach unten verläuft.
Links und rechts davon soll einfach frei bleiben.

Mein Problem ist nun: Wie groß soll/darf/kann ich den mittleren Kasten, also den Main-Container maximal machen, damit er für alle bildschirmformate gut aussieht

Das hängt zuallererst vom Inhalt ab. Eine Breite x, auf der sich eine Bilderreihe angenehm verteilt, kann für eher textlastigen Inhalt den Anfang einer Bleiwüste bedeuten.

Irgendwelche Pauschalaussagen, insbesondere, wenn sie mit Begründungen à la "soundsoviel Pixel ist doch nicht mehr aktuell" gewürzt sind, würde ich mit Vorsicht bedenken.
Bau _deinen_ Inhalt so auf, dass er gut aussieht, aber bedenke immer, dass vor allem diejenigen mit weniger zur Verfügung stehender Breite die größten Probleme haben werden. Handle entsprechend. Benutze max-width statt width. position:absolute ist oftmals bäh.