Willkommen Gast. Bitte anmelden oder registrieren.

Autor Thema: Gegen das Querscrollen  (Gelesen 5445 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Gegen das Querscrollen
« am: 11. März 2012, 09:36:15 »
Ich führe einen persönlichen Feldzug gegen das Querscrollen. Hier ein paar Gedanken, ohne Anspruch auf Vollständigkeit oder Rettung des Abendlandes  ;)
Generell kann man inzwischen usability mit einem kleinen Hinweis auf SEO sehr gut verkaufen und im Großen und Ganzen stehen wir bei Joomla mit den Beez-Templates gut ausgerüstet da. Aber viele Joomlaianer greifen in die Template-Kiste und zerren solche mit fester Breite heraus. Diese können sonst noch so gut sein - feste Breite bedeutet Querscrollen für viele User.

Verständlich - Grafikdesigner lieben ihre Screendesigns und möchten sie auf das Pixel genau unverrückbar realisiert sehen.  Der Gedanke, dass bei einem fluiden Design die sorgsam ausgetüftelten Vorlagen sich in die Länge und Breite verändert ist ihnen  ein Graus. Da die Browser von sich aus alles vergrößern, da auch die Web-Designer vor großen Monitoren sitzen, finden viele fluides Design einfach lästig. Bleibt doch bei einer festen Breite alles brav am zugewiesenen Platz – und bitte schön – wer es größer will kann ja nach rechts scrollen. Bei Grafikseiten ist das auch in Ordnung, nicht aber bei Seiten mit überwiegend Text-Informationen.

Seltsamerweise ist das Querscrollen auch in den BITV 2.0 http://www.gesetze-im-internet.de/bitv_2_0/anlage_1_8.html nicht erwähnt und gilt offiziell nicht als Barriere, während Schriftgrößen und Kontraste sehr wohl erwähnt sind.
Aber ich führe einen persönlichen Feldzug dagegen.  Denn es behindert massiv beim Lesen.
Schnelleser können Texte beim Querscrollen nicht schnell lesen. Der Blick kann nicht in Schleifen über den Text gleiten und die wichtigen Wörter filtern, wie wir es gewöhnt sind. Wie ein Vorschulkind muss man die Zeile von links nach rechts verfolgen. Das ist für Leser ein Grund zum Wegklicken und das sollte man auch Kunden erklären, die Textinformationen anbieten.

Dann braucht man sich gar nicht mit dem Argument "schwer Behinderte sind nicht unsere Zielgruppe" auseinandersetzen, das Designer und Kunden gerne bringen. Alterssichtige sind ein Großteil der Bevölkerung. Obwohl vielleicht auch eine Erinnerung daran nütlich ist, dass es Gelähmte gibt, die nicht nahe an den Monitor herankommen und daher die größtmögliche Schrift eingestellt haben. Auch sie müssen mit der Kopfmaus oder der Sprachsteuerung querscrollen um die Information zu lesen.

Da die Texte dabei recht lang werden können wird mit dem Fluiden Design der to-top Button zur Pflicht.
Eine Herausforderung ist die horizontale Navigation. Beim fluiden Design müssten sich die Items untereinander schieben. Das tun sie aber nur selten, jedenfalls nicht, wenn es die schönen Mega-Menus und Konsorten sind. Und wenn die items untereinander gleiten ist es meist häßlich.  Sie erzwingen das Querscrollen,  und wenn der Rest noch so sorgfältig barrierearm gestaltet ist.

Auf dieser Seite hier ist das horizontale Menu oben schön und barrierfrei - so soll es sein, daran kann man sich ein Beispiel nehmen!


Grüße, Christiane

Joomla-Hilfe

  • Oberwetterfrosch (Mod)
  • Beiträge: 155
