Für responsive Websites gilt bei der Vorbereitung der Dateistruktur dasselbe wie für "normale" Websites: eine sinnvolle Dateistruktur ist wesentliche Voraussetzung zur erfolgreichen Durchführung eines Web-Projekts und muss entsprechend vorbereitet und rigide eingehalten werden. Wesentliche Bestandteile einer responsive Website sind:
- Inhalt: index.html – Verzeichnis: root
- Layout/Stil: normalize.css, layout.css, inhalt.css – Verzeichnis: styles
- Funktionen: jquery.1.11.3.js – Verzeichnis: assets
Darüber hinaus ist es für responsive Website unbedingt erforderlich, die unterschiedlichen Größen der Ausgabegeräte zu testen und dafür eine lokale Vorschau einzurichten. In moderenen Browsern können Breakpoints durch Ändern der Fenstergröße aufgerufen werden, für die Simulation von touch-Events muss man dann allerdings entweder ein Testgerät benutzen oder einen lokalen Simulator z.B. über xCode einrichten.
Eine schnelle und z.B. einfachste Variante kann aber auch browser-intern in Firefox ausgeführt werden:
Richten Sie sich nun den Browser und die erforderliche Verzeichnisstruktur ein und starten Sie dann mit dem Aufbau der responsive Website.
1. Im ersten Schritt legen Sie die html-Startdatei an. Öffnen Sie ein neues Dokument und wählen Sie als Dokumenttyp html5. Vergeben Sie im head des Dokuments einen Titel uns sichern Sie das Dokument unter dem Namen index.html in dem Verzeichnis, das Sie für die Website eingerichtet haben.
2. Es geht dann mit der Erstellung und Anbindung der Stylesheet-Dateien weiter. Zuerst müssen die Standard-Einstellungen des Browsers zurückgesetzt werden, damit Sie nicht in das Layout Ihrer Website übernommen werden. Dies kann nämlich zu unkalkulierbaren Verschiebungen der Elemente führen und ist nicht anders in den Griff zu bekommen, als die entsprechenden Wertangaben erst einmal um Null zu setzen. Das Rad müssen Sie aber nicht neu erfinden, denn es gibt im Netz eine Vorlage, die heruntergeladen und mit dem eben vorbereiteten html-Dokument verknüpft werden kann: https://necolas.github.io/normalize.css/
3. Als nächstes werden dann die Stylesheet-Dateien vorbereitet, mit denen die Website später gestaltet werden soll. Um die Stilanweisungen übersichtlich zu halten, sollten Sie diese thematisch trennen und in einer Datei via @import zusammenführen. Diese Vorgehensweise erspart Ihnen später viel Zeit, wenn Sie die einzelnen Stilanweisungen bearbeiten. Richten Sie sich zuerst eine css-Datei ein, die Sie als Sammelstelle benutzen und nennen Sie diese styles.css.
Erstellen Sie danach zwei weitere Stylesheet-Dateien - layout.css und inhalt.css und importieren Sie die beiden Dateien in die Datei styles.css. Danach können Sie in den untergeordneten Dateien die Grundeinstellungen für das Layout und die Detail-Formatierung für alle Inhalte einfügen und dabei leichter den Überblick behalten. Die Normalisierungs-Datei wird übrigens besser nicht untergeordnet, sondern sie wird direkt mit der HTML-Datei verknüpft. Und das haben Sie ja bereits gemacht...
4. Nachdem Sie css-Dateien zusammengeführt haben, muss die Datei styles.css ebenfalls mit der HTML-Datei verknüpft werden, im Head der Datei index.html sieht der Code nun so und die Dokumentstruktur wie darunter abgebildet aus,:
5. Da für Erweiterungen von Websites fast aussschließlich jQuery-basierter Code und Plugins eingesetzt werden ist es sinnvoll, das Framework gleich zu Beginn zu integrieren und dabei lokal zu sichern. Laden Sie die aktuelle Version von jQuery aus dem www und sichern Sie den Code in einer JavaScript-Datei in Ihrem assets-Verzeichnis.
Verknüpfen sie anschließend die jQuery-Datei mit der HTML-Datei:
Testen Sie vorsichtshalber, ob jQuery auch wirklich geladen wird, geben Sie dazu diesen Code in den Head der Datei index.html ein:
if (window.jQuery)
alert ("jQuery läuft");
else
alert("nix ist");
Mit diesem Code wird bei Aufruf der Seite ein Meldungsfenster angezeigt, in dem entweder nix da oder - wenn jQuery geladen wurde - jQuery läuft ausgegeben wird.
Wenn auf Ihrer Seite alles ok ist, können Sie den Code wieder entfernen und mit dem nächsten Arbeitspaket weiter machen: Viewports und Breakpoints einrichten.