CONTENT

ARCHITECTURE

Responsive Webdesign

CONTENT

ARCHITECTURE

Responsive Webdesign

CONTENT

ARCHITECTURE

Responsive Webdesign

Responsive Webdesign

Facebook
Twitter
LinkedIn
XING
Email
Print

Responsive Webdesign passt die Darstellung von Inhalten auf einer Seite an die Abmessungen des Bildschirms des Geräts an. Dies steht in direktem Gegensatz zum nicht responsiven Webdesign, das unabhängig von der Größe des verwendeten Bildschirms die gleichen Eigenschaften beibehält.

Responsive Webdesign ist ein Webentwicklungsansatz, bei dem das Erscheinungsbild einer Website dynamisch verändert wird, je nach Bildschirmgröße und Ausrichtung des Geräts, auf dem sie angezeigt wird. Responsive ist ein Ansatz, um das Problem der Gestaltung für die Vielzahl von Geräten zu lösen, die den Kunden zur Verfügung stehen, von winzigen Handys bis hin zu riesigen Desktop-Monitoren.

Responsive Design verwendet so genannte Breakpoints, um zu bestimmen, wie das Layout einer Website aussehen soll: ein Design wird oberhalb eines Breakpoints verwendet und ein anderes Design unterhalb dieses Breakpoints.

Breakpoints basieren in der Regel auf der Breite des Browsers.

Wozu Responsive Webdesign?

Das Ziel des responsiven Webdesigns ist es, den Nutzern einer Website unabhängig von dem Gerät, mit dem sie auf die Website zugreifen, das gleiche Erlebnis zu bieten.

Wenn ein Benutzer vom Desktop auf sein mobiles Gerät umschaltet, wechseln responsive Websites ohne jegliche Eingabe des Benutzers. Dank des responsiven Webcodes werden Bilder, Textinhalte und andere Elemente je nach Bildschirmgröße verschoben und verändert. Responsive Webdesign verhindert Probleme wie zu klein erscheinenden Text auf mobilen Geräten.

Historie des Responsive Designs

Ursprünglich wurden Websites für eine bestimmte Bildschirmgröße entwickelt, da die Auswahl an Geräten begrenzt war. Im Laufe der Zeit wurden jedoch immer mehr Bildschirmgrößen verfügbar.

Die Entwickler begannen, mit verschiedenen Methoden für die Gestaltung von Websites zu experimentieren, um die Benutzerfreundlichkeit zu verbessern. Die von Glenn Davis erfundene Methode der flüssigen Layouts beispielsweise führte dazu, dass der Inhalt einer Website prozentual angezeigt wurde. Diese flüssigen Layouts konnten je nach Bildschirmauflösung und -größe angepasst werden.

Mit der Weiterentwicklung der Technologie kamen auch neue Geräte wie Laptops, Tablets und Smartphones auf den Markt. Diese neuen Geräte zeigten oft Websites an, die umständlich zu bedienen waren. Zu kleiner Text, zu große Bilder und die Unmöglichkeit, zu scrollen, waren häufige Probleme.

Die Entwickler versuchten, den neuen Größenanforderungen zu begegnen, indem sie Websites speziell für mobile Geräte erstellten. Diese mobilspezifischen Websites hatten zwar ihre Vorteile, aber viele Entwickler stellten fest, dass die Entwicklung und Verwaltung dieser Websites viel Zeit in Anspruch nahm, da sie eine separate Subdomain erforderten.

Die Antwort fand sich schließlich im responsiven Webdesign, einem Begriff, der 2010 von Ethan Marcotte geprägt wurde.

In seinem Artikel „Responsive Web Design“ aus dem Jahr 2010 stellte Marcotte die Frage: „Können wir uns wirklich weiterhin dazu verpflichten, jeden neuen User Agent mit einer eigenen, maßgeschneiderten Erfahrung zu unterstützen? Ab einem gewissen Punkt fühlt sich das wie ein Nullsummenspiel an. Aber wie können wir – und unsere Designs – uns anpassen?“

Seine Antwort bildet die Grundlage für das heutige Webdesign.

„Wir können für ein optimales Seherlebnis entwerfen, aber standardbasierte Technologien in unsere Designs einbetten, um sie nicht nur flexibler, sondern auch anpassungsfähiger an die Medien zu machen, die sie wiedergeben“, so Marcotte. „Kurz gesagt, wir müssen responsives Webdesign praktizieren.“

Responsive Design Erlebnis für alle

Devices

Design für verschiedene Geräte

Websites sollten darauf vorbereitet sein, sich an viele Bildschirmgrößen und -abmessungen anzupassen - Desktop, Laptop, Tablet, Handy.

Am besten ist es, dies als ein fließendes Spektrum und nicht als separate Kategorien zu betrachten, da es inzwischen eine Vielzahl von Größen und Proportionen von Geräten gibt. Zudem kommen bei den mobilen Devices Quer- und Hochformat hinzu.

