Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Und es hat Zoom gemacht (oder: Spiel mit dem Feuer)

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Und es hat Zoom gemacht (oder: Spiel mit dem Feuer)

Was macht barrierefreie Websites aus? Eine der ersten Antworten, die Sie auf diese Frage sicherlich zu hören bekommen, ist das Kriterium »Geräteunabhängigkeit«. Denn barrierefreie Internetseiten funktionieren gleich gut, egal ob man sie vom Mobiltelefon oder am Plasmafernseher aufruft. Ein neuer Browser-Trend könnte Webentwickler nun auf eine falsche Fährte locken – die Rede ist vom Seiten-Zoom und den (unerwünschten) Nebeneffekten.

Seiten-Vergrößerung kontra Schriftgrad-Vergrößerung

Opera kann es schon immer, der Internet Explorer ab Version 7 beherrscht es leidlich und im neuen Mozilla Firefox gehört es ebenfalls zur Serienausstattung. Die Rede ist von einer Zoom-Funktion, die nicht nur Texte vergrößert, sondern auch Bilder sowie Plug-In-Inhalte entsprechend skaliert und glättet. Auf diese Weise bleibt das Layout einer Seite in seinen Proportionen vollständig erhalten und man kann die Inhalte – je nach Browser – um bis zu 1000% vergrößern.

Bisher war es so, dass meist nur die Text-Inhalte einer Website skalierbar waren oder sind. Findige Webdesigner haben jedoch auch in älteren Browsern einen Weg gefunden, ganze Seiten zoomen zu lassen, also Text und Bild. In Fachkreisen nennt man derartige Layouts daher auch Zoom-Layouts oder elastische Layouts. Die Vorteile liegen klar auf der Hand: Bei der Gestaltung verhalten sie sich wie fixe Layouts hinsichtlich der absolut sicheren Bestimmung einzelner Koordinaten. Anders als bei fixen Layouts werden die Einheiten jedoch nicht in Pixeln, sondern in em-Einheiten angegeben. Dadurch wird der Zoom-Effekt erzeugt, sobald ein Nutzer den Schriftgrad ändert. Darin liegt sicherlich auch die größte Schwäche derartiger Layout-Typen, denn ein Nutzer muss wissen, dass er den Schriftgrad ändern kann und auch muss, um in den Genuss dieses Effektes zu gelangen.

Immer diese Nutzer …

Letzten Endes hängt dann doch wieder alles vom Nutzer ab. Man hat geplant, vorbereitet, getestet, verbessert, Nutzertests durchgeführt, wieder verbessert, um- und angebaut und am Ende dann eine Website ins Netz gestellt, von der man nun glaubt, dass sie den Anforderungen der Nutzer in besonders hohem Maße entspricht. Und dann kommen die ersten echten Nutzer und machen einem einen dicken Strich durch die Rechnung, weil sie sich in ihrer Gesamtheit doch so unterschiedlich verhalten. Da erhält man dann plötzlich E-Mails, warum denn die Schrift auf dem Monitor so klein ist oder weshalb sich das Layout beim Aufziehen des Browserfensters nicht mitbewegt oder aber warum der Internet Explorer 5.0 so merkwürdige Darstellungsfehler aufweist. In solchen Momenten wird uns vor Augen geführt, dass es nicht den einen Nutzer gibt und ein »optimiert für« niemals in der Praxis funktionieren wird. Es gibt viele verschiedene Nutzer-Szenarien, die immer in Abhängigkeit von anderen Faktoren zu sehen sind. Dabei spielen Browser, Monitore, Auflösungen, Verbindungsgeschwindigkeiten, persönliche Vorlieben, Behinderungsarten und der Bildungsstand eine wichtige Rolle.

Nun gibt es da also den mobilen Nutzer, der auf einem 240 × 320 Pixel kleinen Display und mit integriertem Browser unterwegs ist. Und es gibt den Breitband-Nutzer, der seinen Kopf hinter einem 30 Zoll Cinema-Display mit 2560 × 1600 Pixel versteckt und Safari zum Surfen benutzt. Oder den stark sehbehinderten Nutzer, mit Zoom-Text, Farbinvertierung und Plasma-Fernseher mit 800 × 600 Pixeln Auflösung. Alle haben etwas gemeinsam: Sie sind Nutzer und möchten an die für sie interessanten Inhalte einer Website gelangen.

Webdesigner stark gefordert

Genau an dieser Stelle sind die Fertigkeiten und Kenntnisse von Webdesignern gefragt, um möglichst interaktive Webseiten zu erstellen, die gut funktionieren. Und zwar möglichst unabhängig vom Ausgabegerät. Zudem sollen die gelieferten Websites auch gut aussehen, dem Kunden selbst gefallen und das Corporate Design transportieren. Dazu kommen dann noch Sonderwünsche, spezielle Inhaltstypen, technische Aufgabenstellungen und viele andere Aspekte, die einem Webentwickler das Leben schwer machen können. Kein Wunder also, dass der gemeine Webdesigner es sich gerne mal einfach macht. Sei es nun eine technische Lösung, wie zum Beispiel eine Nur-Text-Version auf Knopfdruck statt einer barrierefreien Lösung für alle oder einem gestalterischen Kniff, der zu einem fixen Layout führt.

Fixe Layouts, bei denen die Position eines jeden Pixels für ein bestimmtes Layout auf dem Monitor genau festgelegt ist, sind nicht generell böse. Allerdings suggerieren neueste Entwicklungen, wie zum Beispiel sogenannte Grid-Layouts, dass man als Webdesigner alles in Pixeln anlegen kann, soll und muss, damit der Benutzer auf der anderen Seite der Leitung ein ansprechend gestaltetes Layout auch so sieht, wie es der Designer wünscht. Genau da liegt der Hund begraben: Eine Seite wird am anderen Ende der Leitung, also beim Benutzer, nahezu niemals so aussehen, wie es sich der Designer ausgedacht hat. Eingangs hatten wir ja bereits die Eckpfeiler genannt, die hier eine wichtige Rolle spielen. Man könnte daraus gewissermaßen eine Formel machen:

(Browser + (Monitore × Auflösungen) + Verbindungsgeschwindigkeiten)
× (persönliche Vorlieben + Behinderungsarten + Bildungsstand) = Darstellungsarten

Da braucht man nicht viel Phantasie, um sich auszumalen, wie viele Millionen Möglichkeiten sich eröffnen, um ein und dieselbe Seite auf unterschiedlichste Arten und Weisen darzustellen. Und trotzdem gibt es zahllose Webdesigner, die beherzt zugreifen und Grid-Layouts umsetzen.

Blueprint war nur der Anfang

Der Grund für die rasante Ausbreitung fixer Layouts in jüngster Zeit liegt in zwei voneinander unabhängigen Entwicklungen:

  1. Browser mit Seiten-Zoom
  2. Grid-Frameworks

