[Fighting Faith]

http://prntscr.com/aconhc

Da sieht man (recht schwach) das Problem.

Normalerweise ist der Hintergrund unten ein Bild, welches nachher in das Hellblau übergeht. Leider wird beim responsive Skalieren der PNG ein weißer Rand gegeben, den ich partout nicht loswerde. Die Grafik ist PNG, getestet auch in max. Bitzahl etc. Die Alpha in Photoshop ist 1a, es liegt wirklich am Skalieren in Firefox, Chrom, IE etc...

Gibt es dafür irgendeine Lösung, Google ist leider nicht sehr hilfreich.

[Whiz-zarD]

Hallo,

Sieht mir sehr nach einer Rundungsdifferenz aus. Das kann passieren, wenn Vektorgrafiken gerastert werden und die Vektor-Koordinaten nicht korrekt einen Pixel zugeordnet werden können.

Was genau versuchst du dort? Für mich sieht es erst mal nicht so ganz sinnvoll aus, was du da tust, wenn sowieso alles die selbe Farbe hat.

[Fighting Faith]

http://prntscr.com/acp2b9

Das ganze gehört zu einem Overlay unter dem das Bild später automatisch oben die Rundung bekommt und damit nicht extra bearbeitet werden muss. Da die Seite aber responsive sein muss wird das Element skaliert. Die PNG Grafik ist fehlerfrei, aber die browserseitige Skalierung ist... zerstörend.

[Whiz-zarD]

Ein Responsive Webdesign bekommst du aber nicht ordentlich mit Rastergrafiken hin
Was passiert denn, wenn der Bildschirm keine horizontale, sondern eine vertikale Ausrichtung hat? Beispielsweise ich kippe mein Smartphone? Ein korrektes Responsive Webdesign reagiert darauf und passt das Design an. Bei dir kann dies aber nicht der Fall sein, da die Formen, die du gewählt hast, verzerrt aussehen würden. Also ist die Breite deines Designs festgelegt und das darf beim Responsive Webdesign nicht passieren. Du müsstest dann ja für jede unterstützte Auflösung und Ausrichtung eine einge Rastergrafik anlegen, damit die Biegung stimmt.

Um dir das Leben zu erleichtert, solltest du mit so wenig Rastergrafiken, wie möglich arbeiten. Also ich würde dir empfehlen, das Design so zu überdenken, sodass du ohne Rastergrafiken auskommst. Responsive Webdesign heißt ja nicht, dass man einfach das Layout in die Mitte des Bildschirmes setzt, sondern dass man den Platz des Bildschirmes sinnvoll nutzt. Bei deinem Design ist man aber schon vom Seitenverhältnis des Headers eingeschränkt.

Zu deinem Problem:
Ich vermute mal, dass dort bei der Skalierung Rundunsdifferenzen auftreten und du deshalb den weißen Rahmen hast.

[Fighting Faith]

Die Rundung darf ruhig flacher sein, das ist alles kein Problem. Die Seite geht damit auch super im Responsive momentan mit Anpassungen, nur die Grafik regt mich auf.

Und er Platz wird perfekt genutzt durch verschiedene Breakpoints etc. in Auflösungen, Mobile, Tablet etc. Am Ende muss das passieren was der Kunde sich wünscht, wenn es heißt "ich brauch ne Rundung oben" dann soll da eine sein. Ist ja auch nicht "nicht machbar". Und im Handy fällt z.B. Rundung weg, da der Titel dann auch ne ganze Zeile bekommt für lesbarkeit etc. auf schmalen/kleinen Geräten.

[Kellendil]

Was spricht denn gegen Vektorgrafik / SVG ?
- kleinerere Dateigröße
- nie verpixelt, problemlos streck-/transformierbar, vergrößerbar/zoombar
- Farbe im CSS definierbar & animierbar

Das wäre doch perfekt für diesen Rand oder?

[Whiz-zarD]

Und im Handy fällt z.B. Rundung weg, da der Titel dann auch ne ganze Zeile bekommt für lesbarkeit etc. auf schmalen/kleinen Geräten.

Und was ist, wenn der Kunde es doch mal haben will?
Anderes Beispiel: Monitore mit Pivot-Funktion. Ich kann mein Monitor drehen. Dann hat er entweder eine Auflösung von 1920 x 1200 oder 1200 x 1920. Da haben wir das selbe Problem, wie im Mobile-Bereich. Im Mobile-Bereich kommt es aber nicht auf die Lesbarkeit an, denn dafür sorgt schon die Schriftgröße, sondern um die Datensparsamkeit. Gerade im Mobile-Bereich haben wir es noch mit Volumentarifen nicht schnellen Verbindungen zu tun, wie wir es aus damaligen 56k-/ISDN-Zeiten kennen.

