Layout Campfire responsive - Header-Anzeige

Sie sollten uns zumindest erklären, was Ihrer Meinung nach hier nicht korrekt angezeigt wird, und unter welchen Umständen (Bildschirmbreite).

Hallo Nemessis,

meiner Meinung nach wird der Header korrekt dargestellt. Der Fokus des Bildes bei kleinen Bildschirmen ist immer die Mitte. Um das Bild noch vernünftig darzustellen wird es mobil links und rechts beschnitten. Denke ich. Wenn Deine Vermutung darauf beruht, weil der linke Teil vom Bild nicht richtig zu sehen ist, wo das Bild eine Überlagerung hat, diese kann ja nicht anders dargestellt werden weil sie ja ein Teil des Bildes ist.

Hallo nemessis

Ein leiser Ratschlag: Benutze, als Alternative, im Layout-Designer unter "Kopfgrafik" die Werkzeuge, welche vorhanden sind. Dies hat aus meiner Sicht den zusätzlichen Vorteil, dass die Schrift auf dem Header-Bild in jedem Fall lesbar bleibt und nicht unscharf ist.

Bzgl. der Schriftgrösse kannst Du anstelle von "rem" auch mal mit z.B. "vh" spielen.

Eine gute Woche und viel Erfolg!

Viele Grüsse

elch

Zitat von nemessis

Hallo Elch, die Schrift ist im Bild und nicht separat

Und das ist die Ursache des Problems und die wurde von den Kommentatoren auch korrekt erkannt (ggf. deren Kommentare nochmal lesen).

Was die Überlagerung des Logos über den sehr langen "Website-Namen" anbelangt: Sie nutzen hier nicht das in den Layout-Einstellungen verfügbare "Logo" sondern platzieren per angepasstem CSS eine Grafik an einer fixen Position. Dieser Code stammt garantiert nicht von uns.

Das Bild der Kopfgrafik wird aber in diesem und vielen anderen Layouts ab bestimmten Bildschirmgrößen nicht komplett angezeigt, sondern etwas vergrößert und zentriert (also links und rechts beschnitten).

Nutzen Sie den im Layout vorgegebenen Header (Kopfgrafik) und fügen Sie den Text aber über die Textfelder der Kopfgrafik ein, so dass der Text nicht Bestandteil des Bilds ist und dadurch auch nicht abgeschnitten werden kann.

Alternativ zum im Layout-Vorgegebenen Header (Kopfgrafik) könnten Sie ein Slider-Widget verwenden, da werden die Bilder immer proportional vergrößert/verkleinert.

Die Farbe der Richtungsbuttons richtet sich nach der im Widget eingestellten Text-Farbe.

Die Höhe des Sliders ergibt sich aus der Höhe des verwendeten Bilds.

Hallo zusammen,

aus meiner Ansicht ist das Header-Verhalten im "Campfire Responsive" nicht korrekt, da nicht durchgängig:

• Desktop-Ansicht: volle Breite (komplettes Bild wird angezeigt)
• Tablet quer: skaliert (komplettes Bild wird verkleinert angezeigt)
• Tablet hoch: skaliert (komplettes Bild wird verkleinert angezeigt)
• Mobil quer: skaliert (komplettes Bild wird verkleinert angezeigt)
• Mobil hoch: Ausschnitt des Bildes (Bild wird links und rechts abgeschnitten)

Meiner Meinung nach ist das bei "Mobil hoch" abweichende Verhalten kein Feature, sondern ein Bug.
Wäre schön, wenn auch die Ansicht "Mobil hoch" skalierend wäre.
Das Layout "Campfire Responsive" ist übrigens mein neues Lieblings-Layout. Sehr modern und gelungen.

LG
Sunny

Hallo,

das hat nichts mit Quer- oder Hochformat zu tun, sondern lediglich mit der Bildschirmbreite. In Campfire Responsive wird die Kopfgrafik proportaional skaliert, ausser der Bildschirm ist schmaler als 641px, dann wird das Bild zentriert und beschnitten. Das machen wir, weil wir finden, dass Kopfgrafiken in Briefmarkengröße nicht sinnvoll sind. Das ist in anderen Layouts (z.B. Stripe Responsive) ähnlich.

Im Layout Producer Responsive, kann man dieses Verhalten in den Layout-Einstellungen einstellen, aber in Campfire (und anderen Layouts) nicht – hier ist die Alternative statt der eingebauten Kopfgrafik das "Slider-Widget" zu nutzen.

Problematisch wird dieses Verhalten vorrangig, wenn in einem Bild der Kopfgrafik Text enthalten ist. Das sollte man aber schon aus SEO-Gründen besser nicht tun. Und wie man an diesem Beispiel sehr gut sieht, wäre der Text (im Pixelbild inkludiert) auch ohne Beschneidung kaum lesbar, da viel zu klein (und dazu noch von den Sidebar-Icons überlagert).