Beides zusammen ergibt eine explosive Mischung in der Webentwickler-Gemeinde und sorgt derzeit für viele Missverständnisse, noch mehr Verstimmungen und eine extreme Polarisierung der Webstandards-Community. Die Frage aller Fragen lautet: »Warum soll ich ein Layout flexibel planen, wenn fixe Layouts besser, schneller und günstiger zu realisieren sind?« Da muss man schon tief in die Argumentationskiste greifen, um diese Aussagen mit Gegenargumenten zu stellen. Dirk Jesse und Jens Grochtdreis haben das in ihren aktuellen Blog-Beiträgen ebenso versucht, wie Lothar Baier. Die Stimmung ist aufgeheizt, die Kommentare in zwei Lager gespalten. Keiner gibt klein bei, jeder wähnt die besseren Argumente auf seiner Seite.

Angesichts der Tatsache, dass immer mehr Grid-Frameworks wie Pilze aus dem Boden sprießen, muss man die Frage aufwerfen, warum das so ist. Den Anfang machte Google Blueprint das einen ganz anderen Ansatz verfolgt, als die beiden Platzhirsche unter den Frameworks YAML und YUI Grids CSS. Letztere bieten die Option, fixe, flexible oder wie im Fall von YAML auch elastische Layouts zu erstellen und dabei dennoch ein Gestaltungsraster (Grid) einzuhalten. Das geschieht durch Templates und Sub-Templates, denen gewisse Klassen zugeordnet sind. Kein Wunder also, dass Frameworks, die mehr Flexibilität bei der Gestaltung und technischen Umsetzung bieten, in der Regel deutlich mehr Code mit sich führen – sei es nun im HTML- oder im CSS-Bereich. Argumente, die Code-Schlankheit an dieser Stelle als Kernargument ins Rennen führen, sind sicherlich berechtigt, erfassen aber kaum den Kern der Sache.

Zwei Kräfte, eine Richtung

Letztlich ist es auch egal, ob nun ein Browser einen »Fullpage-Zoom« beherrscht, oder ob ich mir dazu eine Erweiterung installieren muss, damit die Funktion nachgerüstet wird. Technische Errungenschaften wird es immer geben und sie werden kurzfristig nur eines tun: Die Möglichkeiten für den Anwender erweitern. Langfristig denken und planen und somit nachhaltig agieren – das ist eine ganz andere Sache, die nicht in den Händen der Nutzer liegt, sondern in der Verantwortung von Webentwicklern und Entscheidern.

Wenn ein Webentwickler sich für ein fixes Layout entscheidet, dann bezieht er zum gegenwärtigen Zeitpunkt damit eine klare Position: Egal, was der Nutzer eingestellt hat, es gibt eine feste Breite. Kleiner Monitor? Nicht sein Problem. Hohe Auflösungen? Auch nicht sein Problem. Browser ohne Zoom-Funktion? Kann man sich doch kostenlos herunterladen. Die Probleme hat nicht der Webdesigner, sondern der Nutzer. Irgendwer muss es am Ende ja ausbaden. Da läßt man doch lieber die Anderen die Zeche zahlen als vor der eigenen Tür zu kehren.

Eigentlich schade, denn beide Kräfte wirken in die gleiche Richtung: Die Zoom-Funktion soll die Zugänglichkeit für jene verbessern, die auf skalierbare Schrift und größere Bilder angewiesen sind. Sie ist keinesfalls ein Ersatz für gute Planung und ein Grund zur Faulheit für Webdesigner. Allenfalls werden zukünftig elastische Layouts, deren Umsetzung weder einfach, noch unproblematisch ist, wegfallen. Aber selbst bis zu diesem Zeitpunkt ist es noch ein weiter Weg, denn die Zoom-Generation der Browser steckt noch in ihren Stramplern. Flexible Layouts wird es auch weiterhin geben, denn sie sind eine zusätzliche Gestaltungsvariante und wer sie als Designer beherrscht, wird sie schnell zu schätzen wissen. Wer pixelgenaue Layouts möchte, sollte noch etwas Geduld mitbringen und auf die Zukunft von CSS3 vertrauen. Eines sollten Webentwickler dabei aber nicht vergessen: Barrierefreiheit ist kein Trend, es ist Einstellungssache.

Und darum …

Weil Barrierefreiheit nunmal kein Trend ist, dem man für kurze Zeit huldigt, oder weil es der Kunde gerade so will, gibt es auch keine Ausreden: Wer mit fixen Layouts arbeitet, schaltet in 99 von 100 Fällen bei der Barrierefreiheit mehr als nur einen Gang herunter. Es gibt wenige Ausnahmen, bei denen ein fixes Layout auch aus dem Blickwinkel der Barrierefreiheit funktioniert, das ist aber sicherlich ein anderes Kapitel und rechtfertigt einen eigenen Artikel.

Elastisch oder flexibel – das sind gegenwärtig die einzig gangbaren Lösungen, um eine gute barrierefreie Website zu erstellen. Möglicherweise werden neue Browser-Generationen dazu beitragen, dass diese festen Grenzen verschwimmen und neue Entwicklungen Raum gewinnen. Ob das nun eine Zoom-Funktion ist, ein eingebauter Style-Switcher, oder aber eine totale Personalisierung jedweder Website durch den Nutzer direkt aus dem Browser heraus mit Hilfe einer schicken Einstellungs-Oberfläche (und nicht via User-Stylesheets, Schriftart-Einstellung und dergleichen, was ja auch heute schon geht): Die Zukunft wird unsere Sichtweise auf die Vergangenheit verändern und neue Möglichkeiten mit sich bringen. Das ist gut für die Nutzer und ändert doch nichts für uns Webentwickler. Und darum heißen wir die Zoom-Funktion willkommen, aber nur, weil sie etwas für den Nutzer ändert, wenn er sie denn entdeckt und nutzt. Von den Buzzwords der Saison dürfen wir uns in Kürze wohl wieder verabschieden und sagen deshalb jetzt schon »bis bald« zu Grids und Fullpage-Zoom. Die nächste Sau wird in Kürze durch das Digitale Dorf getrieben und es finden sich garantiert Anhänger und Gegner. Wie immer. Das Leben geht weiter. Obwohl …

Kommentare

Marc
am 27.06.2008 - 18:15

Danke. Sehr gut geschrieben und treffend zusammengefasst.

Da sich Bill Gates heute ja zur Ruhe setzt, bleibt abzuwarten wie lange sich Fullpage-Zooms wirklich brauchen, bis sie auch von mehr als 70% der Nutzer angewendet werden (können, theoretisch, wenn...).

Permanenter Link

Dieter Welzel
am 27.06.2008 - 23:20

Schöner Artikel, der mir aus der Seele spricht.
Vielen Dank auch für die Verlinkung meines Blogbeitrags "CSS-Frameworks: Eine tabellarische Übersicht" in dem Artikel.

Ergänzen möchte ich gerne noch, dass aus meiner Sicht die Entscheidung für flexible Layouts eine Entscheidung zugunsten des Nutzers ist. So jedenfalls das Fazit meines Blogbeitrags Ein Plädoyer für flexible Seitenlayouts! vom 16. Juni 2008.

