Was ist Responsive Web Design?

• April 23, 2024

Es gibt drei Hauptmerkmale eines reaktionsschnellen Webdesigns: flüssige Layouts, anpassbare Bilder und Medienabfragen. Medienabfragen sind für das Webdesign nicht wirklich neu. Beginnend als Medientypen in CSS2.1 konnten wir Stylesheets sowohl für das Web als auch für den Druck entwerfen, um sicherzustellen, dass die Webseite auf dem Bildschirm und beim Drucken gleich aussieht. Dies führte zu Medienabfragen in CSS3. Diese Abfrage überprüft die Breite des Mediengeräts (maximale Gerätebreite) und testet sie mit einem festgelegten Wert wie 480px oder 768px. Als Antwort auf diese Abfrage verwenden wir CSS-Stile, um das flüssige Layout zu ändern und die Größe der Bilder für den Bildschirm zu ändern.

Sie können leicht testen, ob eine Website ein ansprechendes Design hat. Beginnen Sie mit dem Browser in voller Breite Ihres Computerbildschirms. Ziehen Sie dann den rechten Rand des Browsers nach links, um die Breite des Browserfensters zu verringern. Sie sollten sehen, dass die Bilder kleiner werden und das Layout die schwebenden Divs, die nebeneinander liegen, vertikal stapelt. Wenn wir beispielsweise sechs Bilder (sechs Divs) pro Zeile auf einer Galerieseite im Vollbildmodus haben und die Bildschirmbreite verringern, wird die Anzahl der Bilder in einer Zeile nach Bedarf schrittweise reduziert und gestapelt. Sobald die Breite auf einen bestimmten Betrag reduziert ist, werden die Bilder selbst kleiner. Wenn Sie genau hinschauen, werden Sie auch feststellen, dass bestimmte Designelemente, wie z. B. die Navigationslinks, möglicherweise auf ein Symbol reduziert werden oder sogar verschwinden. Dies wird auch vom CSS-Stylesheet gesteuert.

Berücksichtigen Sie beim Entwerfen von Websites nicht nur, wie die Designelemente der Webseite bei voller Bildschirmbreite aussehen, sondern auch, wie sie beim Stapeln aussehen. Überlegen Sie, welche Designelemente bei geringerer Bildschirmbreite vom Bildschirm entfernt werden können, ohne die Funktionalität der Website zu beeinträchtigen. Da sich die Funktionen und Technologien für reaktionsschnelles Design schnell ändern, kann es zeitaufwändig sein, mit allen Verbesserungen Schritt zu halten. Wenn Sie Ihre Zeit lieber mit Entwerfen als mit Codieren verbringen möchten, werfen Sie einen Blick auf einige der schönen reaktionsschnellen Themen, die für Wordpress verfügbar sind. Wenn Sie eine kleine Designfirma sind, sollten Sie beim Entwerfen von Websites von einem dieser reaktionsschnellen Themenlayouts ausgehen.

Video-Anleitungen: HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch [#1] (April 2024).