Ich schau mal, dass ich in Version 16.3 im Layout Campfire-Responsive noch eine neue Layout-Einstellung für Kopfgrafiken einführen kann, mittels der man festlegen kann, ob das beschnittene Bild links, tentriert oder rechts ausgerichtet werden kann. Das kann dann in Fällen wie diesem helfen.

Hallo Stefan,
Euren Ansatz verstehe ich. Wobei ich der Ansicht bin, dass ein großer bzw. größerer Header auf dem Smartphone (auch aus SEO-Sicht) zu viel Platz in Anspruch nimmt ("Above the Fold"). Die "Briefmarken-Variante" mit dem Slider ist deshalb mein Favorit. Für mich passt es jetzt perfekt, da ich wählen kann.
Danke & lG

Das Bild wird auch in 16.3 so beschnitten wie jetzt. Neu wird nur die Ausrichtungs-Einstellung sein. Sie könnten dann „Links“ wählen, dann wird das Bild nur rechts beschnitten und der Text im Bild bliebe erhalten.

In Ihrem Fall könnte der Text ja nie nach unten rutschen, weil bei ahnen der Text Bestandteil des Bilds ist (das Urpsrungsproblem).

Hier Mal meine Gedanken zu den Thema. Eventuell hilft es dem einen oder anderen.

Bindet man den Text mit Hilfe eines Grafikprogrammes in das Bild ein wird Google diesen nicht lesen können. Ein weiterer Nachteil ist wenn das Bild auf kleinen Bildschirmen verkleinert dargestellt wird der Text proportional mit verkleinert und ist wahrscheinlich schlecht bis gar nicht lesbar.

Wird das Header-Bild "althergebracht" proportional verkleinert kann man möglicherweise keine Details davon am Smartphone sehen. Außerdem bleibt hier in der Regel zumeist kein Platz um den Text im Bild darzustellen. Deshalb wird zB. im Slider dieser dann unterhalb des Bildes dargestellt.

Bei der "moderneren" Variante (Cover) sollte der Fokus der Bilder in der Mitte liegen oder kein bestimmter Fokus vorhanden sein. Weil das Bild hier auf kleineren Bildschirmen eingezoomt wird und die Ränder so beschnitten werden das der komplette Container damit gefüllt wird. Dies hat auch den Vorteil daß hier der Text besser im Bild dargestellt werden kann weil der Container hier höher ist.

Meines Wissens gibt es auch ein Layout in welchem man die Darstellungsvariante auswählen kann. Leider fällt mir spontan nicht ein welches das ist.

Zitat von Mario

Bei der "moderneren" Variante (Cover) sollte der Fokus der Bilder in der Mitte liegen

Eben. Und mit der neuen Layout-Einstellung kann der Focus eben auch links oder rechts liegen.

Zitat von Mario

Meines Wissens gibt es auch ein Layout in welchem man die Darstellungsvariante auswählen kann. Leider fällt mir spontan nicht ein welches das ist.

Das ist "Producer Responsive"

Hallo,

ich finde es ja auch besser wenn das Bild größer und mittig dargestellt wird. Man muss halt nur die richtigen Bilder aussuchen.

Zitat

Meines Wissens gibt es auch ein Layout in welchem man die Darstellungsvariante auswählen kann. Leider fällt mir spontan nicht ein welches das ist.

Stripe Responsive ist auch ein gutes Beispiel. Da kann man gut mit den Einstellungen des Header ein vernüftiges Ergebnis erzielen.

Hmm…

Ggf. den blauen, transluzenten Balken aus dem Bild entfernen und die Sidebar-Icons auf der rechten Seite platzieren…

Ich würde ebenfalls die Hintergrundfarbe entfernen.

Die Abstände geringfügig verkleinern damit der Scrollbalken am Smartphone verschwindet.

Und dem Text zur besseren Lesbarkeit eine Farb-Umrandung geben. Dazu kann ich dir nach meinem Urlaub gerne weitere Infos geben. Sieht dann ungefähr so aus wie HIER.

Zitat von nemessis

Hallo Maik...Das ist doch ok so, oder ? Ferienwohnungen in Bad Hindelang. Urlaub im Allgäu! (allgaeu-pension.com)

Hallo Nemissis, es ist zwar nicht das was Du wolltest aber es sieht sehr gut aus. Aber diesen blauen Hintergrund solltest Du dir noch mal durch den Kopf gehen lassen.

Wenn es der Kunde umbedingt will dann neu machen. die Farbe passt irgendwie überhaupt nicht.

Zitat von nemessis

Scroll Balken am Smartphone ? hab ich nicht, wo soll der sein

Naja am Smartphone ist der auch schlecht zu sehen. Hat aber zur Folge das nicht die Seite scrollt sondern nur das kleine Stück Text wenn man darauf tippt und nach oben wischt.

In Stefans Screenshot ist das sehr gut zu erkennen weil dieser vom Desktop PC stammt.

Hallo,

Ich schließe diese Beträge mal, denn zum Grundsätzlichen ist bereits alles gesagt und es wird langsam etwas lange und unübersichtlich.