Permanenter Link

Gerhard
am 28.06.2008 - 01:49

Ein Layout das sich an das Ausgabegerät anpasst ist zweiffellos eine tolle Sache. Aber aus welchem Grund sollten wir versuchen die Möglichkeit den Schriftgrad zu verändern als zusätzliche Zoomfunktion missbrauchen?

Permanenter Link

Bernhard
am 28.06.2008 - 10:13

@Gerhard: Wenn nur der Text vergrößert wird, wird das Verhältnis von Zeilenlänge und Zeilenabstand zunehmend schlechter.
Skaliert man den dazugehörigen Container mit, entfällt dieses Problem.

Permanenter Link

Thomas Weise
am 28.06.2008 - 11:19

DANKE auch von mir für diese gelungene Zusammenfassung dieses weitreichenden Themas.
Genau so sehe ich dieses Thema auch und ich hoffe, dass dieser Beitrag die sich etwas aufspaltende Webworker-Gemeinde wieder mehr 'zusammenrücken' lässt.
Wollen wir doch jedem Webdesigner selbst die Wahl der eingesetzten Technik überlassen und nicht so übereilt urteilen.
Ich jedenfalls bevorzuge flexible Layouts mit allen Vor- und Nachteilen, und akzeptiere gleichzeitig Webdesigner, die aus ihren Gründen auf fixe Layouts setzen.
... schönes Wochenende!

Permanenter Link

Peter
am 28.06.2008 - 17:38

Mal eine provokante Anmerkung: Ich glaube, dass den Ganzseiten-Zoom vor allem Grafiker gutfinden und diejenigen, die so gute Augen haben, dass sie einen Zoom eh kaum benötigen. Jemand, der mindestens auf 150% oder gar 200% zoomen muss, um den Text lesen zu können (wie ich hier auf dieser Seite - der Text wird für mich erst bei der zweiten Zoomstufe lesbar), der findet den Ganzseiten-Zoom vielleicht sogar rückschrittlich, weil er nach dem Zoom nämlich nicht nur senkrecht, sondern auch waagrecht scrollen muss. Das verschlechtert die Usability.

Ein Ganzseiten-Zoom auf bis zu 1000% ist in diesem Zusammenhang Unsinn weil nicht nutzbar. Allein die Vorstellung ... da brauche ich ja ein Navigationsgerät für das Lesen in einer Webseite. Vielleicht ein Overlay-Fenster mit Rasterflächen, denen ich entnehmen kann, welches der 100 Rechtecke ich bereits gesehen habe?

Sinnvoll ist ein Ganzseitenzoom vor allem als zuschaltbare Alternative, z. B. direkt im Kontextmenü. Warum nicht so umsetzen: Standardtextzoom über Ctrl-+ etc und ein Ganzseitenzoom über ein Maus-Werkzeug (z. B. Lupe), das so funktioniert wie das Lupenwerkzeug im Adobe Reader?

Übrigens: Im PDF gibt es den Ganzseiten-Zoom schon immer und den Textzoom bis vor Kurzem nicht - und meiner Meinung nach ist das einer der Hauptgründe, warum sich PDF nicht eignet für die Arbeit am Bildschirm und warum jeder, der ein PDF lesen will/muss, dieses ausdruckt. Insgesamt wäre PDF ein erheblich besseres und flexibleres Format als HTML, nur eben als Webseite unbenutzbar, weil man immer waagrecht scrollen muss, um lesen zu können ...

Jetzt haben wir die kuriose Entwicklung, dass Adobe endlich einen Textflussmodus einführt, der einen reinen Textzoom erlaubt (Grund: bessere Lesbarkeit, Barrierefreiheit, Darstellbarkeit auf kleinen Ausgabegeräten) während die Browserhersteller zunehmend auf den unzugänglichen Ganzseiten-Zoom setzen. Hier wird unheimlich Entwicklungsarbeit in ein nettes Gimmick gesteckt, das letztlich die Zugänglichkeit eher behindert.

Wie wäre es statt dessen z. B. mit einer Trennfunktion, dass man endlich ein ordentliches Satzbild bekommt? Bedingte Trennungen? Umbruchmöglichkeiten in Email-Adressen und Links, so dass eine simple Emailadresse nicht das komplette Design zerlegt? Fände ich erheblich wichtiger als den zugegeben sehr hippen Ganzseitenzoom.

Statisches Layout oder flexibles Layout ist mir übrigens aus Benutzersicht völlig egal. Solange der Textzoom funktioniert hat hinsichtlich der Lesbarkeit keine der beiden Varianten einen Vorteil. Das ist in meinen Augen ein Streit um des Kaisers Bart.

Beispiel diese Seite hier: es wäre schöner, wenn die Textspalte bei 150% auch um die Hälfte breiter wäre (aber nur, weil sie so schmal ist, dass auch dann keine waagrechten Scrollbalken auftauchen!) aber nötig ist es nicht. Der Text bleibt auch bei 200% in dieser schmalen Spalte gut lesbar. Und das ist das einzige was zählt (für mich).

Permanenter Link

Gerhard
am 28.06.2008 - 23:40

„Wenn nur der Text vergrößert wird, wird das Verhältnis von Zeilenlänge und Zeilenabstand zunehmend schlechter.“ (Bernhard)

Der Zeilenabstand sollte sich natürlich am gewählten Schriftgrad orientieren. Das steht hier auch gar nicht zur Debatte. Aber wir sollen die Möglichkeit den Schriftgrad zu verändern nicht als Zoomfunktion missbrauchen.

„Ich jedenfalls bevorzuge flexible Layouts mit allen Vor- und Nachteilen, und akzeptiere gleichzeitig Webdesigner, die aus ihren Gründen auf fixe Layouts setzen.“ (Thomas Weise)

Ein Layout das sich an die Breite des Browserfensters anpasst ist durchaus eine tolle Sache, aber warum sollte sich das Layout an die Schriftgröße anpassen?

„Jemand, der mindestens auf 150% oder gar 200% zoomen muss, um den Text lesen zu können (wie ich hier auf dieser Seite - der Text wird für mich erst bei der zweiten Zoomstufe lesbar), der findet den Ganzseiten-Zoom vielleicht sogar rückschrittlich, weil er nach dem Zoom nämlich nicht nur senkrecht, sondern auch waagrecht scrollen muss. Das verschlechtert die Usability.“ (Peter)
Ein äußerst wichtiger Aspekt.

„Beispiel diese Seite hier: es wäre schöner, wenn die Textspalte bei 150% auch um die Hälfte breiter wäre (aber nur, weil sie so schmal ist, dass auch dann keine waagrechten Scrollbalken auftauchen!) aber nötig ist es nicht. Der Text bleibt auch bei 200% in dieser schmalen Spalte gut lesbar.“ (Peter)
Er wird für viele Menschen sogar deutlich besser lesbar.

Permanenter Link

datenkind
am 29.06.2008 - 14:12

