dynamisches Seitenlayout: Problem Grafiken

[hokage555]

Hi Leute,

Ich wollte mich nach der besten Möglichkeit erkundigen, Grafiken in ein dynamisches Seitenlayout einzubinden. Denn gebe ich (vor allem großen Grafiken) die Einheit %, fängt das Bild an sich zu verkleinern und das möchte ich ja im Grunde nicht. Der ormale Inhalt schrumpft ja nur auf der X-Achse zusammen. Bei einem Bild wäre das ja nicht so hilfreich. Und wenn dem Bild gar nichts passiert, und ich verwende Pixelangaben, dann ist es ja nicht mehr dynamisch und widerspricht somit dem restlichen Layout.
Da ich denke, dass das gleiche Problem auch bei SVG besteht, abgesehen davon, dass beim skalieren kein Qualitätsverlust entsteht, würde ich gerne wissen, wie die Pros unter euch dieses Problem lösen.
Wie kann man mit dynamischen Layouts also eine hübsche Seite mit Grafiken erstellen? Auch wenn es viel Aufwand benötigt, würde ich gerne wissen, wie man so etwas umsetzt
Denn ich habe schon öfter gehört, dass es sehr aufwendig, aber machbar ist.

Ach und ich wuerde mich wirklich freuen, wenn einer einen Beispiellink zu so einer Seite posten könnte, denn aus dem Quellcode lassen sich doch recht viele Informationen entnehmen.

Abschließend noch eine Frage zu den svg-Grafiken. In Anbetracht der aktuellen Browsersituation, würdet ihr zu Vektorgrafiken raten? Denn mit Illustrator kann man da ja echt schöne Sachen zaubern und die restlichen Vorteile liegen auf der Hand.

Danke schonmal für eure Hilfe!

grüße hokage

 

[mermshaus]

Na ja, grundsätzlich ist es relativ einfach. Wenn du nicht möchtest, dass sich das Bild dynamisch mitverkleinert, kannst du keine prozentuale Angabe verwenden. -- Okay, ernsthaft: max-width: 60%; oder so wäre vielleicht eine Möglichkeit, habe ich aber nie ausprobiert. Im Grunde ist es, wie man bei dir zwischen den Zeilen ja auch rausliest, schwierig, einem pixelbasierten Bild eine relative Größe zu verleihen. Wählt man ein zu kleines Bild, wird es verpixelt dargestellt. Wählt man ein zu großes Bild, verschenkt man permanent Bandbreite. Ich glaube nicht, dass es für dieses Problem eine optimale Lösung gibt. Aber ich glaube auch nicht, dass der Punkt so wesentlich ist. Absolute Pixelangaben dürften allgemein schon für ein akzeptables Ergebnis sorgen (und wenn auch nur aus dem Grund, weil das Restinternet es auch nicht schlauer hinbekommt). Das Hantieren mit min-width oder max-width ist zwar sicherlich eine löbliche Idee, aber wahrscheinlich auch nicht immer umsetzbar.

Ich sehe übrigens den Widerspruch zwischen einem dynamischen Layout und "statischen" Pixelangaben nicht. Im Grunde ist es doch auch diese Flexibilität in den Verhältnissen, die ein dynamisches Layout auszeichnet. Na ja, wie gesagt: Mit min-width und max-width lässt sich da vielleicht was machen.

Zu SVG gibt es recht pessimistische Meinungen. Fakt ist, dass SVG -- na ja, zumindest meinem Eindruck nach -- im Web quasi nicht stattfindet. (Ich denke mal wegen der schwachen Unterstützung durch diverse Browser.) Außerdem ist SVG kein Format, das sich für Fotos eignet, sein Einsatzgebiet ist mehr oder weniger auf Dekorationen begrenzt. SVG-Grafiken lassen sich jedoch wunderbar als beliebig große Bitmap-Grafiken rendern, weshalb es kein Nachteil ist, mit ihnen zu arbeiten, selbst wenn sie (noch) nicht als Vektorgrafik im fertigen Produkt eingesetzt werden sollten.

Im Endeffekt läuft es wohl wie so oft darauf hinaus: Es gilt die Techniken zu nutzen, die in Browsern am besten funktionieren. SVG zählt derzeit wohl nicht dazu.

