Ferienhaus am "Kap der Guten Hoffnung"

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Landschaftliche Impressionen:

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hintergrund zur Webseite:

Parallax-Effekt:

Ein Parallax-Design bietet sich an, wenn die Bilder einen wesentlichen Teil der Verkaufsbotschaft ausmachen sollen. Hier wurde dies nur mit CSS, und nicht mit einem JavaScript eingerichtet.

  • Jedes Bild muss sich seinen Platz verdienen: Die Gefahr liegt darin, dass das Design von der Werbebotschaft oder dem Angebot ablenkt. Alles rund um Graphik sollte unterstützend zum Verkaufsangebot sein.

Es bietet sich auch an:

  • Die Breite der Webseite zu limitieren, um dann kleinere Bilder für den Parallax-Effekt zu nutzen.
  • Natürlich sind nicht alle Seiten der Webseite Parallax-Seiten. Einstiegsseiten oder einzelne Seiten können mit Parallax-Effekt eingerichtet werden.

Zusätzlich animierte Slider mit Bildern sorgen für zu viel Bewegung, da man beim scrollen den Parallax-Effekt hat, und dann noch zusätzlich den seitlichen Slider. Allerdings ist dies möglich wenn viel Text vor und nach dem Slider vorhanden ist, so dass man nicht beide Effekte zugleich auf dem Bildschirm hat.

  • Der Parallax-Effekt bietet sich an, wenn man z.B. mitten auf der Seite im Lesefluss ein Download anbieten will, welcher höchst relevant sein muss.
  • Oder wenn die Bilder den Verkauf übernehmen sollen.
  • Große Zeitungen nutzen den Parallax-Effekt gerne um Werbung einzuspielen. Das ist legitim, wenn es zum Geschäftsmodell passt. 

Die Seite ist responsive / flexibel

Hier die verschiedenen Media Queries um die Seite responsive zu machen:

Was Media Queries bewirken: 


Wenn die das Browserfenster verkleinern oder vergrößern, sehen Sie wie die Bilder unter "Landschaftliche Impressionen", bei 1109 bis 1020 Pixel, sich verhalten wenn man nicht mit Media Queries arbeitet. 

Absichtlicher Fehler bei Media Queries
  • Diese Media Queries können innerhalb von Contao bearbeitet werden. Zur Auslieferung an den Browser werden diese in einem einzelnen Stylesheet zusammengefasst, um die Ladezeiten der Webseite zu verringern. 

Markus Trauernicht