Prinzipiell würde ich vorrangig keine Methode verteufeln.
Fakt ist, dass es genauso schlechte flexible Layouts gibt, nämlich solche, wo ich mein Browserfenster erst einmal verkleinern darf, weil der Entwickler sich nicht um eine lesbare Zeilenlänge kümmert. Wenn ich in (m)einer Standardfenstergröße eine Zeilenlänge von mehr als 160 Zeichen habe, dann nützt mir das tollste und technisch ausgereifteste Layout nichts, wenn sich kein Mensch den Inhalt durchliest.

Bei aller Liebe zur Barrierefreiheit, aber wir sollten dabei nicht gängige Gestaltungsgrundsätze missachten.

Permanenter Link
Ansgar Hein

Ansgar Hein (Autor)
am 29.06.2008 - 19:41

Fakt ist, dass es genauso schlechte flexible Layouts gibt

Schlechtigkeit ist keine Frage des gewählten Layouts, das sollte jedem klar sein. Andersherum habe ich aber keine Chance, wenn ich 800x600 eingestellt habe, ein Layout mit 1024x768 anzusehen, ohne horizontal zu scrollen. Wie gesagt: Es gibt viele Pros und Contras, am Ende entscheidet der Webdesigner über Wohl und Weh. Wenn er über alle Vor- und Nachteile weiß, wird er eine Entscheidung treffen und sie wird dennoch immer von anderen angezweifelt werden, denn man kann es nicht jedem Recht machen.

Permanenter Link

Rainer
am 30.06.2008 - 12:18

Es bleibt immer der Spagat zwischen
* Browserfenstergröße
* lesbarer Schriftgröße
* sinnvoll lesbarer Zeilenlänge
* dem nicht horizontal scrollen müssen
* ansehbarem Layout
* damit einhergehende Bildplatzierungen
Ich kenne bisher keine einzige Lösung, die uneingeschränkt alle Anforderungen erfüllt. Es ist nunmal, im Gegensatz zu Papier, kein begrenztes Medium mit fixen Kenngrößen. Um möglichst viele Kriterien zu berücksichtigen UND barrierefrei daher zu kommen, muss man einfach akzeptieren, dass bestimmte (grafische) Layouts ("Das ist aber unser CD und daran wird nicht gerüttelt") einfach nicht umsetzbar sind und hier der Webdesigner gefordert ist, ein funktionierendes Layout zu entwickeln, dass es möglichst vielen Beteiligten recht macht und das mediengerecht ist.

Einen Aspekt möchte ich hier bekräftigen: Du schreibst:

... die einzig gangbaren Lösungen ...

Richtig, sie sind gangbar; keiner sollte aber denken, es seien die einzig perfekten Lösungen. Gangbar heißt hier wohl: den richtigen Weg weisend.

Permanenter Link

Andreas Stephan
am 30.06.2008 - 13:36

Sehe auch sehr viele Problem mit flexiblen Layouts. Auch wenn ich sie oft sehr schön finde, stößt man doch recht häufig auf Stellen wo es eine große Herausforderung wird. Wenn man z.B. die Laufweite des Textes nicht einfach flexibel mitwachsen lassen will, kommt man um feste Breiten nicht herum. Ausschließlich mit EMs zu arbeiten funtioniert zwar, ist aber imo ziemlich nervig.

Mich würde mal interessieren, wie auf dieser Seite ein gut funktionierendes flexibles Layout aussehen würde ;) Im Moment steht da ja #inhalt{ width: 491px} Wieso bloß ;) ?

Ich gehe fest davon aus, dass die Engeräte und Browser zukünftig alle Lösungen zum Skalieren von Seiten haben. Zur Not hilft man dann noch mit einem medienabhängigen Stylesheet nach. Auf jeden Fall läuft Opera Mini selbst auf einem 3 Jahre alten handy so, dass ich mir jede Seite angucken kann.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 30.06.2008 - 13:52

Wieso bloß?

Weil wir das hier alles in unserer Freizeit machen, über kein Budget verfügen und wir uns lieber auf Inhalte statt auf die Deko konzentrieren. Kommt Zeit, kommt auch ein Redesign…

Permanenter Link
Ansgar Hein

Ansgar Hein (Autor)
am 30.06.2008 - 14:21

Sehe auch sehr viele Problem mit flexiblen Layouts. Auch wenn ich sie oft sehr schön finde, stößt man doch recht häufig auf Stellen wo es eine große Herausforderung wird.

Du gehörst damit zu der angesprochenen Zielgruppe im Artikel: Sobald es knifflig wird, lieber auf fix umsteigen - zumindest deute ich den Kommentar so.

Wenn man z.B. die Laufweite des Textes nicht einfach flexibel mitwachsen lassen will, kommt man um feste Breiten nicht herum. Ausschließlich mit EMs zu arbeiten funtioniert zwar, ist aber imo ziemlich nervig.

Und damit bestätigst Du es dann. Das ist genau der Punkt, um den sich der Artikel dreht: Eine gesunde Job-Auffassung, die problemorientiert ist. Dazu gehört es nunmal, sich den Herausforderungen zu stellen und daran zu wachsen.

Permanenter Link

Andreas Stephan
am 30.06.2008 - 15:08

und wir uns lieber auf Inhalte statt auf die Deko konzentrieren.

Du bestätigst ja auch, dass es eben doch deutlich kniffeliger ist, ein gutes flexibles Layout umzusetzen. Wenn deine Kunden das bezahlen ist das ja wunderbar. Wenn ich mich entscheiden muss, ob ich lieber 3 neue Features baue oder mich 5 Tage mit IE6 und am besten ja wohl auch mit Screenreadern, iPhone etc. rumschlage, und ich ein eigenes Projekt (so wie dieses Blog z.B. oder wie unser Startup) betreibe, fällt mir diese Wahl sehr leicht.
Wir haben für six groups erst mit einem komplett flexiblen Layout angefangen, stellen ejtzt aber schrittweise auf ein festes Layout um, denn mit flexiblem Layout gehenn Dinge wie unversierten Nutzern ein eigenes Hintergrundbild für den Header zu erlauben ohne 1000 weiter Einstellungen nötig zu machen(skalieren, proportional skalieren, wiederholen, zentrieren, etc.) leider sehr schwer. Ist halt immer eine Kosten- Nutzenfrage und nach meiner Erfahrung überwiegen die Kosten den Nutzen für die Mehrheit (90%+) der durchschnittlichen Nutzer deutlich.

Permanenter Link
Nils Pooker

Nils Pooker (Webkraut)
am 30.06.2008 - 15:25

@Andreas:
Hallo?! Also nochmal: wir sind hier in Freizeit, nicht im Job.

Und wieso müssen immer wieder die Kunden für Professionalität immer gegenüber den "Standardleistungen" draufzahlen? Ist Standardleistung etwa Klickibuntibaukasten? Dann nimmt man ein gutes Framework und kann dem Kunden sogar großzügig Rabatt gewähren.