Noch krasser wird es ja bei 4k-Monitoren. Dann muss die Rastergrafik extrem skaliert werden, und dann kann es passieren, dass sie verschwommen aussieht. Da kann der Kunde noch so viel "Ich will! Ich will! Ich will!" schreien. Rastergrafiken sind das Grauen bei Responsive Designs und sollten vermieden werden. Du baust ja im Grunde Workarounds ein, damit es nicht so schlimm aussieht und das ist kein Responsive Design mehr. Wir müssen auch fast täglich unseren Kunden mitteilen, dass deren Ideen nicht immer umsetzbar sind, aufgrund von technischen Dingen, die der Kunde nun mal nicht sieht.

Damit du das Problem auch verstehst, hier mal dein Bild auf eine Breite von 1920 skaliert:
http://prnt.sc/acqimy

Wie du siehst, sieht es nicht toll aus.
Also würdest du wieder anfangen, Workarounds im Design einzubauen, damit die Biegung nicht ganz so mies aussieht.
Dies ist aber kein Responsive Design, denn das Design hat sich dem Nutzer anzupassen und nicht der Nutzer den technischen Gegebenheiten.
Im Vergleich zwischen dein Screenshot und meinem Bild fällt dir vielleicht auch auf, dass der Rand Links und Rechts optisch breiter wirkt.

Was spricht denn gegen Vektorgrafik / SVG ?
- kleinerere Dateigröße
- nie verpixelt, problemlos streck-/transformierbar, vergrößerbar/zoombar
- Farbe im CSS definierbar & animierbar

Das wäre doch perfekt für diesen Rand oder?

Eigentlich möchte man bei responsive Designs solche Rundungen, die über die gesamte Breite/Höhe gehen, vermeiden, weil die Höhe/Breite nicht bestimmbar ist und vom Seitenverhältnis abhängig ist, damit es korrekt dargestellt werden kann. Wenn ich ein Kreis in die Länge ziehe, ist es kein Kreis mehr, sondern eine Ellipse. Also muss ich den Kreis gleichzeitig in die Länge und in die Breite ziehen.

[Kellendil]

Wie du siehst, sieht es nicht toll aus.
Also würdest du wieder anfangen, Workarounds im Design einzubauen, damit die Biegung nicht ganz so mies aussieht.
Dies ist aber kein Responsive Design, denn das Design hat sich dem Nutzer anzupassen und nicht der Nutzer den technischen Gegebenheiten.
Im Vergleich zwischen dein Screenshot und meinem Bild fällt dir vielleicht auch auf, dass der Rand Links und Rechts optisch breiter wirkt..

Wo ist das Problem? Wenn du das SVG mit Rundungen nur horizontal skalierst ist klar, dass es dann mies aussieht. Muss man halt auch vertikal skalieren. Dann verschindet auch das Problem mit der Randbreiteund Kreis vs Ellipse.

[Whiz-zarD]

Wo ist das Problem? Wenn du das SVG mit Rundungen nur horizontal skalierst ist klar, dass es dann mies aussieht. Muss man halt auch vertikal skalieren. Dann verschindet auch das Problem mit der Randbreiteund Kreis vs Ellipse.

Bei SVG solltest du aufpassen, da es vom Browser Abhängig ist, wie es gerendert wird und ich kenne kein Browser, der SVG vollständig unterstützt.

[Kellendil]

Bei SVG solltest du aufpassen, da es vom Browser Abhängig ist, wie es gerendert wird und ich kenne kein Browser, der SVG vollständig unterstützt.

Die Spezifikation findest du hier: https://www.w3.org/TR/SVG/
Und wenn irgendein Browser abweichend rendert, ist das höchstwahrscheinlich ein Bug. Wie alt sind deine Erfahrungen mit SVG im Browser? Selbst so Meisterwerke wie dieses SVG hier funktionieren in modernen Browsern völlig problemlos: https://dev.w3.org/SVG/tools/svgweb/...s/gallardo.svg

Also bitte, als ob ein hellblauer SVG-Rahmen irgendwo Probleme machen würde, viel einfacher gehts ja kaum.

[Whiz-zarD]

Das ist kein bug. Das ist normal...
Niemand wird auch sagen, dass Libreoffice verbuggt ist, nur weil sie das Office Open XML Format von Microsoft (das Format ist ISO spezifiziert) nicht komplett implementiert haben, oder wenn ein Browser CSS3 nicht komplett unterstützt. Das tun die meisten Browser heute immer noch nicht.

SVG ist nun mal eine Sprache, die interpretiert werden muss und es kann vorkommen, dass bestimmte Programme es nicht vollständig unterstützen. Mit SVG sind ja auch Animationen möglich und das behandeln die Browserentwickler sehr stiefmütterlich. Ja, es geht hier nicht um Animationen, es sollte auch nur ein Beispiel sein.