search

Riccardalina / Abonax-Website

0 stars 0 forks source link

Element: Violette Box mit Buchstaben #67

Closed Riccardalina closed 1 year ago

Riccardalina commented 1 year ago

Bild im Buchstaben wird verpixelt dargestellt, auch wenn Qualität gut ist. Bitte bei allen Elementen mit Buchstaben und Bildern im Hintergrund prüfen.

image

Link: https://abonax2023.visions.page/angebot/produkte/solargemeinschaft.html

Riccardalina commented 1 year ago

Die Bilder werden zudem immer noch sehr gross dargestellt, sodass es stark reinzoomt und somit kein wirkliches motiv erkennbar ist. kann man das nicht verkleinern bzw. im hintergrund weniger gross darstellen?

Riccardalina commented 1 year ago

Vergleich aktuelle Ansicht: image

Zu Ansicht gemäss Vorlage: image

Unterschiede: Positionierung der Buchstaben, Bildqualität und Bildgrösse

christoph-menzi commented 1 year ago

Wir richten die Buchstaben am Bildschirmrand aus. Ein "ze" und "me" sind unterschiedlich lange. Ein "me" ist länger und würde bis zur violetten Box gehen.

Option 1: Buchstaben werden am Bildschirmrand ausgerichtet (aktuell) Option 2: Buchstaben werden an der Mitte ausgerichtet

Bei der Option 2 gibt es dann je nach Buchstabenkombi links/rechts weissen Rand. "ze" z.B. wäre zu kurz und hätte dann im oben bebilderten Beispiel dann einen weissen Rand auf der rechten Seite.

Riccardalina commented 1 year ago

@christoph-menzi: ich verstehe die herausforderung mit den verschiedenen buchstaben aber wie du im vergleich oben sehen kannst, sind sie auch von der position her in der höhe anders platziert. ausserdem haben wir auch das problem, dass die bilder zu stark hereingezoomt werden und mach erstens nichts erkennen kann und zweitens auch hochauflösende bilder verpixelt sind. was kannst du da machen?

christoph-menzi commented 1 year ago

Ich habe nun die Auflösung um einiges erhöht und die Violette Box weiter nach unten platziert. So okey? image

https://abonax2023.visions.page/dev/test.html

Riccardalina commented 1 year ago

Ich habe nun die Auflösung um einiges erhöht und die Violette Box weiter nach unten platziert. So okey? image

https://abonax2023.visions.page/dev/test.html

es sieht schon etwas besser aus, meiner meinung nach ist das bild aber immernoch sehr gross bzw. hat einen starken zoom im hintergrund. findest du nicht auch, dass so ist im vergleich zur vorlage?

christoph-menzi commented 1 year ago

Die Gestaltung im Grafik-Programm Adobe XD und die Webseite kannst Du in dem Fall nicht 1:1 vergleichen.
Ganz speziell mit den ausgeschnittenen Buchstaben wird es schwierig hier die Vorlage ohne Abweichung umzusetzen. Jedenfalls wüsste ich im Moment nicht wie.

Das Buchstaben Element ist eigentlich viel höher. Im oben gezeigten Beispiel haben wir 2 kleine Buchstaben. Die effektive Grösse vom Element siehst Du im Bild unten. Danach richten wir das Bild am Element mittig aus. Und wir strecken das Bild damit es alle Buchstaben abdeckt.

Ich könnte die BIldstreckung entfernen, aber ich kann Dir dann nicht garantieren dass es dann bei den einzelnen Displaygrössen und auf den verschiedenen Endgeräten sauber funktioniert.

image

Riccardalina commented 1 year ago

Die Gestaltung im Grafik-Programm Adobe XD und die Webseite kannst Du in dem Fall nicht 1:1 vergleichen. Ganz speziell mit den ausgeschnittenen Buchstaben wird es schwierig hier die Vorlage ohne Abweichung umzusetzen. Jedenfalls wüsste ich im Moment nicht wie.

Das Buchstaben Element ist eigentlich viel höher. Im oben gezeigten Beispiel haben wir 2 kleine Buchstaben. Die effektive Grösse vom Element siehst Du im Bild unten. Danach richten wir das Bild am Element mittig aus. Und wir strecken das Bild damit es alle Buchstaben abdeckt.

Ich könnte die BIldstreckung entfernen, aber ich kann Dir dann nicht garantieren dass es dann bei den einzelnen Displaygrössen und auf den verschiedenen Endgeräten sauber funktioniert.

image

ok dann lassen wir es mal so wie es ist, danke dir