Was ist Responsive Webdesign?

Eine Definition von Responsive Webdesign könnte wie folgt lauten:

Responsives Design umfasst die Gestaltung reaktionsfähiger Websites, die sich dem Benutzerverhalten und der Anzeigeumgebung (Gerätetyp, Bildschirmgröße, Auflösung und Ausrichtung) flexibel anpassen, um den Nutzer die größtmögliche Benutzerfreundlichkeit bieten zu können.

 

Warum ist Responsive Webdesign notwendig?

Als die Popularität mobiler Geräte zum ersten Mal zunahm, mussten Webdesigner ein besseres Seherlebnis auf den kleinen Bildschirmen bieten. Die beste Lösung war die Erstellung einer separaten mobilen Site.

Dann kamen weitere Geräte mit unterschiedlichen Bildschirmgrößen und Auflösungen auf den Markt. Die Designer erkannten, wie unpraktisch und kostspielig es sein kann, unterschiedliche Versionen einer Website für jedes Gerät und jede Größe zu erstellen.

Verbraucher erwarten heutzutage, dass sie auf einem Tablet und einem mobilen Gerät genauso einfach im Internet surfen können wie auf einem Desktop-Computer.

Wie funktioniert Responsive Webdesign?

Es gibt zwei Hauptprinzipien für ein responsives Design. Natürlich gibt es andere Prinzipien, die in bestimmten Designs zum Tragen kommen, aber diese zwei verbindet alle responsiven Sites:

• Fluid-Grid-Systeme
• Medien-Anfragen

Fluid-Grid-Systeme

Anstatt ein Layout basierend auf starren Pixeln zu entwerfen, wird Fluid-Grid-System in Bezug auf die Proportionen entworfen.

Wenn Sie also drei Spalten haben, würden Sie nicht genau angeben, wie breit die einzelnen Spalten sein sollen, sondern wie breit sie im Verhältnis zu den anderen Spalten sein sollen. Spalte 1 sollte die Hälfte der Seite einnehmen, Spalte 2 30% und Spalte 3 beispielsweise 20%.

Medien wie Bilder werden ebenfalls relativ in der Größe angepasst. Auf diese Weise kann ein Bild innerhalb seiner Spalte oder eines relativen Gestaltungselements bleiben.

Um die Proportionen für jedes Seitenelement zu berechnen, müssen Sie das Zielelement durch seinen Kontext teilen, das sieht wie folgt aus:

Zielgröße / Kontext = relative Größe

Angenommen, Sie arbeiten an einer Website mit einem Wrapper, mit dem die Website mit einer maximalen Breite von 960 Pixel angezeigt wird, und das Gerät verwendet eine maximale Browserfensterbreite von 1280 Pixel.

Die 960 Pixel sind unsere Zielgröße. Der Kontext sind die 1280 Pixel.

960/1280 = 75%

Dieses Prinzip gilt auch für alle untergeordneten Elemente in Ihrem Wrapper. Angenommen, Sie verwenden einen zweispaltigen Ansatz für Ihr Layout. Die Spalten sollen gleich groß sein und einen Abstand von 20 Pixel haben (so dass jede Spalte 470 Pixel breit ist).

Wir verwenden dieselbe Formel erneut für die Spalten und den Rand:

470/960 = 48,9% (für jede Spalte)

20/960 = 2,2% (für die Marge)

Media Queries und Breakpoints

Fluidraster sind ein sehr wichtiger Bestandteil bei der Entwicklung eines responsiven Designs, aber sie können uns nur so weit bringen. Wenn die Breite des Browsers zu schmal wird, kann das Design ernsthaft zusammenbrechen. Beispielsweise funktioniert ein komplexes dreispaltiges Layout auf einem kleinen Mobiltelefon nicht sehr gut. Glücklicherweise hat Responsive Design dieses Problem mithilfe von Medienabfragen behoben.

Medienabfragen dienen dazu, das Layout der Site zu ändern, wenn bestimmte Bedingungen erfüllt sind und die Elemente neu angeordnet werden sollen.

Die Umsetzung erfolgt mittels CSS. Sie können dann eine Reihe von CSS-Befehlen für jeden Breakpoint definieren.

Breakpoints sind also „Browserbreiten“, bei denen der Inhalt Ihrer Website reagiert, um den Benutzern das bestmögliche Layout zu bieten.

Es ist auch nützlich, Haltepunkte für kleine Änderungen anzupassen. Das heißt, Sie können die Ränder oder den Abstand für ein Element ändern. Oder Sie können die Schrift vergrößern. Auf diese Weise wird das Layout natürlicher.

Um den Text für das Lesen zu optimieren, sollten Sie bis zu 80 Zeichen pro Zeile in Betracht ziehen. Das sind ungefähr zehn Wörter auf Englisch. Sie sollten einen Haltepunkt finden, wenn die Breite des Textblocks zehn Wörter überschreitet.

Es ist auch keine gute Idee, Ihre Inhalte vollständig auszublenden, nur weil sie nicht auf den Bildschirm passen. Denken Sie daran, dass eine Anzeigegröße kein definitiver Hinweis auf den Wunsch des Benutzers ist.

Es gibt verschiedene Ansätze, um Haltepunkte für das responsive Webdesign zu erstellen. Ein idealer Einstieg ist meistens das Beginnen mit einer kleinsten Bildschirmgröße. Von dort aus können Sie nach oben gehen, um zu vermeiden, dass in den Medienabfragen sog. „Totzonen“ erstellt werden.

Responsive Website erstellen lassen

Responsive Design ist bei Webiness Standard für alle entworfenen und entwickelten Websites.

Unsere Websites bieten HTML5, Unterstützung für Retina-Bilder und benutzerdefiniertes Design – ganz zu schweigen von der Tatsache, dass sie mit WordPress, dem weltweit führenden Content-Management-System und der weltweit führenden Website-Plattform, erstellt wurden.