Wie reagiert eine Website auf dem Handy beispielsweise auf Gestenfunktionen wie Streichen und Auf- und Zuziehen? 

Letztendlich sollte sich der Inhalt nach dem Gerät richten und nicht umgekehrt.

Layout

Flexible Raster

Das Gesamtlayout einer Website ist entscheidend für die Aufrechterhaltung des Aussehens und der Lesbarkeit. 

Berücksichtigen werden Spalten, Raster, negativer Raum und der Fluss des Auges auf der Seite. Wenn sich das Ansichtsfenster verkleinert, sollte der Inhalt neu angeordnet werden, um das Layout vertikaler zu gestalten.

Durch die Verwendung flexibler Raster mit relativen Längeneinheiten kann sich ein Layout ändern, während die logische Struktur erhalten bleibt.

Auf einem Laptop können mehrere Spalten gut lesbar und attraktiv sein, aber auf einem mobilen Bildschirm kann der Inhalt überfüllt aussehen und der Text zu klein sein, um lesbar zu sein.

Hier können fließende Raster besonders nützlich sein. 

Navigation

Hamburger-Menü

Die Navigation sieht nicht nur auf den verschiedenen Geräten unterschiedlich aus, sondern auch die Art und Weise, wie die Benutzer mit ihr interagieren, wird sich erheblich ändern.

Auf einem Laptop mit Trackpad zum Beispiel fühlt sich eine Navigationsleiste am oberen oder seitlichen Bildschirmrand natürlich an und ist leicht zu bedienen.

Dies könnte auch bei einem Tablet der Fall sein. Sobald das Gerät jedoch so klein ist, dass es mit einer Hand gehalten werden kann, erwarten die Benutzer eine einhändige Funktionalität. 

Devices

Design für verschiedene Geräte

Websites sollten darauf vorbereitet sein, sich an viele Bildschirmgrößen und -abmessungen anzupassen - Desktop, Laptop, Tablet, Handy.

Am besten ist es, dies als ein fließendes Spektrum und nicht als separate Kategorien zu betrachten, da es inzwischen eine Vielzahl von Größen und Proportionen von Geräten gibt. Zudem kommen bei den mobilen Devices Quer- und Hochformat hinzu.

Wie reagiert eine Website auf dem Handy beispielsweise auf Gestenfunktionen wie Streichen und Auf- und Zuziehen? 

Letztendlich sollte sich der Inhalt nach dem Gerät richten und nicht umgekehrt.

Layout

Flexible Raster

Das Gesamtlayout einer Website ist entscheidend für die Aufrechterhaltung des Aussehens und der Lesbarkeit. 

Berücksichtigen werden Spalten, Raster, negativer Raum und der Fluss des Auges auf der Seite. Wenn sich das Ansichtsfenster verkleinert, sollte der Inhalt neu angeordnet werden, um das Layout vertikaler zu gestalten.

Durch die Verwendung flexibler Raster mit relativen Längeneinheiten kann sich ein Layout ändern, während die logische Struktur erhalten bleibt.

Auf einem Laptop können mehrere Spalten gut lesbar und attraktiv sein, aber auf einem mobilen Bildschirm kann der Inhalt überfüllt aussehen und der Text zu klein sein, um lesbar zu sein.

Hier können fließende Raster besonders nützlich sein. 

Navigation

Hamburger-Menü

Die Navigation sieht nicht nur auf den verschiedenen Geräten unterschiedlich aus, sondern auch die Art und Weise, wie die Benutzer mit ihr interagieren, wird sich erheblich ändern.

Auf einem Laptop mit Trackpad zum Beispiel fühlt sich eine Navigationsleiste am oberen oder seitlichen Bildschirmrand natürlich an und ist leicht zu bedienen.

Dies könnte auch bei einem Tablet der Fall sein. Sobald das Gerät jedoch so klein ist, dass es mit einer Hand gehalten werden kann, erwarten die Benutzer eine einhändige Funktionalität. 

Mobiles Design Suchmaschinen Ranking

Ist Responsive Design wichtig?

Responsive Design ist aus einer Reihe von Gründen wichtig, vor allem wegen der Benutzerfreundlichkeit und der Leistung der Website. Erstens sind Texte und Bilder für Benutzer von Mobiltelefonen oder Tablets leichter zu lesen/anzusehen, da der Bildschirm kleiner ist als der eines normalen Desktop-Computers.

Dies ist besonders wichtig, da das Surfen auf mobilen Geräten immer mehr zunimmt und ein großer Teil des Website-Verkehrs über Social-Media-Links abgewickelt wird. Responsive Design ist auch für Nutzer hilfreich, die ein verkleinertes Desktop-Browserfenster oder eine Split-Screen-Ansicht verwenden.

Außerdem signalisiert es den Suchmaschinen, dass die Seite für jede Betrachtungsweise optimiert ist, was die SEO-Leistung steigert. Zu diesem Zweck kündigte Google 2015 an, dass die mobile Reaktionsfähigkeit einer Webseite zu einem Schlüsselfaktor bei der Bestimmung des Suchmaschinen-Rankings werden würde, wodurch das responsive Design zu einer wichtigen Komponente der wichtigsten Leistungsindikatoren einer Website wurde.