Antw: Gegen das Querscrollen
« Antwort #1 am: 11. März 2012, 11:00:45 »
Grundsätzlich hast du mir aus der Seele gesprochen :)
Allerdings darf man bei fluiden Designs auch die Besucher mit Monster-Bildschirmen, die trotz allem im Fullscreen-Modus surfen, nicht vergessen. Für mich persönlich ist das zwar unverständlich, ich nutze einen großen Bildschirm lieber mit vielen, dem Inhalt angepaßten Fenstern, aber es gibt sie, und die Bildschirme werden immer größer. Aktuell sind noch gut 1900px Stand der Technik, aber die ersten Monitore mit über 2500px gibt es schon längere Zeit, und sie sind sicher nicht das Ende der Fahnenstange. Und irgendwann werden die Monitore mit immer höherer Auflösung nicht mehr größer, sondern die Pixel kleiner und die Darstellung schärfer. Von Auflösungen, wie sie Drucker bereits seit Jahren bieten, sind Monitore noch weit entfernt, aber die technische Entwicklung geht in die Richtung. Bereits jetzt wird für 1024px Breite nicht mehr die traditionelle Diagonale von 17" benötigt, sondern sie passen bequem in 8", weniger als die Hälfte.

Daraus ergeben sich zwei Probleme, von denen eins fluide Designs betrifft: Elend lange Zeilen sind schwer lesbar, weil das Auge beim Zeilensprung einen großen Weg zurücklegen muß und beim "Rücklauf" die Zeile nicht verlieren darf. Mehrspaltigkeit bei Druckwerken hat sich nicht primär deshalb entwickelt, weil damit mehr Text auf einer Seite untergebracht werden kann, sondern weil kein Mensch konzentriert eine Zeitung lesen könnte, bei der die Zeilen über die volle Blattbreite gehen.

Weil Mehrspaltigkeit von Fließtextartikeln im Screendesign nicht wirklich gut umsetzbar ist, weil im Gegensatz zum Druck der sichtbare vertikale Ausschnitt nicht bekannt ist, muß der Lesebereich in der Breite begrenzt werden, und zwar in der Anzahl der Zeichen. Die Anzahl der Pixel sagt nichts darüber aus, wie viele Zeichen in eine Zeile passen (s.o.). Eine Seite sollte also nicht "fluid um jeden Preis" sein, sondern immer so breit, daß sie auf jedem Medium gut lesbar ist, im Idealfall vom PDA bis zum 30"-Monitor.

Das nächste Problem ist die Schriftgröße. Schriftgrößen in px sind schon seit Jahren nicht mehr State of the Art, seit die Monitorflächen nicht mehr proportional zur Pixelanzahl wachsen. Trotzdem werden sie noch vielfach verwendet, statt Schriftgrößen in em oder ex zu nutzen, die sich an die Wunschgröße des Benutzers anpassen.

Aus diesem Grund ist es falsch, die Breite auf eine maximale Pixelzahl zu begrenzen. Die Begrenzung muß sich der Schriftgröße anpassen. Eine größere Schrift erfordert bei gleicher Zeichenzahl eine größere Breite in px, und solange das Fenster sie hergibt, spricht nichts dagegen, sie zu nutzen.

Und nicht zuletzt: Wieso eigentlich müssen mehrspaltige Layout unbedingt in jeder Breite auch tatsächlich mehrspaltig angezeigt werden? Wenn die Lesespalte in kleinen Fenstern nur noch eine winzige Breite hätte, ist es doch viel benutzerfreundlicher, die zusätzliche Infospalte nach unten rutschen zu lassen und den Platz der Lesespalte verfügbar zu machen. Unten wird sie jedenfalls eher wahrgenommen als hinter dem rechten Rand, weil vertikales Scrollen "normal" ist, horizontales dagegen einfach nur lästig.

Screendesigner sollten sich davon lösen, ihren Papierentwurf unbedingt und mit allen Mitteln auf beliebige Fenstergrößen übertragen zu wollen. Viel sinnvoller ist es, die dynamischen Möglichkeiten dieses Mediums effektiv zu nutzen, um jeder beliebigen Fenster- und Pixelgröße optimal gerecht zu werden.
Dietmar

