Responsive-Web-Techniken- Schulhof-Programmierung
Was sind responsive-Techniken?
Wenn du z. B. als Frontend-Entwickler einsteigen möchtest, solltest du dich natürlich mit sogenannten responsiven Techniken auskennen.
Das Desaster, wenn du nicht auf ein responsives Design achtest! – Die Webseite sieht beschissen aus….
Praktisches Beispiel – Der Kumpel In der Ubahn …
Stell dir vor, du codest eine Webseite in Visual-Studio-Code und diese sieht deiner Meinung nach richtig cool aus auf deinem Laptop. Der Live-Server zeigt dir die Seite super an. Fröhlich gehst du her und veröffentlichst diese und sendest den Link deinem Kumpel, der gerade in der U-Bahn sitzt und auf seinem Handy die neuesten Nachrichten srcollt. Der Kumpel liest deine Zeilen, klickt auf den Link und erschrickt über deine Webseite. Die Bilder sind verrutscht, die Tabellen nicht schön dargestellt. Alles wirkt etwas verschoben auf seinem Handy.
Der Kumpel schreibt dir folgende Zeilen zurück:
„Hey, Alter, die Webseite sieht beschissen aus, ich hab schon Kopfschmerzen, damit gewinnst du nicht mal einen alten Blumentopf….“
Responsive Webdesign bezieht sich auf Techniken, die es einer Website ermöglichen, sich an verschiedene Bildschirmgrößen und Gerätetypen anzupassen. Hier sind einige responsive Techniken in der Webentwicklung, mit denen du dich zusätzlich beschäftigen solltest. Ganz wichtig sind Media-Queries.
- Media Queries: Sie ermöglichen das Festlegen von CSS-Stilen basierend auf verschiedenen Bildschirmbreiten, -höhen und -gerätetypen.
- Fluid Grids: Verwenden von prozentualen Einheiten statt festen Pixelwerten für Layouts, sodass sich die Inhalte relativ zur Bildschirmgröße skalieren.
- Flexible Bilder und Medien: Bilder und Videos können mit CSS so angepasst werden, dass sie sich je nach Bildschirmgröße verändern, um eine optimale Darstellung zu gewährleisten.
- Flexible Typografie: Die Größe von Texten und Schriftarten kann relativ zur Bildschirmgröße angepasst werden, um eine gute Lesbarkeit zu gewährleisten.
- Viewport Meta Tag: Festlegen des Viewports auf mobilen Geräten, um die Breite der Website auf den Bildschirm des Geräts anzupassen.
- CSS Frameworks: Die Verwendung von Frameworks wie Bootstrap oder Foundation, die bereits responsive Funktionen und Grid-Systeme enthalten, um die Entwicklung zu beschleunigen.
- Flexbox und Grid Layout: Diese CSS-Layout-Techniken bieten eine flexible Möglichkeit, Inhalte zu organisieren und anzupassen, was besonders nützlich für responsive Designs ist.
Das Ziel all dieser Techniken ist es, eine konsistente und benutzerfreundliche Erfahrung unabhängig von der Bildschirmgröße oder dem Gerät zu bieten.
Tipp von Schulhof-Programmierung:
Schau dir folgende Techniken unbedingt an: CSS-Grid – CSS- Flexbox – Media-Query – Tailwind – Bootstrap. Du findest alles auf youtube. Und teste deine Anwendungen die du programmiert hast unbedingt, bevor du sie veröffentlichst.
Zurück zur Cyber-Übersicht – Wie kann ich cool programmieren lernen?