Pixelgrafiken und ?

[Kipperlenny]

Moin

Ich habe mir gerade mal wieder was zu Webseiten Layouts durchgelesen (Auf bestimmte Auflösungen optimieren / sich selbst anpassende Layouts).
Darin stand, dass das Problem bei fließenden Laouts wäre, dass oft mit "Pixelgrafiken" gearbeitet wird, da diese dann pixelig aussehen bei großen Auflösungen (das Problem kenne ich schon).

Nun meine Frage - was ist denn die alternative zu Pixelgrafiken? Welche Dateiformate sind das und mit welchen (Open Source) Programmen lassen sich diese erstellen?

mfg
lenny

 

[Ex1tus]

Hi,

1. Vektorgrafiken.
2. *.eps, *.svg
3. Puh, Inkscape vielleicht? Goggel das mal.

Können Browser überhaupt Vektorgrafiken darstellen? google

fg
Ex1tus

 

[Markus Kolletzky]

Hi,

Können Browser überhaupt Vektorgrafiken darstellen?

Ja, das von dir angesprochene *.svg-Format kann von allen gängigen
modernen Browsern (zur Not mit einem Plug-In) dargestellt werden.

Grüße

 

[Kipperlenny]

ist es also sinnvoll, buttons, banner und hintergrundgrafiken im svg Format auf Webseiten zu nutzen die ein fließendes Layout haben?

Oder haben svg Datein eine zu große Dateigröße?

 

[Markus Kolletzky]

Hallo,

Ich tu mich irgendwie schwer mit dem Begriff "fließendes Layout".
Eh ich irgendetwas falsches erzähle - kannst Du nochmal genau
erklären, was Du damit meinst und ggf. ein Beispiel bringen?

Ansonsten würde ich auf *.svg als Bildformat auf Webseiten verzichten,
da sie sich noch nicht wirklich als Standard durchgesetzt haben und
dazu u.a. noch umständlich einzubinden sind (vgl. hierzu SVG FAQ).

Grüße

 

[Kipperlenny]

Hier mal eine "Konzept-Studie" von mir

fließendes Layout:
http://aks49-schluessel.de/index4.php

statische Site:
http://aks49-schluessel.de/

gleicher Inhalt, unterschiedliche Styles, das Statische ist auf 800*600 Bildschirmen (maximierter Browser, keine Sidebars) ohne großes Scrollen zu sehen. Die Seite mir dem fließenden Layout ist in jedem Browserfenster bei jeder Auflösung unter guter Ausnutzung des vorhandenen Platzes vollständig ohne Scrollen zu sehen (bis auf den Inhalt, aber irgendwo muss der Inhalt ja rein *g*). Das das fließende Layout nur ein Test war, ist die Seite nicht perfekt, divs verschieben sich also manchmal noch übereinander.

Das Problem ist halt nun, dass die Hintergrundgrafik (der helle Kasten) und die Buttons "Pixelgrafiken" sind (png/jpg) und deswegen verzerrt werden (bei eigentlich jeder Auflösung, mal mehr mal weniger). Wodurch sie eigentlich immer pixelig oder ausgefranzt aussehen.

Dieses Problem würde ich gerne mit einem anderen Grafikformat umgehen, deswegen dieser Thread.

 

[Markus Kolletzky]

Ah, jetzt verstehe ich. Danke für die Erklärung.

Davon abgesehen, dass die Buttons eigentlich wunderbar gleichmäßig skaliert werden
(Browser: Firefox), denke ich, dass man bei dem Hintergrund nicht viel machen kann.

Das Einzige, was mir dazu einfällt, wäre das Ganze mit sich wiederholenden Grafiken
zu realisieren und ggf. verwendete Schriften im flexiblen Format anzugeben.

Ich schiebe den Thread mal prophylaktisch in die HTML-Ecke - dort ist die Kompetenz
bzgl. Web sicher höher als hier im 2D-Bereich.

Viel Erfolg und liebe Grüße
Markus

 

[Kipperlenny]

Ursprünglich hatte ich den Thread in "Grafik FAQ" eröffnet

Die Inhaltsbox schiebt sich hinter die Buttons bei einer zu geringen Browser Höhe (die aber eh keiner hat, da man dann nichts mehr vom Browserfenster sieht...).

Mir geht es ja darum das ganze zu perfektionieren, da ich kein Fan von Seiten bin die auf eine bestimmte Auflösung optimiert sind.

Die Schriftart/Größe des Inhaltes könnte ich natürlich flexibel gestalten, allerdings wird der Inhalt und damit auch die Schriftgröße über ein Mini CMS (selbst gebaut + spaw2 Editor) vom Kunden selbst gesteuert und eingegeben/formatiert.

Allerdings kommt es mir auch eher auf die Buttons an, die Schrift der Buttons wirkt einfach nicht so schön glatt wie bei den original Bildern, da sie mit Prozentangaben versehen sind und so nie die Original Größe haben - das hoffe ich ja mit anderen Grafikformaten umgehen zu können. Auf das Hintergrundbild wäre das dann ja Analog anzuwenden (da es ja ein Bild 100%*100% in einem Divs ist und kein bg-image des bodys).

Im Internet Explorer 7 übrigens muss ich auch die Höhe der Bilder angeben, sie können also bei verschiedenen Fenstergrößen plötzlich höher als breiter sein. Im IE 6 habe ich solche Probleme nicht, der Opera ist ja eh sehr genügsam.