Was ist Responsive Design? (Erklärvideo und Infografik)

sich anpassendes Webdesign

Es hat ein Jahrzehnt gedauert sich anpassendes Webdesign (RWD) seitdem zum Mainstream Cameron Adams stellte sich zuerst vor das Konzept. Die Idee war genial - warum können wir keine Websites entwerfen, die sich an das Ansichtsfenster des Geräts anpassen, auf dem es angezeigt wird?

Was ist Responsive Design?

Responsive Web Design (RWD) ist ein Webdesign-Ansatz, der darauf abzielt, Websites so zu gestalten, dass sie ein optimales Seherlebnis bieten - einfaches Lesen und Navigieren mit einem Minimum an Größenänderung, Schwenken und Scrollen - auf einer Vielzahl von Geräten (von Mobiltelefonen bis hin zu Desktop-Computern) Monitore). Eine mit RWD entworfene Site passt das Layout an die Anzeigeumgebung an, indem flüssige, proportionale Raster, flexible Bilder und CSS3-Medienabfragen verwendet werden, eine Erweiterung der @ media-Regel.

Wikipedia

Mit anderen Worten, Elemente wie Bilder können ebenso wie das Layout dieser Elemente angepasst werden. In diesem Video wird erklärt, was Responsive Design ist und warum Ihr Unternehmen es implementieren sollte. Wir haben das kürzlich neu entwickelt DK New Media Website zu reagieren und arbeiten jetzt an Martech Zone das Gleiche tun!

Die Methode zum Erstellen einer reaktionsfähigen Site ist etwas langwierig, da Sie eine Hierarchie für Ihre Stile benötigen, die basierend auf der Größe des Ansichtsfensters organisiert ist.

Browser sind sich ihrer Größe bewusst, daher laden sie das Stylesheet von oben nach unten und fragen die entsprechenden Stile nach der Größe des Bildschirms ab. Dies bedeutet nicht, dass Sie für jede Bildschirmgröße unterschiedliche Stylesheets entwerfen müssen, sondern nur die erforderlichen Elemente verschieben müssen.

Das Arbeiten mit einer Mobile-First-Mentalität ist heute der Basisstandard. Best-in-Class-Marken denken nicht nur darüber nach, ob ihre Website für Handys geeignet ist, sondern auch über das gesamte Kundenerlebnis.

Lucinda Duncalfe, CEO von Monetate

Hier ist eine Infografik von Monetate, die die potenziellen Vorteile der Erstellung eines reaktionsschnellen Designs für mehrere Geräte veranschaulicht:

Responsive Web Design Infografik

Wenn Sie eine reaktionsfähige Site in Aktion sehen möchten, zeigen Sie auf Ihre Google Chrome Browser (ich glaube, Firefox hat die gleiche Funktion) zu DK New Media. Jetzt auswählen Ansicht> Entwickler> Entwicklertools aus dem Menü. Dadurch werden eine Reihe von Tools am unteren Rand des Browsers geladen. Klicken Sie auf das kleine Handy-Symbol ganz links in der Menüleiste der Entwicklertools.

Responsive-Testing-Chrom

Sie können die Navigationsoptionen oben verwenden, um die Ansicht von Querformat zu Hochformat zu ändern oder sogar eine beliebige Anzahl vorprogrammierter Ansichtsfenstergrößen auszuwählen. Möglicherweise müssen Sie die Seite neu laden, aber es ist das coolste Tool der Welt, um Ihre reaktionsfähigen Einstellungen zu überprüfen und sicherzustellen, dass Ihre Website auf allen Geräten gut aussieht!

3 Kommentare

  1. 1
  2. 2

    Vielen Dank Douglas für diesen gut erklärten Artikel. Dem muss ich aber inhaltlich zustimmen. Für die meisten Websites, die wir erstellen, wird ein responsives Layout nicht ausreichen. Wir brauchen responsive Inhalte. Aber für die einfacheren Websites werden wir sicherlich Ihren gut dokumentierten Artikel verwenden, wie man damit umgeht!

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.