Und ja, es ist deutlich kniffliger ein gutes flexibles Layout umzusetzen. Es ist deutlich kniffliger, sich mit den Darstellungsfehlern des IE 5-6 herumzuschlagen als das zu lassen. Es ist deutlich kniffliger, professionell zu arbeiten als dilettantisch. Es ist deutlich kniffliger, den Meister im Handwerk zu machen als den Gesellen und es ist sogar deutlich kniffliger, die Eiger-Nordwand zu besteigen als einen Ikea-Stuhl. Man höre und staune.

Permanenter Link

Andreas Stephan
am 30.06.2008 - 15:40

Ach so. Fixe Layouts sind also unprofessionell und alle die eine andere Meinung haben sind dumme Gesellen ;)

Mal ganz ehrlich - ich hab hier eigentlich nur geschrieben, dass flexible Layouts einfach komplexer sind.
Letzlich isses egal ob Freizeit oder Job - die Frage ist doch, wie man mit den Resourcen die man hat (egal ob Geld oder Zeit) umgeht. Und ihr habt ja anscheinend aus exakt diesen Gründen auch die Entscheidung für ein fixes Layout getroffen (was ich gut verstehen kann), obwohl hier doch alles um Barreirefreiheit und Standards geht - nach deiner Argumentationslinie sehr unprofessionell :) - nach meiner einfach logische Konsequenz. Darf ich dich jetzt auch Geselle nennen? *** IRONIE ***
Bitte nicht falsch verstehen. Ich find das hier sehr sehr gut (und professionell) was ihr macht und auch solche kontroversen Diskussionen notwendig. In einer sachlichen Diskussion müssen aber auch differenzierte Statements möglich sein, ohne gleich eine polemische Antwort hervorzurufen. Feue mich auf das neue flexible Layout.

Permanenter Link
Ansgar Hein

Ansgar Hein (Autor)
am 30.06.2008 - 15:51

Du bestätigst ja auch, dass es eben doch deutlich kniffeliger ist, ein gutes flexibles Layout umzusetzen. Wenn deine Kunden das bezahlen ist das ja wunderbar.

Nein, da hast Du mich missverstanden. Es kommt auf die Planung an und nur darauf. In der Umsetzung ist ein gut geplantes, flexibles Layout nicht wesentlich kniffliger als ein fixes Layout.

Ich räume ein: Es gibt Ausnahmefälle, wo fixe Layouts einen Sinn machen. Du hast mit sixgroups ja einen solchen Fall skizziert. Was wollen wir aber jetzt tun? Die Ausnahme zur Regel machen, weil es einfacher ist? Oder uns den Herausforderungen stellen, mal was riskieren, etwas dazulernen und dabei möglicherweise neben neuen Kunden auch eine andere Einstellung gewinnen?

Permanenter Link
Nils Pooker

Nils Pooker (Webkraut)
am 30.06.2008 - 16:12

@Andreas:
Ich habe selbst ein fixes Layout auf meine Seite und schreibe gelegentlich sogar über Barrierefreiheit. Ja, da war mir die Kontrolle lieber über ein Layout, das mit Hintergrundgrafiken arbeitet. Auf dieser Seite geht es um Inhalte, die Umsetzung in ein anderes Laxout kommt noch.

Ich halte dich nicht für einen dummen Gesellen, ich wehre mich aber gegen das stets als Vorwand verwendete Argument, einen Technik sofort mit Kosten und Zeit in Verbindung zu bringen, während auf vielen dieser Seiten Unmengen von Stunden für die Erstellung und Implementierung von anspruchsvollsten Grafiken vorhanden waren.

Und das sieht dann doch eher nach gewollt, aber nicht gekonnt aus, egal, ob mir da jemand Gestaltungsgrundsätze oder Kundenbudgets an den Kopf wirft. Obacht: das meine ich wirklich nicht persönlich.

Bevor Du meinen Kommentar falsch verstehst: Wenn jemand sagt "jawoll, flexible Layouts sind mir einfach zu kompliziert, das kann ich nicht ohne PÜrobleme in den IEs", dann offenbart er vielleicht eine Kompetenzlücke, aber er ist wenigstens ehrlich. Und das ist dann auch akzeptabel und voll in Ordnung.

Permanenter Link

Dirk
am 30.06.2008 - 16:53

In einer sachlichen Diskussion müssen aber auch differenzierte Statements möglich sein, ohne gleich eine polemische Antwort hervorzurufen.

Der Artikel ist überaus sachlich gehalten. Er zeigt die Probleme auf, zeigt welche Layoutformen diesen eher gerecht werden und verteufelt keinen Weg pauschal.

Nach dem aktuellen Spielstand im Netz steht es vermutlich 30:1 für fixe Layouts. Über die Gründe darf man spekulieren, einige davon wurden hier sicherlich genannt. Wenn nun ein Artikel aus nachvollziehbaren Gründen dafür einsetzt, dieses Verhältnis in Richtung 20:1 oder 10:1 zu verschieben und dafür wirbt, flexible Layouts vermehrt einzusetzen, warum wird das von Teilen der Entwicklergemeinde immer sofort als Verteufelung fixer Layouts verstanden?

Fällt es so schwer, mal einen Schritt zurück zu treten und einen Blick auf das Große, Ganze zu wagen? Sicherlich lässt sich nicht jeder grafische Entwurf als flexibles Layout umsetzen. Es geht hier aber nicht um die wenigen Ausnahmen, es vielmehr um die vielen verpassten Gelegenheiten.

Schaue ich mir die Webseiten deutscher Kreditinstitute an, so sind dies fast ausnahmslos mit fixen Layouts umgesetzt obwohl in keinem einzigen Fall das Corporate Design einer flexiblen Umsetzung im Weg stünde. Stattdessen schlage ich mich beispielsweis selbst noch mit einem Online-Banking-Portal herum, welches nicht nur für 800px Breite, sondern sogar für 600px Höhe "optimiert" zu sein scheint und noch nicht mal eine einfache Vergrößerung der Schriftgröße schadfrei übersteht.

Genau an solchen Stellen setzt die Kritik des Artikels an. Hier wäre viel mehr möglich in Sachen Nutzerfreundlichkeit, nur umgesetzt wurde es nicht. Und an dieser Stelle ist es mit Sicherkeit auch keine Geldfrage.

Ist halt immer eine Kosten- Nutzenfrage und nach meiner Erfahrung überwiegen die Kosten den Nutzen für die Mehrheit (90%+) der durchschnittlichen Nutzer deutlich.

Mit der Kosten-/Nutzen-Rechnung ist das so eine Sache. Über die Kosten müssen sich Auftraggeber und Auftragnehmer einigen, den Nutzen oder auch den Schaden haben aber die Nutzer und deren Mitspracherrecht geht in Deiner Argumentation nicht ein.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 30.06.2008 - 17:18

Andreas:

Du bestätigst ja auch, dass es eben doch deutlich kniffeliger ist, ein gutes flexibles Layout umzusetzen.

Was hab ich?

