Bilder in responsive Templates

Designvorlagen
Post Reply
rreinhardklein
Posts: 41
Joined: Mon 14. Jul 2014, 14:32

Bilder in responsive Templates

Post by rreinhardklein » Mon 20. Apr 2015, 21:24

Ich arbeite mich gerade in die neuen "responsive" Templates ein, beton, palm und minimal.
In Gerts Beispiel-Templates verändert sich die Weite des DemoBildes der Brücke je nach Fensterbreite.
ich kriege das aber mit meinen Bildern nicht hin.
Wie geht das?
Danke für Eure Hilfe!

Gert
Posts: 1130
Joined: Sun 18. Nov 2012, 14:18

Re: Bilder in responsive Templates

Post by Gert » Mon 20. Apr 2015, 22:25

Hallo Reinhard,

in meiner Template Übersicht findest Du oberhalb der responsiven Templates folgenden Satz:

"Bitte beachten Sie, dass solche responsive gestalteten Internetseiten hohe Anforderungen an den Betreiber stellen, was die Gestaltung der Inhalte betrifft."

Genau das ist der Grund, weshalb ich mich so lange diesem Responsive-Wahn (oder genauer gesagt: in der Breite flexiblen Bereichen) verweigert habe. Aber seitdem Google seine Kompetenzen überschreitet und festlegt, was mobile-optimiert ist und was nicht, muss auch ich mich diesem Diktat beugen und Templates anbieten, die Googles Vorstellungen von mobile optimierten Seiten entsprechen.

Wie man solche responsive Designs umsetzt und mit geeigneten Inhalten füllt, kann und soll eigentlich nicht Gegenstand eines CMS Forums sein, dafür gibt es genügend Webdesign- und CSS Foren. Das geht weit über CMSimple hinaus, das ist allgemeingültig und nicht auf CMSimple beschränkt.

So, jetzt habe ich mich augeheult und gebe doch noch einen Tipp zu Bildern und anderen Elementen in flexiblen Bereichen: ;)

Breite in Prozent angeben. Das Bild in den Template Demos hat width: 98% , damit noch Platz für einen Rahmen ist. Wenn es zentriert sein soll, dann noch margin: 0 auto;

Komplizierter wird es, wenn Bilder oder Elemente vom Text umflossen werden sollen, das wird meist Mist, wenn sich die Breite des Inhaltsbereiches der Breite des Bildes nähert. Da setze ich meist max-width: 40% , zu sehen hier:

http://www.ge-webdesign.de/test_responsive/

Bei dem Smartphone-Bild habe ich max-width: 35% gesetzt, so ist für den Text immer Platz, um das Bild herum zu fliessen.

Das ganze setzt natürlich voraus, dass der Autor, der die Inhalte erstellt, CSS beherrscht und in der Lage ist, per Editor oder im Quelltext den Bildern oder Elementen CSS Eigenschaften zuzuordnen.

Es wird schwieriger,

Gert

PS: Man kann aber auch die entsprechenden Content Klassen anpassen (max-width ergänzen), dann ist es für den Autor einfacher, wenn er weiss, wie man diese anwendet.
Gert Ebersbach | CMSimple | Templates - Plugins - Services

rreinhardklein
Posts: 41
Joined: Mon 14. Jul 2014, 14:32

Re: Bilder in responsive Templates

Post by rreinhardklein » Tue 21. Apr 2015, 10:30

Danke für die Hilfe-
Ist schon klar dass man das selbst erforschen muss -- aber Dein % Hinweis hat's wieder einmal gebracht!
die Prozenztzahl kann man auch in den "Aussehen" Tab unter "Ausmasse"
des Bild einfügen/verändern Dialoges eintragen
dann justiert sich das Bild automatisch.
Funktioniert auch bei Tabellenbreiten.
Super- das wars!

Post Reply