-Responsive-

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS3-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Mobile-First

Die in Bezug auf das Responsive Webdesign angesagte Mobile-First-Technik (von klein auf groß) bietet eine bessere Performance-Leistung gegenüber der Desktop-First-Technik (von groß auf klein).

Das Coding für die kleinste mobile Bildschirmauflösung, nämlich das Smartphone, steht direkt am Anfang der CSS-Datei und wird somit sofort geladen, erst später im Code werden dann per Media Queries - Abfragen der Bildschirmgröße bezüglich der Mindestbreite (min-width) - andere, abweichende, größere Bildschirmauflösungen, wie Tablet, Notebook, Laptop und schließlich Desktop-PC angesprochen.

-Icons-

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel:      

-Fotos-

Hinweis zu den Fotos

Die Fotos in dieser Vorlage sind von https://picjumbo.com/ Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

-Tipps zur Vorlage-

Die Startseite (index.html) führt Sie per Link auf die Unterseiten "Personal" (index1.html), "Business" (index2.html) und "Info" (index3.html). Innerhalb dieser Unterseiten finden Sie weitere Links, die per sog. Html-Anker angesprungen werden. Hinweis: Ein Anker bezeichnet eine Sprungmarke innerhalb eines HTML-Dokuments.

Beispiel: Innerhalb der Seite index1.html (Personal) gibt es drei weitere Links namens About me, Hobbies und My Skills, die alle per Html-Anker verlinkt sind bzw. angesprungen werden.

Im Fussmenü finden Sie noch die rechtlichen Seiten. Hier bekommen Impressum, Datenschutz und Disclaimer jeweils eine eigene Seite.