Wir haben diese Webseite unverändert seit über zwei Jahren. Manuela Hoffmann hat sie (in ihrer Freizeit) erstellt und sich für ein fixes Layout entschieden. Das wir jetzt keine Zeit finden ein Redesign zu machen hat nichts mit der Entscheidung fix gegen flexibel zu tun, sondern damit, dass uns die Zeit fehlt.

Jeder der Webkrauts kann flexible, elastische, teilelastische, teilflexible und auch fixe Layouts gleichermaßen aus den Ärmeln schütteln, der Aufwand der Umsetzung in HTML und CSS ist meistens gegenüber der Planungsphase relativ gering, der Mehraufwand (den ich bestreiten möchte) hält sich durchaus in Grenzen.

Ich finde toll, dass du zuerst das Werkzeug wählst und daran dann das zu bearbeitende Material aussuchst. Wenn ich nur einen Hammer habe, dann kann ich keine Schrauben mehr benutzen. Manchmal sind Schrauben aber genau das richtige für den Anwendungsfall und dann muss ich auch einen Schraubenzieher benutzen können.

Permanenter Link

Andreas Stephan
am 30.06.2008 - 18:18

Ich dachte wir wären weg von der Polemik :)
Nun reicht es mir aber. Lest ihr alle nicht zu Ende hier?

Der Artikel ist überaus sachlich gehalten. Er zeigt die Probleme auf, zeigt welche Layoutformen diesen eher gerecht werden und verteufelt keinen Weg pauschal.

Ja, stimmt, der Artikel schon, die Kommentare aber nicht.

Jeder der Webkrauts kann flexible, elastische, teilelastische, teilflexible und auch fixe Layouts gleichermaßen aus den Ärmeln schütteln, der Aufwand der Umsetzung in HTML und CSS ist meistens gegenüber der Planungsphase relativ gering, der Mehraufwand (den ich bestreiten möchte) hält sich durchaus in Grenzen.

Und nun werde ICH mal polemisch: Warum hat von den Kommentierenden hier ein Großteil kein flexibles Layout wenn alles so einfach aus dem Ärmel geschüttelt ist?
Echt mal, es ging mir nie darum hier zu sagen dass das eine oder andere besser ist. Es geht darum, dass Resourcen und Anforderungen ein Projekt bestimmen und nicht das Wunschdenken von technikaffinen Webdesignern oder Barrierefreiheitsexperten. Wenn man Glück hat, hat man Auftraggeber, die mit Argumenten zu überzeugen sind - dann darf man sich freuen.

Ich finde toll, dass du zuerst das Werkzeug wählst und daran dann das zu bearbeitende Material aussuchst.

Wann hab ich das wo gesagt?

Mit der Kosten-/Nutzen-Rechnung ist das so eine Sache. Über die Kosten müssen sich Auftraggeber und Auftragnehmer einigen, den Nutzen oder auch den Schaden haben aber die Nutzer und deren Mitspracherrecht geht in Deiner Argumentation nicht ein.

Nö. Stimmt. Ist aber Absicht. Weil der Nutzen eben für 90%+ Nutzer gleich bleibt, an die sich nunmal die meisten Seiten richten. Wenn sich der Page Zoom (in alle Richtungen) weiter etabliert sogar noch deutlich mehr.

Nochmal in groß: ICH FINDE ES GIBT KEIN RICHTIG ODER FALSCH, SONDERN NUR SITUATIONSGEBUNDENE ENTSCHEIDUNGEN. Hoffe, ihr merkt mal was und kommt weg von euren Doktrinen. und wenn: macht wenigstens selber das, was ihr sagt, sonst glaubt euch das nämlich keiner ;)

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 30.06.2008 - 19:34

Ich hab ein elastisches Layout. Aber das ist auch wurscht. Wir können es und es gibt verschiedene Gründe, warum ich ein elastisches und Nils ein fixes Layout hat. Fertig. Ja. Es ist Situationsgebunden. Aber du sagst mit elastischen/flexiblen Layouts ist schwerer umzugehen, was einfach so nicht stimmt.

Wir doktrinieren nicht. Wir haben nur eine Meinung, und die ist, dass flexible/elastische Layouts meist Vorteile haben. Wer uns hier von seiner Meinung überzeugen will bist doch du. Wenn du nur für 90%+ deiner Nutzer Webseiten machst, dann ist das OK für dich und kann angemessen sein.

Lege uns doch nicht Worte, Annahmen oder Dinge in den Mund, die wir nie gesagt haben. Das brauchen wir hier nicht. Worte von anderen verdrehen ist leichter als selbst zu Argumentieren. Wir haben dir nie übel genommen, dass ihr Sixgroups fix gemacht habt, wegen dem Nutzercontent. Hey, kein Problem damit.

(Und wenn eine Bemerkung polemisch war, dann deine, dass die Seite ja („ätschibätsch“) auch fix ist.)

Permanenter Link

Andreas Stephan
am 30.06.2008 - 20:05

ok. ich glaub hier ist alles gesagt ;) Ich schieb die Missverständnisse jetzt mal auf das Medium.
Ich lass mir nur ungern unterschwellig unterstellen, nur weil man sich für ein fixes Layout entscheidet, sei man quasi zu doof für was anderes oder unprofessionell(das steht da oben wirklich).
Wie gesagt: six groups war mal komplett fluid aber es gab gute Gründe das schrittweise umzustellen, was u.a. mit erhöhtem Aufwand in der Umsetzung eines fluid Layouts zu tun hat und einer Reihe an Problemen, die sich daraus ergeben.
So letzte Antwort hier ;) Hat Spaß gemacht.

Permanenter Link

Markus Paul
am 30.06.2008 - 21:48

Ich kann auch nur sagen es ist Situationbezogen!

Hauptaugenmerk: Nutzer und dann Endgerät. Ein Mischprodukt von Webseite was gleichwertig kleine, wie große Auflösungen unterstützen soll wird nie die Qualität erreichen wie ein maßgeschneidertes Produkt.

Bei den Seiten, die die große weite Welt erreichen wollen, ist das statische Layout klar im Vorteil, weil es schon immer da war nur in anderen Medien. Der Umgang damit ist einfacher für den DAU und der DAU kann nicht zoomen. Er kommt und wenn die Seite doof aussieht geht er wieder und auch wenn es daran liegen mag das der Nutzer vorher nur statische Seite kannte und nun vom flexiblen Layout erschreckt wurde. Da wir von den Usern leben, sind wir quasi auch gezwungen das zu machen was die Masse macht.

Aber trotzdem bin ich gespannt wo und wie flexible Layouts ihren Weg machen. Gute Beispiele, wie den Google Kalender gibt es ja.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 01.07.2008 - 01:30

Wie gesagt: six groups war mal komplett fluid aber es gab gute Gründe das schrittweise umzustellen,

was auch niemand hier bestritten hat. Nur die generelle Unterstellung, dass flexible Layouts schwieriger umzusetzen sind, ist nicht richtig.

