4. Erweiterte Konstruktionstechniken

HTML stellt den Content und die Verlinkung zwischen Seiten bereit. CSS ist für das Layout und Design zuständig und macht die Seite visuell ansprechend.

Es gibt viele unterschiedliche Geräte mit verschiedenen Bildschirmauflösungen, vom Handy bis hin zu Ultra-HD-Monitoren. Zudem ändern sich die Anforderungen, je nachdem ob ein Gerät im Hoch- oder Querformat verwendet wird.

Responsives Web-Design passt das Layout einer Website flexibel an die unterschiedlichen Bildschirmgrößen und -auflösungen verschiedener Geräte an, sodass die Seite auf jedem Gerät gut aussieht.

Die Unterteilung des Inhalts in kleinere Einheiten, sogenannte Kacheln, die auf einem Gitter positioniert werden, erleichtert die Anpassung des Layouts auf verschiedene Endgeräte.

Absolute Einheiten wie Pixel verhalten sich auf unterschiedlichen Geräten unterschiedlich. Flexible Einheiten wie Prozent oder em sind besser geeignet, da sie sich den Bildschirmgrößen anpassen.

Der Web Inspector bietet eine Funktion zur Simulation verschiedener Endgeräte. Mit der Tastenkombination Ctrl-Shift-M (bzw. Cmd-Opt-M bei MacOS) kann man die Darstellung für unterschiedliche Geräte testen.

Auf kleineren Geräten sollte der Content anders verteilt werden. Unwichtige Informationen können weggelassen oder Menüs eingeklappt werden, um den begrenzten Platz effizient zu nutzen.

Der Mauspfeil wird durch ein Symbol ersetzt, das einen Finger darstellt, um die Touch-Bedienung zu simulieren. Mouseover-Effekte funktionieren in dieser Emulation nicht.

CSS ermöglicht es, die Position von Elementen auf einer Webseite zu steuern und festzulegen, wie diese zueinander angeordnet sind.

Ein lineares Seitenlayout bedeutet, dass alle Elemente in der Reihenfolge untereinander erscheinen, in der sie im HTML definiert sind.

Ein lineares Layout wirkt einfach und wenig zeitgemäß, da es keine Trennung von Navigation und Content bietet und alle Elemente nur untereinander dargestellt werden.

Ein float-basiertes Layout verwendet die „Float“-Eigenschaft, um Elemente nebeneinander oder untereinander zu platzieren, je nachdem, ob der Wert „left“ oder „right“ gesetzt ist.

Die „Float“-Eigenschaft schiebt Elemente so weit wie möglich nach links oder rechts, um sie nebeneinander darzustellen, abhängig von den eingestellten Werten „left“ oder „right“.

Die Eigenschaft „clear: both“ verhindert, dass Elemente neben gefloateten Elementen erscheinen, und stellt sicher, dass sie wieder untereinander stehen.

Es ist schwierig, Inhalte vertikal zu zentrieren, gleiche Höhen/Breiten für untergeordnete Elemente zu gewährleisten und Spalten mit gleicher Höhe zu erstellen.

Das Flexbox-Layout vereinfacht die Positionierung von Elementen erheblich und löst Probleme wie vertikale Zentrierung und gleiche Höhen/Breiten bei flexiblen Boxen.

Die Hauptachse bei Flexbox wird mit der Eigenschaft „flex-direction“ gesteuert. Standardmäßig ist sie auf „row“ gesetzt, kann aber mit „row-reverse“ geändert werden.

Flexbox bietet Entwicklern große Freiheiten, komplexe Layouts einfach zu erstellen und viele Probleme zu vermeiden, die bei float-basierten Layouts auftreten.

Media Queries sind spezielle CSS-Regeln, die abhängig von Bildschirmgrößen und -orientierungen bestimmte Layout-Anweisungen auswählen und anwenden.

Sie werden verwendet, um geräteabhängige Layout-Anpassungen vorzunehmen, z. B. unterschiedliche Darstellungen für Smartphones, Tablets oder Desktops.

Media Queries beginnen mit dem Präfix „@media“.

Media Queries können zwischen Bildschirm- und Druckmedien unterscheiden, sodass z. B. beim Drucken bestimmte Elemente wie die Navigation weggelassen werden können.

Damit sie leicht zu finden und zu pflegen sind, wenn man spezifische Regeln für verschiedene Geräte anpasst.

Ältere Tablets haben im Hochformat manchmal eine Auflösung von 768 Pixeln oder mehr, daher wurde 767 Pixel als Grenze für Smartphones festgelegt.

Die Flexbox stellt sicher, dass die Breiten der beiden Elemente gleich groß sind, wodurch sie nebeneinander anstatt untereinander erscheinen.

Mit „min-width“ und „max-width“ können verschiedene Endgeräte gezielt abgefragt und optimierte Layout-Regeln für diese Geräteklassen festgelegt werden.

Weil die Browser-Unterstützung für diese neuen Funktionen noch sehr begrenzt ist.

Die Nutzung eines CSS-Frameworks spart Entwicklungszeit, da es bereits Lösungen für häufige Designanforderungen wie Grid-Systeme und UI-Elemente (Menüs, Buttons) bietet.

Bootstrap ist das bekannteste und am häufigsten verwendete CSS-Framework, ursprünglich von Twitter entwickelt, das ein flexibles Grid-System und viele vorkonfigurierte UI-Komponenten bietet.

Bootstrap nutzt ein 12-Spalten-Grid-System, bei dem Inhalte in Zeilen und Spalten aufgeteilt werden. Durch Klassen wie „col-lg“ und „col-sm“ werden Layouts für verschiedene Bildschirmgrößen definiert.

Für große Bildschirme wird beispielsweise eine 4:8-Aufteilung der Spalten genutzt („col-lg–4 col-lg–8“), während für kleinere Bildschirme die gesamte Breite verwendet wird („col-sm–12“).

Bootstrap kann zu einem komplexen und schwer lesbaren HTML-Code führen, da oft viele CSS-Klassen kombiniert werden müssen, um das gewünschte Layout zu erreichen.

Tailwind verfolgt einen „Utility-first“-Ansatz, bei dem keine fertigen Layouts oder Komponenten enthalten sind. Entwickler erstellen Layouts, indem sie zahlreiche universelle CSS-Klassen kombinieren.

Tailwind bietet sehr flexible, universelle CSS-Klassen, die es ermöglichen, das Design vollständig individuell zu gestalten, ohne dass das Framework selbst verändert werden muss.

Material Design, das sich an der Design-Philosophie von Google für Android orientiert, ist stark komponentenorientiert und wird oft für Apps genutzt.

Pico.css ist ein Microframework, das sinnvoll ist, wenn man sich mehr auf das HTML konzentrieren möchte und weniger Aufwand für das Layout betreiben will.

Kommerzielle Templates bieten oft professionelles Design, eine große Auswahl an Seitentypen und ermöglichen es, Websites sehr schnell aufzubauen.

Foundation ist ähnlich zu Bootstrap, bietet aber einfacheres Markup und weniger CSS-Klassen, was zu semantischeren HTML-Strukturen führt.