Die Realität ist eine Halluzination, die durch akuten Alkoholmangel hervorgerufen wird.

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Gegen das Querscrollen
« Antwort #2 am: 11. März 2012, 11:29:50 »
Hallo,

das Problem mit dem Querscrollen kann ich bestätigen, wenn man versucht, auf dem iPhone Posts zu editieren, dann geht das nicht wirklich gut.

Ich hätte da aber auch gleich mal eine Frage:
Als 'Normaluser' mit breitem Bildschirm decke ich beide angesprochenen Varianten ab: Ich surfe ganz gern im Vollbildmodus, wenn ich aber bsw. entwickle, dann hatte ich früher gern den zweiten Monitor an, inzwischen nutze ich dann aber auch lieber die Breite meines Monitor und habe z.B. links den Browser mit Doku/HowTo/Forum und rechts Eclipse und meinen Quellcode (und könnte Dateimanager und FTP eigentlich auf den 2. Monitor schieben :)).
Viele Templates haben ja im Header eine Grafik, ein Foto oder ähnliches. Dieses hat ja nun einmal eine fixe Breite. Da ich im Moment an der Portierung eines Templates arbeite, habe ich genau den Fall, dass der Browser die Hälfte des Monitors einnimmt (Win7 unterstützt die Halbierung des Fensters). Ich habe in dem Fall einfach den Browser anders zoomen lassen, wobei inzwischen ja das Bild mit gezoomt wird. Für meine Zwecke (Layout-Vergleich) reicht das aus, ich merke aber auch, dass die Lesbarkeit durchaus darunter leidet.

Was macht man in so einem Fall eigentlich? Man möchte dann ja eigentlich das Größen-Verhältnis zwischen Grafik (Header) und Artikelschrift ändern. Früher habe ich oft Buttons für 3 Schriftgrößen gesehen, gefühlt ist das aber seltener geworden und auch hier nicht mehr zu finden.
Macht 'man' das nicht mehr? Wie sieht da eine Lösung aus? Gibt es CSS-Beispiele um das zu lösen?

Das steckte auch etwas hinter meinem Vorschlag 'mobile Endgeräte' als Rubrik einzuführen, aber ich muss zugeben, dass sich die Fragestellungen mit diesem Subforum doch überlappen.

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Antw: Gegen das Querscrollen
« Antwort #3 am: 11. März 2012, 11:55:25 »
Ja, du hast vollkommen recht.  Vision Responsive Webdesign for Joomla!
Aber das ist ganz schön aufwendig zu realsieren und schwer - und damit teuer. Aber man darf ja träumen  :)
Ein schönes Beispiel ist http://www.einfach-teilhaben.de/ das zickt zwar auch noch an einigen Stellen und ist nicht für uns verfügbar aber gut.

Grüße, Christiane

J-Worker

  • Bestätigter Nutzer
  • Beiträge: 18
  • Hat keine Ahnung. Davon aber ganz viel...
    • Webentwicklung mit Joomla!
Antw: Gegen das Querscrollen
« Antwort #4 am: 11. März 2012, 22:51:17 »
Vision Responsive Webdesign for Joomla!
Aber das ist ganz schön aufwendig zu realsieren und schwer - und damit teuer.

Hallo,

Responsive WebDesign muss nicht aufwendig und teuer sein. Aber auch Responsive WebDesign hat so seine Nachteile ;)

Nehmen wir mal das Yoko Theme von ElmaStudio (WordPress) als Beispiel, wie man recht gut ResponsiveWebDesign hin bekommt:
http://yoko.elmastudio.de/

Und so etwas nach Joomla zu portieren (oder gar selbst zu Gestalten) ist gar nicht mal wirklich schwer, teuer oder gar Aufwendig.


Edit:

