Document Responsive Version

Home. Welcome.

Das Layout

Das Design

Dieses Template heißt DOCUMENT RESPONSIVE VERSION. Die auch beliebte normale Version (Document), welche nicht responsive angelegt ist und somit für weniger Fortgeschrittene wesentlich leichter zu bearbeiten ist, haben wir für Sie bei uns unter der Nr. 36 hinterlegt.


  Geheimnis gelüftet! Werbe-Profis nutzen vielfach die Kombination BLAU und WEISS

Die Intension

Die Farben sind hier blau, weiss und grau und diese stehen damit für Sachlichkeit, Reinheit, Vertrauen und dezente Zurückhaltung. Optimal um ein Produkt zu verkaufen. Gleichzeitig ergibt die Kombination blau/weiss noch eine Frische-Assoziation (man denke an die Zahnpasta-Werbung oder andere Hygiene-Werbung) sowie eine Urlaubs-Assoziation (blauer Himmel oder Meer). Deshalb ist diese Farbkombinationen so ausserordentlich beliebt und erfolgreich. Sehr bewusst nutzen also Werbe-Profis diese Farben um Ihr Unterbewusstsein anzusprechen.


Die Technik

Responsive Webdesign

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 1 die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.


  Today. Tomorrow. Next Year.
Die Media Queries sind der Schlüssel

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS-Media Queries bei älteren Browsern, noch für die Animationen. Hier auf der Seite index1.html (Primus) 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.


Die Info

Bereits verlinkt

Das Hauptmenü (Primus bis Sextus) haben wir bereits beispielhaft verlinkt. Dort erwarten Sie mehr Informationen bzw. andere Ansichten. In dieser Vorlage finden Sie auch versch. Animationen. Sie möchten wissen, wie diese angelegt sind oder wie Sie die Animationen auch unkompliziert und schnell löschen können? Wir verraten es Ihnen hier auf der Seite index4.html (Quartus).

Noch ein Hinweis: Am Ende dieser Seite sehen Sie die Beispiele für ein hochgestelltes Textzeichen (hier in der Farbe Rot), gedacht für ergänzenden Text zu bestimmten Begriffen.

Liste mit eigenem Aufzählungszeichen, hier Font-Icon Folder-Open, nicht verlinkt:

  • Curabitur
  • Ullamcorper
  • Magna
  • Aenean


Liste geordnet (ordered list), automatisch numeriert, Ziffern farbig, verlinkt:

  1. Primus
  2. Secundus
  3. Tertius
  4. Quartus

So, wir wünschen Ihnen viel Spaß und vor allem viel Erfolg mit diesem Template. Ius ei eripuit torquatos neglegentur, viris nobis ut eos. Sed et dicat veniam, te eros dicant probatus 2 mei. Mei te eirmod splendide, est vidit altera tincidunt ei, novum 3 democritum efficiantur id eos. Eos ex error aliquip ullamcorper, discere maiestatis reformidans.



1 = Media Queries: Die Abfragen für die Bildschirmgröße funktionieren ab Internet Explorer Version 9. In anderen modernen Browsern sowieso und viel früher.
2 = Probatus: Beispiel für die Möglichkeit ein hochgestelltes Zeichen für eine ergänzende Texterklärung am Ende der Seite einzusetzen.
3 = Novum: Ein weiteres Beispiel für erklärenden Text zu einem hochgestellten Zeichen. Wie sie sehen können, ist hier die Schriftgrösse beim ergänzenden Text zur Abgrenzung kleiner als die Schriftgrösse des Fliesstextes sowie auch kursiv (schräggestellt) angelegt.
© 2020 Document RWD