PS: Entschuldige, dass dieser Post etwas schwammig klingt, aber umgekehrt wäre vielleicht ein Anwendungsbeispiel für Grafiken mit relativer Größe ganz hilfreich. Klar, im Grunde könnte jede Grafik in etlichen Megapixeln eingebunden werden, um verlustfreies Zoomen zu ermöglichen. Aber so weit ist das Internet einfach noch nicht. Ich bin gespannt auf weitere Anworten. :)

 

[Efchen]

Wenn es echt dynamisch sein soll, bleibt eigentlich nur der Griff zu SVG. Über das Thema gabs innerhalb des letzten Jahres mal einen ausführlichen Thread hier dazu, wo alles drinstehen sollte, was Du wissen willst.

Ohne SVG ist es ein Gebastel voll von Kompromissen. Aber IMHO ist das die Arbeit als Webmaster ohnehin schon.

 

[hokage555]

Danke fuer eure beiden Beiträge:
Ich werde also mal etwas spezifischer und gebe euch ein Beispiel. Ihr könnt mir dann bestimmt sagen, wie ich das am besten lösen kann. Noch kurz ein Satz zu SVG:
Nicht dass ich zu so etwas fähig wäre, aber wie man hier sieht, hat man auch mit Vektorgraphiken immense Möglichkeiten ;-)

The World's Most Photorealistic Vector Art - Basang Panaginip

Und allgemein denke ich, spricht auch nichts gegen SVG, denn man kann ja immer ein alternatives img mit gleichem Inhalt angeben (für den Fall, dass SVG beim Anwender nicht unterstützt wird).

Ich habe übrigens noch eine Frage: Wenn ich in einer horizontalen Navigation Hintergrundgrafiken verwende. Sollte ich dann lieber Höhe und Breite des Bildes und des Links in % angeben, oder beides in em. Ich würde ja eher zu letzterem tendieren, denn so verkleinert sich meine Navigation nicht aufs unleserliche, wenn ich mein Browserfenster verkleinere. Bei % würde es ja genau das tun, bei em würde es die einzelnen Listenpunkte bei Platzmangel nur in die nächste Zeile schieben. Was würdet ihr hier preferieren? Da em, auch wenn es besser als px ist, eine doch recht statische Größe ist (zumindest im Vergleich zu %), könnte ich mir vorstellen, dass ein Nutzer mit einem 30'' Display (Auflösung 25xx * 19xx) mit voll maximiertem Viewport mehr Freude an einem Menü in % hätte. Würde er seinen Viewport jetzt allerdings wieder stark verkleinern wäre em wohl besser. Das Problem bei den Bildern ist halt (und in meinen Augen besteht das Problem selbst bei SVG), dass man sie in Höhe und Breite skalieren muss (bei %). Nur das SVG halt ohne Qualitätsverlusst skaliert.
Wie würdet ihr das also lösen?

In meinen Augen viel problematischer ist aber folgendes:
Ich habe eine Vektorgrafik mit den Ausgangsmaßen 1000px * 200px. Diese Grafik möchte ich jetzt als Header auf meiner Seite einbinden. Wie gestallte ich das jetzt dynamisch? Einzige Möglichkeit wäre hier wohl %. Aber dann verkleinert sich der Header ja auch wieder beim verkleinert des Browserfensters. Und dann kann man ihn je nach Viewportgröße erstens nicht mehr wirklich erkennen (SVG hin oder her) und zweitens stimmt das Größenverhältnis mit dem restlichen Inhalt nicht mehr überein (denn dieser skaliert ja nur auf der x-Achse).
Ist es also überhaupt möglich, sinnvoll so eine große Grafik in ein dynamisches Layout einzubauen. Vll. habe ich SVG ja auch noch nicht richtig durchblickt, aber bisher haben alle meine Vektorgrafiken, wie oben beschrieben reagiert, im Grunde also nicht anders, als ein normales jpg Bild.

Wie würdet ihr dann also einen ansprechenden Header in einem dynamischen Layout gestallten? Will heißen, dass ihr für den Header Grafiken verwendet, denn ohne gäbe es ja die Probleme nicht^^

Danke euch beiden für eure Hilfe

grüße hokage

 

[Efchen]

