Was bedeutet responsive?

Responsive-Techniken

Praktisches Beispiel: –

Wenn deine Freundin dir aus der U-Bahn schreibt, dass deine Webseite hässlich ist…

Du sitzt zuhause an deinem Laptop und schreibst den Code in Visual-Studio-Code für deine neue coole Webseite. Danach gehst du her und schickst den Link deiner Freundin, die vielleicht gerade in der U-Bahn sitzt und dann deine Webseite öffnet: Sie aber öffnet die Webseite mit ihrem Handy. Hier wird die Webseite völlig anderst dargestellt, als zuhause auf deinem Laptop.

Wenn du deine Webseite nicht responsive machst, kann es ein böses Erwachen geben!

Wenn deine Freundin also dann zurückschreibst: “ Hilfe, die Seite ist hässlich, brauchst du dich nicht zu wundern-.)

Hast du hier z. B. Tabellen eingebaut, die nicht responsive sind, so kann es sein, dass die Tabellen verschoben angezeigt werden auf dem Handy., Texte und layout nicht stimmen. etc. Das heißt, du musst deine Webseite natürlich auch auf anderen Endgeräten testen.

z. B. Handy, Tablets. Es gibt auch Tools dazu.

Um Responsivität herzustellen gibt es verschiedene Techniken. Responsivität geht nicht von alleine! Hier musst du Code-Techniken anwenden und viel testen.

Einige Möglichkeiten:

CSS-Grid – Beispiel Video

CSS Flexbox Beispiel Video

Media-Query

Bootstrap

Tailwind etc.

Schau einfach auf youtube, dort findest du sehr viele Erklärungen dazu.

Nach oben scrollen