Es gibt Situationen, in denen ist ein fluides/elastisches Layout schwieriger und dann ist es möglicherweise auch das falsche Werkzeug. Und dann steht es dir natürlich frei ein fixes Layout zu benutzen. Und das mit der Unprofessionalität hast du hineingelesen. Nils sagte nur, dass es einfachere und schwierigere Dinge gibt. und dann liegt es am Ehrgeiz (und natürlich an der Machbarkeit, was in deinem Fall sicher ein Problem ist), ob man „nur“ den Gesellenbrief macht oder den Meister.

Permanenter Link
Ansgar Hein

Ansgar Hein (Autor)
am 01.07.2008 - 12:38

@Andreas:

Nochmal in groß: ICH FINDE ES GIBT KEIN RICHTIG ODER FALSCH, SONDERN NUR SITUATIONSGEBUNDENE ENTSCHEIDUNGEN. Hoffe, ihr merkt mal was und kommt weg von euren Doktrinen.

Das unterschreibe ich Dir. Und unterstreiche es doppelt. Genau darum geht es: Keine Doktrin zu verfolgen, sondern zu verstehen.

@Eric:

Nur die generelle Unterstellung, dass flexible Layouts schwieriger umzusetzen sind, ist nicht richtig.

Auch das ist richtig. Und manchmal ist ein fixes Layout unglaublich komplex umzusetzen.

Fazit: Es gibt kein Fazit. Nur Denkanstöße.

Permanenter Link

GE
am 01.07.2008 - 15:44

Nun will ich mal ein wenig Verwirrung stiften ;-)

Flexibel, liquid, fluid, elastisch, fix ... Gibt es da eigentlich amtliche oder standardbezogene Definitionen?

Ein Layout mit festen Breiten in px ist doch zumindest in einer Richtung flexibel, nämlich nach unten. Wenn ich die Schrift vergrössere, fliesst der Text nach unten weg. Das Thermometer-Prinzip ;-). Ein richtig fixes Layout gibt es doch eigentlich nur im IE, der in px definierte Schriftgrössen nicht vergrössert.

Flexibles Layout, ist das das, was mit "em" für alle Elemente definiert ist? Das ist doch auf die Spitze getriebenes fixes Layout, die Seite sieht immer gleich aus, egal, ob ich die Schrift vergrössere oder den Seitenzoom benutze. Halt nur grösser oder kleiner. Seitenzoom für Browser, die gar keinen Seitenzoom haben.

Liquid, fluid oder elastisch ist klar, keine fixen Breiten, das Erscheinungsbild der Seite ändert sich mit der Bildschirmauflösung. So hat das Internet schon vor der Erfindung der Tabellen im html funktioniert, das Ausgabegerät hat aus dem html ein Layout nach seinem Ermessen gemacht. Also nix neues, aber eben heutzutage komplizierter wegen der Mehrspaltigkeit und sonstigen vielfältigen Layoutmöglichkeiten mit CSS und Bildschirmauflösungen von 200-2000px und mehr in der Breite.

Ich glaube, viele Missverständnisse in solchen Diskussionen entstehen aus unterschiedlichen Auffassungen der Begriffe flexibel, liquid, fluid und elastisch.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 01.07.2008 - 16:12

Gibt es da eigentlich amtliche oder standardbezogene Definitionen?

Amtlich nicht, aber in der einschlägigen Literatur wird man fündig. Letztlich sind natürlich alle Webseiten nach unten „flexibel“ aber das ist nicht damit gemeint (wie bisher allen klar war).

Es gilt:
fixes Layout: Breite in px
elastisches Layout: Breite in em
fluides Layout: Breite in %

Mit der Bildschirmauflösung hat das alles nix zu tun, Pixel in CSS sind geräteunabhängig.

Permanenter Link

GE
am 01.07.2008 - 16:48

Letztlich sind natürlich alle Webseiten nach unten „flexibel“ aber das ist nicht damit gemeint (wie bisher allen klar war).

Naja, Eric, das war auch mir klar, deshalb mein erster Satz mit dem dicken Smiley ;-).

Aber was ist mit "flexibel"? Ist das ein Oberbegriff? Ich habe den Eindruck, dass bei vielen genau diese Unterschiede nicht klar sind, da wird von flexiblem Layout gesprochen, und am Text merkt man, dass liquides (fluides) Layout gemeint ist.

Ist flexibel nun em? Die inhaltliche Bedeutung des Wortes "flexibel" sagt noch nicht viel aus. Das kann em sein oder liquid (fluid), eben beides.

Liquid und fluid ist eindeutig, Flüssigkeiten und Gase breiten sich in Ihren Behältern aus.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 01.07.2008 - 17:54

Flexibel meint wohl einfach nicht-fixe Layouts.

Permanenter Link

GE
am 01.07.2008 - 19:27

Jetzt ist mir auch eine passende Erklärung für elastisches Layout eingefallen:

Wenn sich ein Riese das elastische, gemusterte Shirt eines Zwerges überzieht, wächst auch das Muster mit ;-).

Wir haben also fixe und flexible Layouts, wobei sich die flexiblen Layouts unterteilen in:

- fluid / liquid
- elastisch

Der Begriff "flexibles Layout" taugt also nix für solche Diskussionen, weil zu ungenau. Zumal elastisches Layout in meinen Augen nach wie vor auf die Spitze getriebenes fixes Layout ist, Seitenzoom für alte Browser, das sehe ich nun mal so.

Auf jeden Fall hat diese Diskussion für mich (und ich hoffe, auch für diesen oder jenen anderen) zu mehr Klarheit geführt, das ist doch schon mal was.

Permanenter Link

Rainer
am 01.07.2008 - 22:40

Je mehr Begriffe man hat, desto wichtiger kann man daherkommen ;-)
Aber GE hat es schon ganz gut auf den Punkt gebracht:
1. es ist fix oder flexibel
2. wenn flexibel, dann elastisch oder fluid
Und trotzdem (aber auch das wurde in allen Schattierungen schon gesagt) bleibt alles irgendwie immer subjektiv. Wenn ich mir http://yatil.de/beispiele/fluilastisch/ ansehe und vorstelle, dass ein stark Sehbehinderter eine Auflösung von 640er Breite mit Schriftvergrößerung nutzt, dann wird das ganz schön anstrengend. Und das Problem mit (in der Regel unerwünschten) Bildskalierungen lässt sich auch nur ansatzweise durch entsprechendes Design lösen.
Allen Leuten Recht getan ist eine Kunst, die niemand kann.

Permanenter Link
Ansgar Hein

Ansgar Hein (Autor)
am 02.07.2008 - 09:10

Allen Leuten Recht getan ist eine Kunst, die niemand kann.

Wundervoll. Können wir die Diskussion jetzt hier bitte mit diesem Satz schließen? Schöner wird's nimmer.

Permanenter Link

Markus Gans
am 05.07.2008 - 01:03

Eigentlich lassen sich fixe Layouts doch recht einfach in elastische Layouts umwandeln:

EM-Width = Pixel-Width / 13px

Und nun die Extrawurst für den IE:

