__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"31522":{"name":"Accent Dark","parent":"56d48"},"56d48":{"name":"Main Accent","parent":-1}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"31522":{"val":"rgb(43, 3, 25)","hsl_parent_dependency":{"h":327,"l":0.09,"s":0.86}},"56d48":{"val":"rgb(255, 0, 139)","hsl":{"h":327,"s":0.99,"l":0.5,"a":1}}},"gradients":[]},"original":{"colors":{"31522":{"val":"rgb(13, 49, 65)","hsl_parent_dependency":{"h":198,"s":0.66,"l":0.15,"a":1}},"56d48":{"val":"rgb(55, 179, 233)","hsl":{"h":198,"s":0.8,"l":0.56,"a":1}}},"gradients":[]}}]}__CONFIG_colors_palette__

Mehr Webdesign Wissen für Dich!

Responsive Design für Tablet und Smartphone

Was ist Responsive Design?

digitallotsen-responsive-design

Responsive Design/
Responsive Webdesign einfach erklärt.

Beim Responsive Design (Responsive Webdesign) wird eine Webseite je nach Bildschirmgröße und/oder Endgerät mehr oder weniger anders dargestellt. Hierbei geht es in erster Linie darum, die Besucherfreundlichkeit zu gewährleisten.


Webdesigner wählen diese Form, damit die Besucher eine Website unabhängig vom verwendeten Device (Handy, Tablet, PC) bequem nutzen können. Responsive Webdesign mit der Angabe des Viewport (wird weiter unten erklärt) gehört heute zum Standard bei der Mobile Optimierung. Für uns ist es selbstverständlich, dass Webseiten, die wir gestalten und umsetzen auch "responsive" also geräteunabhängig sind.

Was ist ein Viewport?

Unter dem Begriff Viewport (deutsch: Sichtfenster, Sichtöffnung) versteht man die Größe des Sichtbereichs auf einem Bildschirm. Der Viewport wird für Displays von mobilen Endgeräten wie Smartphones und Tablets verwendet.

Er skaliert den Inhalt, der auf einem Gerätebildschirm angezeigt werden soll, sodass die Größe des Bildschirms bestmöglich ausgenutzt werden kann. Das Meta-Element Viewport ist somit dafür verantwortlich, dass alle Inhalte auf verschieden großen Displays gleich gut lesbar sind sowie vollständig und richtig dargestellt werden.

Die Webseite und ihre Darstellung werden dabei durch den Viewport an die Breite und Höhe des Bildschirms angepasst, damit der mobile Browser den gesamten Inhalt vernünftig anzeigen kann.

Dank des Viewports werden Webseiten auf mobilen Endgeräten nicht so dargestellt wie auf dem PC-Bildschirm. Der Besucher muss nicht hineinzoomen, sondern bekommt den Inhalt einer Webseite so angezeigt, dass er zum kleinen Bildschirm des Handys passt.

Warum nutzt man
Responsive Webdesign?

Seit der Einführung der Smartphones ist es möglich, auch mit dem Handy im Internet zu recherchieren und zu surfen. Da sich die Anzahl der mobilen Zugriffe seitdem immer mehr gesteigert haben und damit die Nutzung der Webseite für die Besucher bequem möglich ist, fingen Webdesigner damit an, die Webseite für mobile Endgeräte zu optimieren, um die (Mobile) User Experience (also das Nutzererlebnis) für den Besucher so angenehm wie möglich zu machen.

Da das Handydisplay deutlich kleiner ist als ein Laptop-Bildschirm ist es daher notwendig, entsprechende gestalterische Anpassungen, wie etwa bei der Bildgröße und Schriftgröße vorzunehmen. Auch die Benutzerfreundlichkeit (Usability), Kontraste und Ladezeit spielen hier eine große Rolle.

Was bedeuten die Begriffe "Mobile First" und "Progressive Enhancement"?

Wenn bei der (Neu)Gestaltung einer Webseite mit dem Design der mobilen Variante der Webseite begonnen wird und erst danach die Version für das Tablet und den PC erstellt wird, spricht man von "Mobile First". Hierbei geht es vor allem darum, nur die notwendigsten und wichtigsten Inhalte, die der Besucher braucht, um zum Kunden zu konvertieren, ansprechend dargestellt werden. 

Orientiert sich die Funktionalität der Website zusätzlich an den technischen und grafischen Möglichkeiten des Endgeräts, wird von Progressive Enhancement gesprochen. Die zu deutsch "Fortschreitende Verbesserung" ist eine Design-Philosophie, bei der es darum geht, so vielen Webseiten-Besuchern wie möglich die grundlegenden Inhalte und Funktionen einer Website zur Verfügung zur stellen. Ihnen wird zudem (mit einem modernen Browser, der den dafür notwendigen Code ausführen kann) das bestmögliche Webseiten-Erlebnis geboten.

Warte nicht länger, lass' uns einfach über Deine neue Webseite reden!

kimadamek

Kim Adamek

Ich weiß, Recherche ist gut und wichtig. Aber vielleicht bist Du genau jetzt dort, wo Du sein sollst.

 

Lass uns einfach miteinander reden und herausfinden, ob wir kompatibel sind.

Für diese Unternehmen haben wir schon eine Internetseite erstellt:

Intao Logo
Prümer Logo
Logo von Greifwerk
Edelbooks Logo
Logo Machen und Helden
Edel-Kids Logo
Bene vivere Logo
Intao Logo
Prümer Logo
Logo von Greifwerk
Edelbooks Logo
Logo Machen und Helden
Bene vivere Logo

MIT DEM RICHTIGEN WEBDESIGN BRIEFING ENDLICH ZU EINER ERFOLGREICHEN WEBSEITE!

Schluss mit der endlosen Sucherei nach Informationen, Zugangsdaten und Co. Jetzt herunterladen, ausfüllen und die Agentur die Arbeit machen lassen - ohne das ständige Mail-Hin und Her!

WEBdesign Briefing

Sammle konkrete Informationen, um schnell an die Webseite zu kommen, die Du Dir wünschst.