• Skip to main content
  • Zur Hauptsidebar springen
  • Home
  • Alle Beiträge
  • About

Netzblick.News

Web Development & Online Business

Breakpoints und Responsive Webdesign

10. August 2021 by Netzblick

Die Internetnutzung ist vielfältig geworden. Privat surfen viele Menschen meist mit dem Smartphone oder Tablet. Im Büro hingegen sind Desktop- und Laptop-Nutzung oft die Regel. Entsprechend dieser vielfältigen Nutzung sind die Anforderungen an eine gute Gestaltung von Websites wesentlich gestiegen.

Vor rund 10 Jahren orientierten sich Webdesigner oftmals noch an einer Standard-Desktop-Auflösung. Heute muss die Gestaltung und Programmierung einer Internetseite unterschiedliche Bildschirmauflösungen und Seitenformate berücksichtigen.

Responsive Webdesign als bewährtes Gestaltungskonzept

Der Begriff „Responsive Webdesign“ bezeichnet einen modernen Ansatz im Webdesign, der darauf abzielt, die Ausgabe einer Website so variabel zu gestalten, dass sie möglichst auf allen Displaygrößen und Endgeräten optimal dargestellt wird.

Dies kann über die rein optische Darstellung hinausgehen und auch inhaltliche Aspekte einschließen. Durch gezieltes Weglassen von Informationen, die in einem bestimmten Kontext nicht relevant sind, lassen sich die Darstellung und das Nutzererlebnis weiter verbessern. Entscheidend ist die Frage:

Welche Informationen/Angebote sucht der Nutzer in welcher Situation bzw. mit welchem Endgerät?

Um die Auflösungen der unterschiedlichen Endgeräte entsprechend zu berücksichtigen, werden beim Responsive Webdesign sogenannte Breakpoints festgelegt. An diesen Breakpoints ändert sich das Aussehen der Website. Zum Beispiel werden Spalten nun untereinander anstatt nebeneinander angezeigt oder bestimmte Elemente der Website verschwinden ganz.

Tipps zur Entwicklung von Responsive Webdesign

Die Entwicklung eines variablen Webdesigns und User Interfaces mit verschiedenen Breakpoints und fließenden Elementen (Fluid Design) ist meist komplexer als das Entwerfen eines feststehenden Layouts. Folgende Überlegungen können dabei helfen:

  • „Mobile-first“: Die Kunst liegt in der Reduktion auf das Wesentliche. Es ist sehr viel einfacher, die reduzierte mobile Ansicht einer Website für höhere Auflösungen zu erweitern, als ein komplexes Desktop-Design für die Mobile View zu reduzieren. Daher ist es sinnvoll, die erste Konzeption an den Belangen der mobilen Internetnutzung auszurichten.
  • Wichtige Menü- und Navigationselemente priorisieren: Die Interaktion mit dem Nutzer steht im Mittelpunkt, sei es, dass er eine Handlung tätigen soll (z.B. Online-Kauf) oder einfach nur schnell die gewünschten Informationen findet. Unnötiges Beiwerk, alles was visuell von den wesentlichen Inhalten ablenkt, ist zu hinterfragen.
  • CTA (Call to Action): Hauptfunktion/Handlungsaufforderung der Website sind besonders herauszustellen, z.B. durch eine große, auffällige Schaltfläche/Button.
  • Datenverzicht und einfachere Interaktion: Kürze Formulareingaben, indem z.B. auf nebensächliche Daten verzichtet wird, führen den Nutzer schneller ans Ziel und steigern die Konversionsrate (Conversion Rate, CVR).
  • Bei umfangreichen Inhalten ist eine gut funktionierende Such- und Filterfunktion unumgänglich.
  • Analyse des Nutzungsverhalten der Zielgruppe: Detaillierte Daten helfen bei einer zielgerichtet optimierten Websitegestaltung.

Weiterführende Informationen: https://www.formativ.net/glossar/responsive-webdesign/

Kategorie: Alle Beiträge Stichworte: Netzblick 08.21

Haupt-Sidebar

Webentwickler Tools - für Webworker
  • E-Mail
  • Facebook

Ausgaben

Netzblick 01.22 Netzblick 02.22 Netzblick 03.22 Netzblick 04.22 Netzblick 05.21 Netzblick 05.22 Netzblick 06.21 Netzblick 07.21 Netzblick 08.21 Netzblick 09.21 Netzblick 10.21 Netzblick 11.21

Netzblick.News

Neues aus Online-Business, Tech, Webentwicklung, Webdesign, Programmierung & Onlinemarketing.

Mit freundlicher Unterstützung der
formativ.net – Internetagentur

Neuste Beiträge

  • Google Fonts DSGVO-konform einbinden
  • Smishing: Polizei warnt vor Betrug beim Online-Banking
  • DSL-Geschwindigkeit messen
  • Neue Verordnung für den Datenaustausch mit den USA
  • Mac-Tipp: Einstellungen für die Webcam

Copyright © 2023 · Datenschutzerklärung · Impressum