Da em, auch wenn es besser als px ist, eine doch recht statische Größe ist (zumindest im Vergleich zu %),

em oder % sind letztendlich gleich und alles andere als statisch. Das eine orientiert sich am Viewport, das andere an der Schriftgröße. Damit erzeugen beide bei unterschiedlichen Nutzer auch durchaus mal unterschiedliche Ansichten. "besser" ist keines, ideal wäre eine Mischung aus beiden, dazu eine breite Unterstützung von min-/max-Größen.

könnte ich mir vorstellen, dass ein Nutzer mit einem 30'' Display (Auflösung 25xx * 19xx) mit voll maximiertem Viewport mehr Freude an einem Menü in % hätte.

Kann ich mir nun gar nicht vorstellen, wenn das Menü bei einem so großen Viewport trotzdem noch ein Drittel der Seite einnehmen würde.

Würde er seinen Viewport jetzt allerdings wieder stark verkleinern wäre em wohl besser.

In dem Fall würde ich bei beidem "em" als die bessere Wahl ansehen. Wenn min/max jetzt in allen gängigen Browsern richtig unterstützt werden würde, könnte man da eine Grenze mit "%" einbauen, das wäre wohl ideal.

Wie würdet ihr dann also einen ansprechenden Header in einem dynamischen Layout gestallten? Will heißen, dass ihr für den Header Grafiken verwendet, denn ohne gäbe es ja die Probleme nicht

Ich kann eh keine ansprechenden Header erzeugen ;-) aber eine gute Idee ist wohl, wenn der Header relativ schmal ist, dass er auch bei kleinen Viewports (fast) vollständig zu sehen ist, ist das Element breiter, sollte dahinter eine Hintergrundfarbe hervorgucken, die auch am Rand des Images vorherrscht.

 

[mermshaus]

Ich hatte jetzt keine Lust, das selbst zu testen, aber es steht bei Wikipedia so ziemlich überall, dass der IE <= Version 8 nativ kein SVG rendern kann.

Irgendwie ist mir die Diskussion ohne wirklich konkrete Beispiele (im Sinne bestehender Layout-Entwürfe) zu abstrakt und ergebnisoffen. Es gibt nicht erst seit gestern dynamische Layouts.

Ich verstehe nicht, welches Problem du zu lösen versuchst, hokage.

 

[hokage555]

Zum IE und SVG:

Ich sagte doch schon, dass man bei keiner SVG Unterstützung Alternativbilder (jpg) laden kann.


Dann zeige mir doch bitte mal eine Website, die ein dynamisches Layout einbindet und dabei große Grafiken (z.B. Headergrafik) verwendet? Ich hab solche Seiten noch nicht gesehen. Alle dynamischen Websiten, die ich gesehen habe, hatten alle sehr kleine Grafiken in der Verwendung, die man nicht rastern braucht. Oder aber es wurde mit position:repeat; und irgendwelchen Verläufen und Kachelhintergründen gearbeitet.

Meine Frage, oder mein Problem ist also, dass ich keine wirklich gute Möglichkeit sehe, große Grafiken in ein dynamisches Layout einzubauen. Nichts anderes habe ich aber in meinem letzten Beitrag indirekt gefragt.

Und Layoutentwürfe habe ich noch nicht, da ich in kein Photoshop Pro bin und so etwas bei mir immer Zeit und vor allem Geduld braucht, bis irgendetwas bei rauskommt. Ich bin aber schon am basteln und die Idee habe ich auch. Nur an der Umsetzung in PS cs4 hapert es halt.

Ich denke aber, dass man meine Frage auch allgemein beantworten kann, oder liege ich da so falsch?

grüße

 

[Efchen]

Irgendwie ist mir die Diskussion ohne wirklich konkrete Beispiele (im Sinne bestehender Layout-Entwürfe) zu abstrakt und ergebnisoffen.

In dem von mir erwähnten Thread hier hat jemand ein Menü mit SVG erstellt, da waren auch Links dabei.

 

[mermshaus]

Ja, gut. Man kann Alternativbilder für SVGs angeben. Ich habe das mit der Unterstützung im IE nur noch mal erwähnt, da es hier so rüberkam, als wäre es kein Problem, SVGs zu verwenden. Das wollte ich etwas relativieren. (Womit ich übrigens niemanden davon abhalten möchte, es zu probieren. Eigentlich eher im Gegenteil. Ich mag SVG, ich bin aber auch pragmatisch.)