Responsive vs. adaptives Design

Adaptives Design bedeutet, eine unabhängige, leichtere und schlankere, für Mobilgeräte optimierte Version einer Website zu erstellen. Beim mobilen Surfen erkennt man dies daran, dass man auf eine mobile Subdomain umgeleitet wird. Der Begriff wurde 2011 in dem Buch „Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement“ geprägt. Obwohl es viele Jahre lang beliebt war, wird es jetzt zugunsten von responsiven Ansätzen eingestellt.

Adaptives Webdesign hat jedoch einige Vorteile. Mobile Websites können sehr spezifisch darauf zugeschnitten werden, was der Designer den mobilen Nutzern zeigen möchte und wie, und sie können immer noch die bessere Wahl für komplexe Websites sein, die eine Menge Feinsteuerung benötigen. Die Herausforderung besteht in der Entwicklungszeit und den Kosten, die für die Erstellung von zwei (oder mehr) separaten Websites anfallen.

Daher ist das responsive Design für kleine und mittlere Unternehmen und Privatpersonen, die ein einheitliches, nahtloses Erlebnis für ihre Nutzer wünschen, wahrscheinlich die bessere Wahl.

Images

Responsive Bilder

Responsive Bilder stellen sicher, dass die Auflösung der Bilder mit der Website skaliert, damit die Ladezeit nicht durch übermäßig große Dateien verlangsamt wird.

Als visuelle Elemente müssen Bilder auch mit dem Layout mitskalieren. Ein Hintergrundbild kann gut aussehen, wenn es den Bildschirm ausfüllt, aber eine Infografik ist nicht sehr hilfreich, wenn die Hälfte davon abgeschnitten oder zu klein zum Lesen ist.

Texte

Schriften im Gleichgewicht

Text ist entscheidend für den Erfolg eines responsiven Webdesigns. Ein ungerade angeordnetes Bild mag zwar seltsam aussehen, aber schlecht formatierter Text macht die Funktionalität völlig zunichte.

Texte werden in em- oder rem-Einheiten geschrieben. Schriftgrößen immer so groß, dass sie mühelos lesbar sind - nicht so klein, dass die Leser ihre Augen anstrengen müssen.

Aber auch nicht so groß, dass immer nur ein paar Wörter auf den Bildschirm passen.

Texte dürfen nicht abgeschnitten werden, sofern sich Breakpoints ändern.

Barrierefreiheit

Design für Hilfsmittel

Responsive Webdesigns unterstützen die Barrierefreiheit. Eine gut gestaltete Website kann auf die Bedürfnisse eines Nutzers reagieren, nicht nur auf sein Gerät und macht das Internet für einen größeren Personenkreis leichter navigierbar.

Manche Nutzer haben aufgrund von Behinderungen, Sehschwäche, Sprachproblemen oder motorischen Einschränkungen Schwierigkeiten, auf Websites zu navigieren. Es gibt technische Möglichkeiten die sicherstellen, dass sie eine Website trotzdem problemlos nutzen können.

Images

Responsive Bilder

Responsive Bilder stellen sicher, dass die Auflösung der Bilder mit der Website skaliert, damit die Ladezeit nicht durch übermäßig große Dateien verlangsamt wird.

Als visuelle Elemente müssen Bilder auch mit dem Layout mitskalieren. Ein Hintergrundbild kann gut aussehen, wenn es den Bildschirm ausfüllt, aber eine Infografik ist nicht sehr hilfreich, wenn die Hälfte davon abgeschnitten oder zu klein zum Lesen ist.

Texte

Schriften im Gleichgewicht

Text ist entscheidend für den Erfolg eines responsiven Webdesigns. Ein ungerade angeordnetes Bild mag zwar seltsam aussehen, aber schlecht formatierter Text macht die Funktionalität völlig zunichte.

Texte werden in em- oder rem-Einheiten geschrieben. Schriftgrößen immer so groß, dass sie mühelos lesbar sind - nicht so klein, dass die Leser ihre Augen anstrengen müssen.

Aber auch nicht so groß, dass immer nur ein paar Wörter auf den Bildschirm passen.

Texte dürfen nicht abgeschnitten werden, sofern sich Breakpoints ändern.

Barrierefreiheit

Design für Hilfsmittel

Responsive Webdesigns unterstützen die Barrierefreiheit. Eine gut gestaltete Website kann auf die Bedürfnisse eines Nutzers reagieren, nicht nur auf sein Gerät und macht das Internet für einen größeren Personenkreis leichter navigierbar.

Manche Nutzer haben aufgrund von Behinderungen, Sehschwäche, Sprachproblemen oder motorischen Einschränkungen Schwierigkeiten, auf Websites zu navigieren. Es gibt technische Möglichkeiten die sicherstellen, dass sie eine Website trotzdem problemlos nutzen können.

BLOG

BLOG