Responsive Website erstellen mit Html5 und CSS3

Von einer responsiven Website spricht man, wenn sich das Design und das Layout der Internetseite automatisch an das Wiedergabegerät anpasst. Waren früher noch umfangreiche Maßnahmen erforderlich, um eine Webseite allein in den unterschiedlichen Browsern einheitlich anzuzeigen, lässt sich mit modernem Scripting in Html5 in Kombination mit dem großen Umfang von CSS3 heutzutage ganz leicht ein responsives Design bewerkstelligen. Vor allem muss im Header der Website der Viewport entsprechend eingerichtet werden, dies ist nur eine Zeile Quellcode.

Den Aufbau der Website erledigt man im Body der Seite in Html5 ganz einfach als Tabelle, wobei jedes Element eine eigene Tabellenreihe darstellt. Der Html-Quelltext moderner, responsiver Webseiten ist äußerst kurz. Jegliche Formatierung steuern Sie im CSS3, dort stellen Sie ganz einfach ein, welche Tabellenreihe sich an welcher Stelle der Website befinden soll. Eventuelles Bildmaterial legen Sie einfach in die entsprechende Tabellenreihe. Dort geben Sie nicht nur die Position der Grafik an, auch die Bildgröße und das Verhalten werden über ein externes Stylesheet geladen.

Neue Tags in Html5 – GoodBye Div-Suppe!

Es ist für ein modernes und responsives Webdesign nicht länger nötig, die einzelnen Elemente auf der Homepage in div-Containern zu hinterlegen und diese mit dem Float-Befehl über den Bildschirm zu schubsen. Anstatt mit konkreten Pixel-Angaben und absoluter Positionierung werden bei responsiven Seiten Prozentangaben für die Positionierung verwendet, wobei 100 % der gesamten Bildschirmbreite entsprechen. Anstatt der früheren div-Container lassen sich spezielle Bereiche auf der Website nun direkt ansprechen, was die Arbeit in CSS3 ungemein erleichtert und den Quellcode der Webseite insgesamt noch mehr verschlankt. Folgende Elemente sind neu in Html5 hinzugekommen:

– <header> </header>

Neben dem Titel der Homepage ist im Header-Tag meist zusätzlich ein

Logo hinterlegt, auch die Hauptnavigation der Website liegt im <header>

Dieser Tag liegt im Body der Internetseite und ist nicht mit dem Seiten-Header

zu verwechseln!

– <nav> </nav>

In diesem Teil der Website liegt ausschließlich die Seitennavigation, welche auf

allen Unterseiten stets einheitlich aussieht.

– <main> </main>

Im Main-Bereich ist Platz für den gesamten Inhalt der Website, inklusive

eventueller Seitenbereiche. Pro Unterseite ist ausschließlich ein Main-Tag

zulässig!

– <article> </article>

Hier hinterlegen Sie den Haupt-Content der Internetseite. Das können neben

beschreibenden Texten außerdem Bilder oder Videos sein.

– <section> </section>

Um Bereiche zu gruppieren, die inhaltlich zusammengehören, verwenden Sie

das Section-Tag. Dieses findet sich häufig im <article>-Teil, aber auch im

<aside>-Tag kann eine <section> durchaus sinnvoll sein.

– <aside> </aside>

Hier werden zusätzliche Informationen hinterlegt, auch Grafiken, Audiodateien

oder Bewegtbilder eignen sich. Der Inhalt der Unterseite sollte auch ohne diese

Informationen im <aside>-Abschnitt jederzeit nachvollziehbar sein.

– <footer> </footer>

Seinem Namen entsprechend befindet sich dieses Element im unteren Bereich

der Webseite und enthält zum Beispiel einen Link zu den allgemeinen

Geschäftsbedingungen, dem Impressum, der Datenschutzerklärung und

so weiter.

Mit dem Container <address> lässt sich die Positon sämtlicher Kontaktdaten des Unternehmens leicht im CSS3 ansprechen, wobei darauf zu achten ist, dass sich die Elemente nicht beliebig ineinander verschachteln lassen. In einer <section> sollte zum Beispiel kein <article> liegen, wobei es in einem <article> beliebig viele <sections> geben kann.

Ganz einfach selbst eine eigene Homepage bauen und veröffentlichen

Es ist aufgrund der Vielzahl an ausgetüftelten Programmen am Markt nicht mehr nötig, sich selbst mit Programmierung oder Scripting auszukennen, um eine professionelle und responsive Webseite selbst zu erstellen. Auch absolute Laien auf dem Gebiet Webprogrammierung können eine Webseite erstellen per Drag and Drop. Dabei lassen sich die einzelnen Elemente ganz einfach im Layout positionieren und nach Belieben modifizieren. Das Tolle an dieser Art der Webseitenentwicklung ist, dass Anwender sofort das endgültige Ergebnis sehen. Passt etwas noch nicht zu 100 Prozent, kann ein beliebiges Bild und jedes Element auf der Website ganz leicht verschoben, verkleinert oder animiert werden. Typisch sind zum Beispiel anklickbare Grafiken, welche dann auf eine Unterseite oder eine andere Webseite verweisen. Auch mit Mouse-Over Effekten lassen sich optische Highlights auf der eigenen Homepage spielend leicht erzeugen, so kann ein Bild etwa vergrößert werden, wenn der Internetnutzer mit der Maus darüberfährt.

Je nach Software kann der Quellcode einer per Drag and Drop erstellten Internetseite manchmal recht komplex ausfallen, vor allem WordPress erzeugt häufig unnötige Html-Schnipsel, wenn man dort die Drag and Drop Funktion verwendet. Am besten ist sicher eine Kombination aus Baukastensystem und Scripting geeignet. So spart man sich wertvolle Zeit mit dem Layout der Webseite und kann bei Bedarf eingreifen, sollte eine Software unnötigen Quellcode erzeugen.

Wenn der Aufwand trotzdem zu groß erscheint oder Fragen aufkommen, empfiehlt es sich, sich an eine professionelle Agentur zu wenden. Die Werbeagentur Allgäu beispielsweise bietet ein umfassendes Anbot für alle Belange an und baut eine Website nach ganz individuellen Wünschen auf.