Responsive Beginners
 

Home - Die Startseite

Informationen

Die Besonderheit

Dieses Template ist für Responsive Anfänger. Wir wollen Ihnen das Verstehen der Responsive Thematik erleichtern und möchten, sofern Sie nichts dagegen haben, daß Sie sich ganz auf die Responsive-Technik, also das Abfragen der Bildschirmgrößen per CSS-Media Queries, konzentrieren können. Deshalb haben wir dieses Template auf das Wesentliche reduziert. Der Quellcode ist damit auch sehr knapp, übersichtlich und entsprechend leichter. Näheres lesen Sie bitte nachstehend unter`'Technik'. Das Feuerwehrauto zeigt es schon sinnbildlich an, Hilfe und Rettung ist unterwegs oder anders gesagt: Responsive ist gar nicht so schwer.

Wie immer ist aber zu beachten: Responsive Vorlagen können allgemein (das gilt für alle Anbieter, also nicht nur für unsere Vorlagen) sehr schwer mit einem Drag-and Drop Html Editor, auch bezeichnet als WYSIWYG-Editor, bearbeitet werden. Nehmen Sie besser einen textorientierten HTML-Editor wie die kostenlosen Editoren PHASE5 oder BRACKETS oder andere. Das bedeutet dann konsequenterweise, daß Sie zumindest leichte Kenntnisse in HTML und CSS haben müssen.

Template

Dieses Template ist responsive und heißt ' Responsive Beginners '. Die sieben Seiten 'Home' (diese Seite) bis Impressum, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.


Die Technik

Die Reduzierung

Es gibt in dieser Vorlage keine Font-Icons, keine Animationen, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen. Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS oder per PNG-Grafiken sowie auch Farbverläufe per CSS. Auch nicht zum Einsatz kamen hier unterschiedlich formatierte Abschnitte im Inhaltsbereich. Schatten-Effekte auf Boxen oder Texte per CSS wurden hier ebenfalls nicht angewendet. Auch nicht dabei ist die Lightbox Fotogallerie. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein. Denn dies ist bei dieser Vorlage unser primäres Ziel.

Einbau der Bilder

Auf den Unterseiten haben wir auch Fotos im Inhaltsbereich eingebaut. Zum Beispiel auf der Seite Secundus (index2.html) oder Tertius (index3.html).


Responsive Webdesign

Abfragen der Bildschirmgrößen

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite Primus (index1.html) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.
© 2029 Responsive Beginners