Automatische Anpassung einer Homepage an die Auflösung

[Kai]

Liebe Community..
Ich habe eine Homepage gemacht und die mit der Auflösung 1280*1024 erstellt.. wie kann man die jetzt an jede Auflösung anpassen? Also wie kann sich die Homepage alleine an die Auflösung anpassen?..

Könnt mich auch gerne über Email kontaktieren.. :)..

gruß..

Kai

[Gernot Back]

Hallo Kai,

Ich habe eine Homepage gemacht und die mit der Auflösung 1280*1024 erstellt.. wie kann man die jetzt an jede Auflösung anpassen? Also wie kann sich die Homepage alleine an die Auflösung anpassen?..

Indem du sie von vornherein für alle denkbaren "Bildschimauflösungen" oder richtiger "Fenstergrößen" baust, größenmäßig alles schön in % und em definiert und nichts in Pixeln.

Also noch mal von vorne anfangen getreu dem Motto Meister ich bin fertig, darf ich trennen?

Gruß Gernot

[Kai]

Und wie macht man das alles dann mit Bildern?.. Ich arbeite mit divs und da habe ich das immer in %.. aber wie geht das mit den Bildern?..

Gruß Kai

[Gernot Back]

Hallo Kai,

Und wie macht man das alles dann mit Bildern?.. Ich arbeite mit divs und da habe ich das immer in %.. aber wie geht das mit den Bildern?..

Bilder mit HTML bzw. CSS zu skalieren ist wirklich unschön, da wird es leicht pixelig, da muss man dann Kompromisse machen.

Dass man mit solchen Kompromissen dennoch Preise gewinnen kann, zeigt der
Auftritt der Barmer Ersatzkasse.

Da haben die Bilder grundsätzlich eine Weite von 100% bezogen auf das umgebende Blockelement und keine explizite Höhe, was sie dann -wenn auch pixelig-schwammig- proportional skaliert.

Gruß Gernot

[Kai]

Aber ich habe ja die Grafiken für 1280*1024 optimiert.. und wenn sie kleiner werden, verpixeln sie ja nicht.. oder doch?..

[Der Martin]

Hallo,

Aber ich habe ja die Grafiken für 1280*1024 optimiert

was heißt "optimiert" in diesem Fall? Auch wenn ich ein flexibles Layout mache, bin ich normalerweise bestrebt, die Grafiken _nicht_ zu skalieren. Wenn sich die Größe des Browserfensters ändert, rücken sie einfach dichter zusammen oder weiter auseinander, und die Flächen dazwischen oder die Textbereiche werden dabei größer oder kleiner. Das geht natürlich nur so weit, bis die Textboxen ein gewisses Mindestmaß erreicht haben, das sich nicht weiter stauchen lässt. Diese Mindestgrößen kann man mit min-width bzw. min-height festlegen (in diesem Fall vorzugsweise in em, nicht in px). Verkleinert man das Fenster weiter, erscheinen entweder Scrollbalken, weil das Layout nicht weiter nachgibt, oder Blöcke, die bei ausreichender Breite nebeneinander stehen sollen, rutschen dann untereinander. Das kann man bespielsweise durch Floaten der Bereiche hinkriegen.

Egal wie - das Layout sollte so locker gestaltet sein, dass es "Reserven" zum Verkleinern oder Dehnzonen zum Vergrößern bietet.

und wenn sie kleiner werden, verpixeln sie ja nicht.. oder doch?

Oder doch.  ;-)
Das ist ein grundsätzliches Problem beim Skalieren von Grafiken, und es ist nahezu unabhängig davon, ob man sie vergrößert oder verkleinert. Wass soll denn ein Skalierungsalgorithmus tun, wenn er die Information von 4 Pixeln auf 3 Pixel reduzieren muss? Aus WWBW (Abstraktion: W=white, B=black) wird beispielsweise WBW, dann verschiebt sich die Geometrie ein bisschen, die Farben bleiben aber rein. Oder es wird zu WGG (G=gray), wenn man die Pixel des neuen Bildes als gewichtete Mittelwerte der ursprünglichen Pixel berechnet. Dann stimmt zwar die Geometrie, aber die Farben an den Konturen verwischen ein bisschen.

Tatsächlich sind gut gemachte Algorithmen eine Mischung aus beiden. Um ein gutes Ergebnis zu erzielen, muss man das Original-Bildmaterial analysieren und beispielsweise Kanten, gleichfarbige Flächen oder fließende Übergänge erkennen und je nach Situation unterschiedlich behandeln.
Viele Grafikprogramme haben solche relativ aufwendigen Algorithmen, die Rendering Engines der Browser eher nicht. Deswegen wird generell empfohlen, Bilder bereits im Grafikprogramm auf die Größe zu bringen, die sie auf der Webseite haben sollen, anstatt die Skalierung dem Browser zu überlassen.

So long,
 Martin