U5_Responsive_Webdesign

Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten und Design auf einer Website zu gewährleisten.

Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet und der Inhalt gänzlich und schnell vom Besucher aufgenommen werden kann.

Beachte: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.

"Form follows function" - es folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Endgeräts.

Der Begriff bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an – es reagiert auf und korrespondiert mit der Auflösung des mobilen Endgeräts.

Media Query = Medienabfrage

Es wird ermittelt, welcher Medientyp (z.B. Bildschirm, Drucker...) der Browser vorfindet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.

@media (min-width: 30em) {

/* mehrspaltiges Layout für breitere Bildschirme */

#kontakt {

float: right;

width: 9em;

}

• Vorteile zeigen sich in Statistiken und Trends zur Nutzung mobiler Endgeräte

• Umdenken beim Gestalten von Websiten durch Smartphones und Tablets wie iPhone und iPad

• Bei einer einer nicht responsive fähigen Website, entsteht ein erhöhter Pflegeaufwand von redaktionellem Content und Bildmaterial

• Mehere Versionen nötig: die Website benötigt unter Umständen für zukünftige Tablet- oder Smartphone-Formate eine dritte oder vierte Version des Layouts

• Smartphones: 320px – 480px

• Tablets: 768px – 1024px

• Computer-Desktop: 1024px+

Device-width (Geräte Breite) beschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel.

Beispiel: @media (device-width: 800 px)

Die Breite entspricht genau 800px.

Beschreibt bei fortlaufenden Medien die Breite/Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite/Höhe einer Seite.

Beispiel: @media (width: 60em)

Die Breite entspricht genau 60em.

@media (min-width: 50em)

Die Breite entspricht mindestens 50em.

@media (max-width: 70em)

Die Breite entspricht mindestens 70em.

Viewport: Die für die Website oder -applikation tatsächlich verbleibende sichtbare Fläche.

1em = vom Browser berechnete Schriftgröße des Elements.

Schriftgröße kann (und sollte) als Basis für Breitenangaben von Elementen verwendet werden.

• prozentuale Breiten oder relative Angaben

• in em oder rem (root em = Wurzel-em)

• keine festen Pixelwerte

Alle Größen orientieren sich am im html-Element angegebenen Ausgangswert.

Der Vorteil der Einheit rem: Die Schriftgröße ist unabhängig von ihrer direkten Umgebung. Ganz gleich, wie viele Container um das Element herumgeschachtelt sind, 2.0rem sind immer und überall gleich groß.

"Graceful degradation" ist eine Strategie (Erweiterung) zur Handhabung des Webseitendesigns für verschiedene Browser.

-> Es bezeichnet die Vorgehensweise des Webdesigns, die angewendet wird, wenn eine bereits bestehende Internetseite auf Resposive Design umgerüstet wird.

Wird eine neue Website von Anfang an im Responsive Design entwickelt, sollte das Progressive Enhancement (Progressive Verbesserung) angewendet werden.

Der Entwurf wird zuerst für kleine Geräte optimiert → wird dann für immer leistungsfähigere und größere Endgeräte erweitert.

• Das Format wird nach der Zielgruppe gerichtet.

  Der Erfolg hängt davon ab, wie schnell die Website gefunden wird und auf welchen Wegen diese die Zielgruppe erreicht. Responsive Design erhöht die Reichweite und Sichtbarkeit.

• ABER „Mobile first!“ – Optimierung für mobile Endgeräte hat die höchste Priorität: immer mehr Nutzer surfen mit Smartphone und Tablet im Internet

  • teilweise limitierte Datenvolumen von mobilen Endgeräten! Darauf sollte bei der Gestaltung und Definition von Elementen geachtet werden, um die Datenlast so gering wie möglich zu halten.

• Größe des Geräts; Breite und Höhe des Browserfensters

• Orientierung (Hoch-/Querformat)

• unterschiedliche Eingabemöglichkeiten (Tastatur, Sprache, Touch)

• eventuell unterwegs geringere Datenrate

• direkter Zugriff auf Apps (z.B. Karten-App, Telefon)

• Relative Maßeinheiten: Schriftangaben erfolgen nicht absolut in Pixel, sondern relativ in Bezug auf die Grundschrift des Gerätes bzw. Browsers.

• Liquid Layout: Der Content, also Texte, Bilder, Grafiken, muss sich dynamisch an den zur Verfügung stehenden Platz anpassen. Man spricht auch von einem flüssigen oder liquid Layout.

• Breakpoints: Das sind die Punkte, ab der (meistens eine bestimmte Breite) das Design einer Website merklich anders gestaltet wird, bzw. die Container umbrechen.

• Mobile First: Die Mehrheit der User geht mittlerweile mit mobilen Endgeräten in das Internet, deshalb Mobile First. Das heißt, dass ein Layout vor allem mit mobilen Endgeräten funktionieren sollte.

• width: Breite des Bildschirms in Pixeln abfragen

• height: Höhe des Bildschirms in Pixeln abfragen

• orientation: Bildschirm-Orientierung Hochformat/Querformat detektieren

• resolution: Verfügbare Bildschirmauflösung erkennen

• all: jegliches Ausgabemedium

• screen: Darstellung der Inhalte einer Webseite/auf einem scrollenden Bildschirm

• print: Darstellung der Inhalte einer Webseite auf mehreren Seiten mit festen Dimensionen

• speech: Vorlesen der Inhalte einer Webseite durch einen Sprach-Synthesizer

• Jede Displaygröße wird optimal berücksichtigt

• Mehr Usability

• User friendly, da das Webdesign dem Nutzer folgt und nicht der Nutzer dem starrkonstruierten Website

• Reichweite erhöhen = Mehr Umsatz

• Effektivere Suchmaschinenoptimierung