Unsere Webseiten verwenden Cookies und das Webanalyse-Werkzeug Google Analytics. Wenn Sie durch unsere Seiten surfen, erklären Sie sich hiermit einverstanden

Ergnomisches und Responsives Webdesign

Ergonomie und Responsivität im Webdesign

Was können Sie heute erwarten, wenn von einer ergonomischen und responisven Webseite die Rede ist?

Ich habe hierzu einen Vortrag halten dürfen, den Sie unter folgendem Link sichten können: Ergonomie und Responsivität im Webdesign.

Der Vortrag ist sehr theoretisch - wenn Sie Fragen zu diesen Themen haben, nehmen Sie bitte Kontakt mit mir auf, so dass wir bei einem Gespräch die für Sie und Ihre Kunden passenden Möglichkeiten finden können: E-Mail.

Responsivät bei Vorträgen und Präsentationen

Die unten stehende Begriffsbeschreibung für Responsivität kann aus meiner Sicht ebenso für Vorträge und Präsentationen gelten. Für die Antwortbereitschaft können unterschiedliche Darstellungsmöglichkeiten in Form von Text, Grafik, Bild, Animation und Video vorbereitet werden und die Wünsche der Zuhörer entscheiden, welche Form von Darstellung gewählt wird, was für die Variabilität im Antwortverhalten steht.

Wenn lediglich eine Kombination aus Text und Grafik für die Erläuterung vorbereitet wurde, kann nicht passend zur Zielgruppe präsentiert werden und man erreicht unter Umständen nur einen bestimmten Teil seiner Zuhörer und verfehlt somit eventuell die Ziele bezüglich der Mitteilungsaufgabe.

Ergonomische Webseiten - Kriterien

Ergonomische Webseiten zeichnen sich durch Merkmale aus, welche sich wie folgt darstellen können:

  • Orientierung: z.B. durch Brotkrume
  • Auffindbarkeit: z.B. durch logische Struktur, Volltext-Suche, Seitenübersicht
  • Lesbarkeit: Layout, Kontraste, Schrift
  • Funktionalität: Funktionselemente einfach erkenn-, bedienbar
  • Verwendung: kurze Mauswege, wenig Klicks und Scrollen
  • Ladezeit: weniger als eine Sekunde
  • Zuverlässigkeit: auf bei vielen Zugriffen stabil
  • Fehlertoleranz: z.B. Formulareingaben dürfen nicht verloren gehen
  • Sprache, Ästhetik, Unterhaltung, Bedüfnisse der Nutzer
    • auf die Zielgruppe abgestimmt und nützlich
  • Responsivität: passende Reaktion

Responsivität im Webdesign

Als Teilbereich der Ergonomie beschreibt Responsivität im Webdesign die Antwortbereitschaft und die Variabilität im Antwortverhalten von Webseiten auf Interaktions- und Kommunikationshandlungen eines Benutzers sowie seiner technischen Ausstattung.

Responsives Webdesign

Responsivität bezüglich technischer Ausstattung

Es gibt inzwischen eine größere Anzahl an JavaScript-Frameworks, um auf unterschiedliche Geräte bezüglich Bildschirmgröße, -format und -auflösung der Benutzer reagieren zu können. Hierfür können folgende Frameworks vorgestellt werden:

Eine Übersicht zu den Möglichkeiten von Bootstrap finden Sie hier: Beispiele Bootstrap

Falls auf der Webseite bereits jQuery eingesetzt wird, kann auch Response JS als Plugin empfohlen werden: Response JS

Video mit Untertitel für unterschiedliche Geräte und Browser

Damit ein Video nahezu auf allen Geräten angezeigt wird, sind einige Arbeitsschritte notwendig. Wenn dazu noch ein Untertitel angezeigt werden soll, ist es noch etwas komplizierter.

Der einfachste Weg ein Video für alle sichtbar zu machen, ist das Hochladen über YouTube und eine Einbindung über iframe auf der eigenen Webseite. Dieses Vorgehen hat den Nachteil, dass es sich dann aber um keinen eigenen Inhalt handelt, was sich auf den Suchmaschinen-Wert der Webseite negativ auswirken kann.

Der andere Weg ist relativ kompliziert aber das Ergebnis ist überzeugend (Browser: IE7-10, Mozilla, Chrome, Safari | Android-Smartphone, IPhone ab 3(OS4), IPad).
Hierfür habe ich eine dreiseitige Erläuterung geschrieben - wenn Sie sich für dieses Thema interessieren, schreiben Sie mir: E-Mail.

Responsivität bezüglich Interaktion und Kommunikation

Wenn ein Benutzer beispielsweise über Google nach etwas sucht und über die Suchergebnisse auf Ihre Webseite gelangt, könnten Sie das von ihm gesuchte Wort farblich hervorheben.

Eine passende Beschreibung hierfür ist zu finden unter: jQuery Plugin SearchHighlight