Vielleicht ja auch für den ein oder anderen ein Anfang in Sachen HTML5/Responsive:
https://github.com/nternetinspired/OneWeb
« Letzte Änderung: 11. März 2012, 23:03:27 von J-Worker »

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Antw: Gegen das Querscrollen
« Antwort #5 am: 12. März 2012, 20:40:15 »
@sammy zu den fontsize-switcher:
Zitat
Macht 'man' das nicht mehr?
Das ist so ein Zwiespalt. Einerseits macht "man" es nicht mehr, denn es stammt aus einer Zeit, als die Browser noch nicht vegrößern konnten. So gesehen sind diese Buttons inzwischen überflüssig und rächen sich furchtbar bei einem schlampig gemachten Design. Für Designer sind sie lästig, denn sie müssen auch irgendwo platziert werden und der Platz oben ist immer knapp..
Andererseits sind sie aber auch ein Signal für "wir bemühen uns hier, eine barrierearme site zu präsentieren" und daher immer noch im Einsatz. Ich setzte sie auch wieder ein, denn man kann sie älteren Leuten leicht erklären, die mit Tastenkobinationen nicht klar kommen.
Das muss und kann also jeder selbst entscheiden, ob er das verwendet.

@J-Worker: danke für diese Links. Sieht sehr gut aus und ich werde mich da einarbeiten. Aber wo sind die Nachteile?
Grüße, Christiane

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: Gegen das Querscrollen
« Antwort #6 am: 12. März 2012, 23:27:26 »
Aber wo sind die Nachteile?

Die Auflösung sagt nicht wirklich was über die wahre Größe des Bildschirms aus. So hat das neue IPad eine riesen Auflösung aber nur einen sehr kleinen Bildschirm, bei anderen PCs kann es genau anders herum sein. Das kann man schwer direkt abfangen bzw. man muss dann besondere Viewport-Hacks einbauen.
« Letzte Änderung: 13. März 2012, 00:41:20 von bembelimen »
Joomla! ist auch nur ein Mensch...

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Gegen das Querscrollen
« Antwort #7 am: 13. März 2012, 08:18:30 »
Vielleicht deute ich 'Viewport-Hack' auch falsch, dann vergesst das einfach: Ich habe vor kurzem für ein Spiel ein kleines Statistikskript geschrieben, dabei hatten wir dann auch das Problem der Schriftgrößen, denn auf den Überschriften liegt noch ein JS zum Einblenden weiterer Infos. Diese waren auf dem iPhone schlecht zu treffen oder aber auf dem Monitor viel zu groß.
Die Lösung sind CSS-Media-Queries gewesen. Fuer ein ganzes CMS ist das sicher nicht unbedingt im Vorbeigehen gemacht, aber dafür sauber und kein fieser Hack (so wies bei den ie5-Korrekturen immer den Anschein hat).
« Letzte Änderung: 13. März 2012, 11:19:58 von Sammy »

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: Gegen das Querscrollen
« Antwort #8 am: 13. März 2012, 14:19:18 »
Genau die Media Queries sind das Problem beim neuen IPhone, weil gerade die Auflösung im Verhältnis zur Bildschirmgröße sehr hoch ist. Da muss man halt bisschen aufpassen, damit es passt. Man muss diese Sonderfälle halt extra erfassen...kann sie leider nicht generisch über eine allgemeine min-width Angabe abdecken.
Joomla! ist auch nur ein Mensch...

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Gegen das Querscrollen
« Antwort #9 am: 13. März 2012, 14:51:35 »
Für alle, die nicht genau wissen, wovon wir sprechen:

Das wäre die Variante für's iPhone 4 / 4S
Zitat
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  h1 { font-size: 3em; }
  a { font-size: 2em; }
  .mobile { display: inline; }
  .notmobile { display: none; }
}

Alle meine 3,5 Anwender habe ein entsprechendes Gerät, deshalb habe ich das nicht lange auf andere Typen angepasst.
Du hast natürlich Recht: Eine einfache min-width-Abfrage tut's nicht.
Aber ist es nicht eigentlich egal, ob man seine Ziel-Typen nur über die Breite oder über Breite und Faktor bestimmt?

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: Gegen das Querscrollen
« Antwort #10 am: 13. März 2012, 15:55:32 »
Ja, das wäre z.B. eine Lösung, wird halt recht aufwändig, wenn andere Anbieter nachziehen mit der Auflösung und evtl. andere Werte nutzen.
Joomla! ist auch nur ein Mensch...