Was die Header angeht: Ja, es gibt die Möglichkeiten, zu kacheln, einzelne Bilder gegeneinander zu verschieben oder Grafiken gegen die Hintergrundfarbe auslaufen zu lassen (auch große). Zudem gibt es noch riesige bildschirmfüllende Grafiken, die den Bildschirm aber leider nicht immer füllen. Oder eben die Möglichkeit, eine 3000x200 px große Grafik zu definieren, von der normalerweise nur ca. ein Drittel zu sehen ist. Dass sich max-width und min-width bei sowas gut machen, hatten wir ja schon.

Warum sich eine 1000x200 px Vektorgrafik im Endeffekt nicht anders verhält als eine (oder eine Gruppe von) Rastergrafiken (nur eben bei gleichbleibender Auflösung), hast du dir ja eigentlich schon selbst beantwortet. Viewports haben eben nicht immer das gleiche Seitenverhältnis, weshalb eine solche Grafik im Header zwangsläufig abgeschnitten, gestaucht oder zusammengeschoben (hinsichtlich verschiedener "auf ihr" enthaltener Objekte) werden muss, wenn sie nicht ab einer gewissen Breite den gesamten Viewport ausfüllen soll (bei Beibehaltung des Seitenverhältnisses).

Wie man dabei konkret vorgeht, hängt wohl vom Einzelfall ab.

Meine Frage, oder mein Problem ist also, dass ich keine wirklich gute Möglichkeit sehe, große Grafiken in ein dynamisches Layout einzubauen.

Und genau deshalb bleibt es für mich eine Metadiskussion. In deinen Posts ging es schon um Hintergründe für Menügrafiken und um durchgängige (?) Headergrafiken. Das sind für mich schon mal zwei verschiedene, sehr vage formulierte Dinge. Dazu gäbe es noch Fotos im Fließtext, Diagramme im Fließtext, Grafiken, die selbst Text enthalten, bildschirmfüllende Grafiken in x- oder y-Richtung (oder beiden), Grafiken, die Inhalt tragen, Grafiken, die keinen Inhalt tragen, Grafiken, die auch als Thumbnail dargestellt werden könnten, Grafik, die ruhig skaliert werden dürfen, Grafiken, die auf keinen Fall skaliert werden dürfen, Grafiken die sich überlappen können, Grafiken, die sich auf keinen Fall überlappen dürfen, Grafiken, die nicht unbedingt sichtbar sein müssen und und und.

Das liest sich für mich einfach wie: "Meine Grafik passt nicht in mein Layout. Was kann ich tun?"

Dazu kam die Frage auf, ob Prozentwerte oder em. -- Kommt ganz drauf an.

Ein kurzer Hinweis noch auf nicht-grafische Elemente, also auf Text. Niemand liest gerne einen halben Meter breite Spalten und niemand liest gerne Spalten, die so eng zusammengeschoben sind, dass sie nur noch vier Wörter pro Zeile enthalten. Da stellen sich noch ganz andere Fragen, wenn du überlegst, für Viewportbreiten von 300 oder 3000 px zu designen. (Webdesign ist schon irgendeine die Summe seiner Kompromisse.)

iA: Web Design is 95% Typography

Und aus all diesen Gründe glaube ich nicht, dass man deine Frage allgemein beantworten kann.

PS: Falls mein vorheriger Post (oder dieser) zu schroff klingen: Ich versuche bloß, einen Standpunkt darzulegen und bin etwas sparsam mit den Smileys. :)

@Efchen: Ja, dass man Dinge mit SVG machen kann, will ich nicht bestreiten.

 

[hokage555]

@Efchen: Ja Fiedels Seite kenne ich und sein SVG Menü habe ich mir auch schon zu Gemüte geführt.

Ok, dann beenden wir das jetzt mal an dieser Stelle und wenn ich meinen Layoutentwurf fertig habe, kann ich diesen im Showcase ja posten und dann, sollte ich Fragen haben, noch einmal explezit nachfragen.

Ansonsten danke für eure Hilfe ;-)

grüße