IE-Width = EM-Width * 0.9759

Permanenter Link

Jens Grochtdreis
am 06.07.2008 - 18:39

@Markus Gans: Wie kommst Du auf 13px? Die Basisschriftgröße aller gängiger Browser ist - wenn man sie nicht ändert - 16px.

Permanenter Link

Markus Gans
am 06.07.2008 - 20:53

@Jens Grochtdreis:
Ich bin da nicht von selbst drauf gekommen, sondern hab das in einem Tutorial von Yahoo gefunden.

Quelle:
http://developer.yahoo.com/yui/grids/
(Kurz vor Schluß (38min,13sec) des Videos kommt die Formel zur Berechnung der EM-Width)

Dennoch glaube ich Deine verwirrtheit zwischen 16px und 13px auflösen zu können: Im Browser stellt man immer nur die Zeichenhöhe ein. Da ein Zeichen nicht Quadratisch ist, weist es ein geringere Breite gegenüber seiner Höhe auf. Daher ist vermutlich die zur Zeichenhöhe 16 (sind das eigentlich px oder pt) gehörende Breite immer 13px.

Auf jeden Fall habe ich es mit "body { font-size: small; }" ausgetestet...
...und es Funktioniert hervorragend.

Im IE6 natürlich mit "x-small". ;-)

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 06.07.2008 - 21:03

Markus: Dann ist dir sicherlich auch aufgefallen, dass in dem Yahoo-Video das YUI-Framework benutzt wird, das die Schriftgröße auf 13px festlegt. Wenn ja, dann ist’s ja gut.

EM bezeichnet die Zeichenhöhe, 1 EM sind standardmäßig 16px, es sei denn das Browserstylesheet (oder der Nutzer per Stylesheet oder Textvergrößerung) gibt anderes vor. Die Zeichenbreite hat damit nichts zu tun.

small ist keine sinnvolle Angabe, weil sich das auf nichts bezieht und es auch keine Vorgabe gibt wie groß small sein soll. Deshalb musst du für den IE6 einen Hack benutzen, was nicht sehr elegant ist.

Permanenter Link

Markus Gans
am 06.07.2008 - 21:42

@Eric Eggert: Was würdest Du mir denn empfehlen statt small zu nutzen? Feste 13px würden auf jeden Fall die Browsereinstellungen des Benutzers ignorieren.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 07.07.2008 - 06:56

@Markus: 13px = 0.8125*16px, also entweder 81.25% oder 0.8125em im Body

Yahoo! macht es noch ein bisschen anders, benutzt für IE6/7 small (der Trick mit x-small scheint nur im Quirksmodus nötig zu sein, und den vermeiden wir ja gerne)
siehe http://yui.yahooapis.com/2.5.2/build/fonts/fonts.css

Permanenter Link

Markus Gans
am 07.07.2008 - 07:28

@Eric Eggert: Besten Dank, da lernt man doch nie aus. :-)

Ich hab schon aus Gewohnheit immer small im Body genutzt und war fest im Glauben, dass small einhundert Prozent entspricht.

Permanenter Link

mcnesium
am 08.07.2008 - 15:03

nach dem lesen dieses artikels hab ich sofort firefox 3 disable zoom feature in die google suchleiste eingegeben. auf die schnelle hab ich aber nichts brauchbares finden können. aber schon der nächste versuch war erfolgreich. vermutlich schaut der google bot hier auch ab und zu mal vorbei, darum möchte ich verkünden, dass man die full-site zoom funktion des firefox 3 abschalten kann, indem man about:config in die adressleiste eingibt und dann die eigenschaft browser.zoom.full auf false setzt... :)

Permanenter Link

mcnesium
am 08.07.2008 - 15:19

zum thema px in em umrechnen kann ich auch noch einen löffel senf dazugeben, den ich im quellcode von wordpress 2.irgendwas mal entdeckt hab und der vielen lesern hier sicherlich nicht unbekannt ist: wenn man im stylesheet dem html element die eigenschaft font-size: 62.5%; zuweist, wird (vorausgesetzt, die standardschriftgröße im browser ist auf 16px gestellt) die größe 1em gleich 10px. das lässt sich dann leichter rechnen, wenn man zb eine 788px breite headergrafik skalierbar machen möchte: man gibt ihr einfach die eigenschaft width: 78.8em; :)

Permanenter Link

Frank
am 08.07.2008 - 20:19

Nach Lesen des Artikels und der zahlreichen Kommentare werfen sich für mich als Laien und Otto-Normal-Wordpressuser schon einige Fragen auf...

Wie groß in em muss ein ein Bild bzw. vorher in px sein, um bei 1000% (ok, 300% zoom sind schon ausreichend) zoom noch annähernd ansehnlich zu sein?

Ein neuer Trend bei ISP scheint die Begrenzung der Dateigröße beim Upload von von Bildern z. B. mit Wordpressbordmitteln zu sein... Wie soll Otto-Normalblogger das umgehen, außer mit für ihn komplizierten FTP-Uploads und px/em-Berechnungen für die automatische thumbnailproduktion der gd-LIB oder ähnlicher Serverprozesse...?

Ich war auch mal stolz auf mein auf flexibel (oder doch eher fluid angepasstes Wordpresstheme...

Wenn die Browser
jetzt eh alles bildmäßig skalieren, sei diese Arbeit wohl umsonst, fand ich beim Lesen der Veröffentlichungen um die "revolutionären" Zoomfunktionen der neuen Browser...

step-by-step-Anleitungen dazu gibt es bei den webkrauts leider noch nicht. Nicht mal bei den ausgewiesenen Accessibility-Gurus die hier weiter oben schreiben und kommentieren...

Ein Schelm, wer Böses dabei denkt: Es bleibt sicher "Herrschaftswissen". Ist auch verständlich. Warum sollen nur (manchmal nur selbstbenannte) Webdesigner, die nur fixe Layouts anbieten, Geld verdienen. ;)

Permanenter Link

Gerhard
am 15.07.2008 - 08:44

ich verkünden, dass man die full-site zoom funktion des firefox 3 abschalten kann, indem man about:config in die adressleiste eingibt und dann die eigenschaft browser.zoom.full auf false setzt… :)

Dann mach' es. Allerdings findet sich eine entsprechende Funktion auch im Menü.

Wie groß in em muss ein ein Bild bzw. vorher in px sein, um bei 1000% (ok, 300% zoom sind schon ausreichend) zoom noch annähernd ansehnlich zu sein?

Bilder wirken in vielen Browsern bereits schwammig wenn ihre Größe mangels halber Pixel gerundet wird.

Permanenter Link

Frank
am 20.07.2008 - 12:58

Bilder wirken in vielen Browsern bereits schwammig wenn ihre Größe mangels halber Pixel gerundet wird.


Eben...!

...und dann bedenke man noch die unterschiedliche Qualität/und Auflösung der Ausgabegeräte, alleine bei besseren und schlechteren Flachbildschirmen...

Permanenter Link

Die Kommentare sind geschlossen.