Joomla-Hilfe

  • Oberwetterfrosch (Mod)
  • Beiträge: 155
Antw: Gegen das Querscrollen
« Antwort #11 am: 13. März 2012, 16:40:43 »
Ich halte es für den falschen Weg, für Brot- und Butter-Schriften solche extremen Werte zu setzen. Der Anwender bestimmt die Grundgröße seiner Schrift auf dem Display. Der Designer kann abweichende Schriften in Abhängigkeit davon größer oder kleiner machen, aber die gewählte Grundgröße hat er nicht anzutasten. Das ist so, als würde man in fremde Wohnungen spazieren und die Helligkeit und Lautstärke des Fernsehers ändern.

Und nein, die Leute die solche Werte nicht anfassen und in der Grundeinstellung lassen, sind höchstens ein Grund für die Browserprogrammierer, ihre Grundeinstellungen zu überprüfen, aber kein Grund für den Webdesigner, dem Besucher diesbezüglich Vorschriften zu machen.
Dietmar

Die Realität ist eine Halluzination, die durch akuten Alkoholmangel hervorgerufen wird.

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Gegen das Querscrollen
« Antwort #12 am: 13. März 2012, 17:25:36 »
Ich halte es für den falschen Weg, für Brot- und Butter-Schriften solche extremen Werte zu setzen. Der Anwender bestimmt die Grundgröße seiner Schrift auf dem Display. Der Designer kann abweichende Schriften in Abhängigkeit davon größer oder kleiner machen, aber die gewählte Grundgröße hat er nicht anzutasten. Das ist so, als würde man in fremde Wohnungen spazieren und die Helligkeit und Lautstärke des Fernsehers ändern.

Und nein, die Leute die solche Werte nicht anfassen und in der Grundeinstellung lassen, sind höchstens ein Grund für die Browserprogrammierer, ihre Grundeinstellungen zu überprüfen, aber kein Grund für den Webdesigner, dem Besucher diesbezüglich Vorschriften zu machen.

Das war jetzt auch nur das Beispiel direkt aus meinem Script und sicher nicht für ein CMS so gedacht. In meinem Fall werden Daten mit jquery ein- und ausgeblendet, wenn man auf die entsprechende Überschrift drückt. Dabei hilft eine extreme Schriftgröße auf dem Handy dann sehr.
Das Beispiel war so nicht für die Schriftgrößen von Artikeln gedacht sondern sollten nur die technische Variante Darstellen, wie man auf bsw. iPhone abfragen kann.

J-Worker

  • Bestätigter Nutzer
  • Beiträge: 18
  • Hat keine Ahnung. Davon aber ganz viel...
    • Webentwicklung mit Joomla!
Antw: Gegen das Querscrollen
« Antwort #13 am: 03. April 2012, 23:14:29 »
Hi,

noch mal was zum Thema Responsive:

http://bootstrap.fastnetwebdesign.co.uk/

Mit passenden Download für Joomla ;)

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Antw: Gegen das Querscrollen
« Antwort #14 am: 04. April 2012, 17:38:40 »
Schön! Es ist erstaunlich, wie das jetzt aus dem Boden schießt. Die Behinderten haben so lange dafür gekämpft, aber gemacht wird es erst, wenn es für die jungen interessant wird. Ich rede auch bei Auftraggebern nicht mehr von barrierearm sondern sage "auf Code-Ebene suchmaschinen-optimiert"!
Grüße, Christiane

Joomla-Hilfe

  • Oberwetterfrosch (Mod)
  • Beiträge: 155
Antw: Gegen das Querscrollen
« Antwort #15 am: 05. April 2012, 17:53:47 »
"auf Code-Ebene suchmaschinen-optimiert"
Die Formulierung ist Spitze!  ;D
Dietmar

Die Realität ist eine Halluzination, die durch akuten Alkoholmangel hervorgerufen wird.