Hallo zusammen
Ich habe mir das Responsive-Theme DEW von Rapid-Ideas gekauft. Da dies das erste dieser Art ist, habe ich Anfangsschwierigkeiten mit dem Verständnis zwischen der Verbindung Hintergrund- und Banner-Bildern. Irgendwie wollen diese anders gehandhabt werden.
Verstehe ich’s richtig, dass das Bannerbild ein Bestandteil des Hintergrundbildes ist? Will man ein Banner haben, muss dies im Hintergrundbild oben integriert sein? Freue mich über gelegentliche Antwort.
Viele Grüsse, Marcel
Will da wirklich keiner was dazu sagen? Wird doch wohl für euch kein Neuland sein? 
Das Problem wird sein, dass niemand dieses Theme besitzt
-Michael
Mir geht’s um das Thema Responsive generell. DEW habe ich nur als Beispiel genommen.
Ich habe mir während der vergangenen Tage Responsive-Themes gleich dutzendweise auf den Theme-Entwicklerseiten in den „Live Previews“ angeschaut und kann mich auch jetzt noch nicht so richtig damit anfreunden. Ist aber auch nur meine ganz persönliche Meinung, die wohl daher kommt, dass ich Responsive noch nicht richtig verstehe. Hier TESLA PRO:
https://elixirgraphics.com/previews/tesla-pro/
Da ist einmal der Startbildschirm mit einem nahezu bildschirmfüllenden Hintergrund/Banner-Image und den Menü-Buttons am unteren Bildschirmrand. Jetzt habe ich zwei Möglichkeiten, um zum Inhalt unterhalb des Hintergrund/Banner-Images zu gelangen. Mit der Maus hinab scrollen oder auf den nach unten zeigenden weissen Kreis klicken. Verstehe ich.
Ich klicke also auf diesen weissen Kreis und die Menü-Buttons wandern zum oberen Bildschirmrand und der Inhalt wird unten dargestellt. Verstehe ich.
Klicke ich jetzt auf einen der oben liegenden Buttons beginnt das Spiel von vorne wie unter Pos. 1 beschrieben. Man ist ständig am auf und ab scrollen. Man muss das Menü wieder „in Position“ bringen. Verstehe ich überhaupt nicht.
Wenn man sich einmal in einem Menü mit einigen Submenüs befindet, möchte man vielleicht dort drinnen verbleiben bzw. verweilen. Aber bei jedem Klick auf einen Menübutton rutscht die Seite wieder nach oben.
So oder ähnlich ist es mir bei sehr vielen Responsive-Themes aufgefallen. Und das ist auch bei Dir, geschätzter Michael, ähnlich.
Grüsse, Marcel
Nein, die Seite rutscht in der Mobilansicht von Tesla Pro nicht nach oben, das ist lediglich ein subjektiver Eindruck. Wenn du auf einen Menüpunkt gehst, wechselst du auf eine neue Seite und da diese Seite so aufgebaut ist wie alle anderen, wird dir auch der obere Bereich angezeigt. Seiten beginnen (wenn du das nicht explizit anders aufbaust, immer oben)
Wenn du das anders haben wolltest, müsstest du ein anderes Linkziel der Menüpunkte definieren, dann könnte ein Klick auf einen solchen Menüpunkt z.B. als Ziel den Inhalt unterhalb des Kopfbereiches (oder was auch immer) haben. Das aber macht i.d.R. keinen Sinn, denn du willst im Regelfall ja die Kompletteste anzeigen.
Das hat jetzt mit Responsivität auch gar nicht viel zu tun, das würde genauso sein, wenn du die Seite in einem bestimmten Layout statisch aufbauen würdest.
-Michael
Grundsätzlich kann man vereinfacht sagen, responsiv heisst, die Inhalte passen sich der Bildschirmgrösse an, Texte und Bilder und das gesamte Layout. Ist auch gut so für all die verschiedenen Geräte, die uns zur Verfügung stehen, eine Webseite anzuschauen.
Das Theme, welches du ansprichst und auch noch viele andere modernen Themes zeigen immer zuerst ein Riesenbannerbild, auch nach jedem Seitenwechsel.
Finde ich persönlich auch nicht das gelbe vom Ei. Aber es kommt natürlich schon darauf an, was man zeigen will.
Responsive Themes können aber auch ganz anders aussehen, so wie du schreibst, mit Menü oben und immer erreichbar.
Aber ohne Responsivität geht heute eine Website eigentlich nicht mehr.
Es gab mal eine Zeit, da klebten alle Websites in der Ecke oben links im Fenster.
Schön, dass diese Zeit vorbei ist 
Zur Begriffsklärung “Responsivität” will ich noch folgendes beitragen:
Früher war das Leben einfach: Es gab ein paar halbwegs fixe Monitorgrössen, die konnte man mit einer statischen Webseite gut bedienen. Dann kamen die Smartphones und alles wurde anders. Smartphones haben viel kleinere Displays, da passen die alten und statischen Webseiten nicht mehr, weil sie nicht für diese Seiten gemacht sind - das sind dann Seiten, wo du seitlich scollen musst, wenn du sie mit dem iPhone anschauen willst.
Anfangs gab es eigentlich nur das iPhone und dann auch das iPad mit bestimmten Pixelabmessungen. Da konnte man noch mit speziellen Versionen der gleichen Website arbeiten. Man erstelle halt eine Version für den Desktop, eine fürs iPad und eine für das iPhone. Es gab ja feste Bezugspunkte, an denen man sich orientieren konnte und so entstanden das adaptive Webdesign. Je nach Gerät, mit dem eine Webseite aufgerufen wurde, wurde eine andere Version der Seite angezeigt.
Das gin auch eine Zeitlang gut, doch dann kam Android und alle die vielen Anbieter der iPhone-/iPad-Konkurrenten. Alleine bei Android haben wir deutlich über 50 unterschiedliche Displaygrössen. Verschlimmert wurde das ganze durch Dinge wie die Smartwatches und die 5K-Fernseher. Überall müssen die gleichen Inhalte mit dem gleichen Webseitenlayout bedient werden. Die festen Bezugspunkte des adaptiven Webdesigns hatte man jetzt nicht mehr.
Man schuf das responsive Webdesign. Das sind Seiten, bei denen die Anordnung der Inhalte nicht mehr von fixen Bezugspunkten abhängt, sondern sich flexibel anpasst. Die Bezugspunkte gibt es immer noch, aber sie haben nun eine etwas andere Bedeutung.
Das Wesentliche einer responsiven Seite ist ein festes Gestaltungsraster. Meist wird eine Webseite in 12 (nicht sichtbare) Spalten gegliedert, darin stecken die Container mit den Inhalten. Diese Spalten werden auf einem desktop nebeneinander angezeigt und unterhalb einer bestimmten Breite des Browserfenster rutschen die Container untereinander. Es rutschen aber auch nicht nur die Container untereinander, die Inhalte, die in diesen Containern liegen, verändern dabei ggfs. auch ihre Breite - Bilder werden in einem schmaleren Browserfenster kleiner angezeigt, sonst würden sie seitlich heraus stehen. Außerdem werden auf unterschiedlichen Geräteklassen oft unterschiedliche Bilder ausgegeben (wobei das v.a. den Grund in dem sparsamen Umgang mit den mobilen Datenvolumina und Übertragungsgeschwindigkeiten hat).
Etwas anderes als responsive Seiten zu entwickeln macht heutzutage nur noch wenig Sinn, nicht im Bereich, den ein Programm wie RapidWeaver abdeckt. Bei den großen Shops oder Portalen sieht das wieder anders aus, hier braucht man nach wie vor adaptive oder auch statische Seiten, aber dafür ist RapidWeaver ohnehin nicht gemacht. Nicht jede flexible Webseite ist eine responsive Seite.
Bei den RapidWeaver-Themes findest du einige statische Themes (die ganzen klassischen Themes sind statisch) und etliche, die sich in der Größe anpassen. Viele dieser anpassungsfähigen Themes werden als “responsiv” bezeichnet, sind aber eigentlich adaptiv. Oft findest du auch einen Mix von beidem und in der Praxis ist die Differenzierung auch von untergeordneter Bedeutung. Wenn man aber verstehen will, worum es geht, sollte man sich den Unterschied schon vor Augen führen.
Beide Konzepte arbeiten mit Media Queries und Breakpoints (ersteres sind die Anweisungen, die sich auf die Geräteklassen beziehen und letzteres sind die Trigger, die für die Änderung der Seitenanzeige verantwortlich sind). Bei adaptiven Layouts wird mit px oder em zur Breitenangabe von Elementen und Containern gearbeitet (also festen Werten), es entstehen also fixe Layouts. Beim responsive Webdesign werden die Elemente und Container fluide, d.h. mit relativen Werten (z.B. mit Prozenten) angegeben. Das ist wichtig zu verstehen, warum bestimmte benutzerdefinierte Änderungen auch in RapidWeaver-Projekten nicht in jedem Theme funktionieren. Und das ist auch der Grund dafür, warum man z.B. in Text-Stacks die Schriften nicht einfach größer oder kleiner machen sollte, sondern immer über die Stacks-Konfiguration gehen sollte.
Wenn du die Arbeit mit RapidWeaver verstehen willst, musst erst einmal die Arbeit mit statischen Seiten verstanden haben. Dann erst solltest du dir Gedanken über responsives oder adaptives Layout machen. Während du eine statische Seite eigentlich recht unkompliziert “zu Fuß”, also ohne RapidWeaver aufbauen kannst, wird das bei responsivem oder adaptivem Layout zu einer Aufgabe, die nicht mehr wirtschaftlich “zu Fuß” bewältigbar ist. Deshalb greift man auf fertige Lösungen zurück, in RapidWeaver halt responsive Themes oder auf Frameworks (die es auch für RapidWeaver gibt: Foundation, Pure, BootSnap)
So, genug der Verwirrung, aber du wolltest den Begriff ja verstehen…
-Michael
Danke Michael. Keine Verwirrung. War für mich sehr aufschlussreich. Interessant. Habe das Posting dreimal gelesen.
Grüsse, Marcel