Wie macht man eine HTML Webseite responsive?
Ich habe in einem div Container zwei div Container nebeneinander.
Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?
8 Antworten
CSS und JavaScript
Beides kann auf den verfügbaren Platz reagieren, sodass man dann an bestimmten "Kipp-Punkten" das Design oder sogar das ganze Verhalten verändern kann.
Ist natürlich ziemlich aufwändig, deshalb gibt's Frameworks (z.B. Bootstrap), die einige wesentliche Dinge (z.B. Grid) liefern, die - richtig genutzt - von sich aus schon responsive sind.
Ich persönlich würde das nicht selber machen, sondern immer auf sowas wie Bootstrap zurückgreifen.
Ich meine den direkten Vergleich mit dem gleichen Web-Design, nur eben nicht responsive.
Ein responsive Grid mag noch schnell gemacht sein, aber eine komplexe Website so aufzubauen, dass sie auf dem Smartphone genauso intuitiv funktioniert, ist dann doch etwas mehr Aufwand.
Das hängt natürlich auch immer von der Website ab, ein simpler Blog ist verhältnismäßig schnell gemacht, eine Seite, die viele komplexere Tabellen braucht, muss da ggf. einen ganz anderen Web gehen - oder horizontal scrollen lassen, aber das ist doof ^^
Schau dir mal media queries für CSS an: https://html-einfach.de/html-lernen-kat/html-grundlagen/#7
Responsives Design beschreibt nur, dass sich dein Design auf die unterschiedlichen Anforderungen der Anzeigegeräte anpasst. Dafür gibt es verschiedene Angriffspunkte:
VIEWPORT-META-TAG
Zu allererst solltest du im HEAD-Bereich deiner Webseite das viewport-meta-tag setzen. Das sorgt dafür, dass der Inhalt deiner Webseite grundlegend an den Viewport (Also den Bildschirm) des Anzeigegeräts angepasst wird:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Was genau dieses Tag macht, kannst du dir Hier anschauen.
CSS
Für die nächsten 90% deines Responsiven Designs brauchst du CSS (Cascading Style Sheet). CSS gibt deinen Inhalten ihre Form und Farbe – und mithilfe von sog. media-queries sogar an verschiedene Situationen angepasst.
Schreibe folgendes in dein Stylesheet:
@media only screen and (max-width: 1000px) { }
Jede CSS-Style-Regel, die du jetzt in diese Media-Query setzt, wird erst dann aktiv, wenn das Browserfenster eine Breite von unter 1000 Pixeln hat.
Hier findest du eine Übersicht über Media-Queries.
JAVASCRIPT
Und jetzt die letzten paar Prozentpunkte: JavaScript. Anmekrung dazu: Sehr wahrscheinlich wirst du für dein Responsives Design wenig bis kein JavaScript brauchen – und wenn dann kein kompliziertes.
JavaScript ist grundsätzlich für die Funktion deiner HTML-Elemente zuständig. Wenn du z.B. eine Navigationsleiste auf dem Handy verschwinden lassen, und sie per Knopfdruck auklappen lassen willst, lässt sich fast alles daran (Das Verschwinden lassen, andere Anordnung der Navigationslinks, etc.) mit den Media-Queries lösen.
Fast. Denn für die Funktion dieses Knopfs brauchst du jetzt JavaScript.
Üblicherweise arbeitet man dabei schlicht mit Flexboxen und relativen Wertangaben. Und natürlich korrekter Struktur des DOM.
Beschäftige dich grundlegend mit dem Flexbox-Model, CSS Grid sowie den Funktionen, die mittlerweile in CSS existieren und sehr nützlich sind. Gerade durch letztere kann man sogar teils gänzlich auf Media Queries verzichten.
Mithilfe von Media Queries kannst du das Aussehen und Verhalten von Elementen unter anderem vom Viewport abhängig machen. Je nach Endgerät bzw. verfügbaren Raum für deine Elemente definierst du dann angepasste Regeln.
Um es jetzt nicht in die Tiefe ausufern zu lassen, einfach mal dein Beispiel aufgreife und dir anhand eines kleinen Code-Snippets zeige. Dir jedoch anrate, es nicht einfach bloß zu übernehmen, sondern dir auch Grundlagenwissen anzulesen.
HTML:
<div class="flex-grid">
<div class="column"></div>
<div class="column"></div>
</div>
CSS:
*, *::before, *::after {
box-sizing: border-box;
}
.flex-grid {
display: flex;
flex-wrap: wrap;
gap: 1em; /* space between */
}
.column {
flex-basis: 100%;
}
/* Mobile-first queries */
@media (min-width: 48em){
.column {
flex: 1;
}
}
Frameworks á la Bootstrap sind zwar nett und für ein schnelles Prototyping nicht verkehrt, darüber hinaus sollte man sich aber gut überlegen, ob und wenn ja, welche Teile man wirklich braucht - und schlussendlich benutzen möchte.
Wie ich auch schon unter der Antwort von @Palladin007 kommentiert habe, kann und möchte ich solchen Frameworks überhaupt nicht deren Daseinsberechtigung absprechen. Sie sind in Summe aber eher zu fette Kühe, die übers Eis geschubst werden. Anders formuliert, häufig nur ein Bruchteil (~10 %) wirklich genutzt wird.
Schlussendlich liegt es auch an dir, deinem Interesse und persönlichen Präferenzen, ob du lieber etwas lernst oder bloß den "Kuhschubser" spielst. Falls du mehr über Flexbox und CSS Grid erfahren möchtest, sind hier noch zwei nützliche Links.
LG medmonk
Dem widerspreche, sofern sich dein "ziemlich aufwändig" nicht alleine auf den Anfänger ohne Vorkenntnisse bezieht. Ansonsten ist das nun wirklich keine Raketenwissenschaft, erst recht nicht dank Flexbox und CSS Grid.
Eine einfaches Grid ohne Schnickschnack, ist in CSS bereits mit einer Handvoll an Code-Zeilen geschrieben und deckt schon das wesentliche ab. Wenn man es nicht besser weiß oder kann, schießt man halt mit Kanonen auf Spatzen.
Letzteres nicht dir unterstelle, sondern ganz allgemein meine. Ich spreche den Frameworks nicht ihre Daseinsberechtigung ab. Das kann und möchte ich auch gar nicht. Beruflich vermeide ich es aber, mir derlei Klötze ans Bein zu binden.
Wenn doch mal nötig und vorgegeben, dann ausschließlich als SCSS Import und auf die Komponenten komprimiert, die auch tatsächlich benötigt werden. Ansonsten sind Bootstrap und Co schnell unnötiger "Overload."
LG medmonk