Was ist 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.
Bedeutung von Responsive Webdesign?
"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, was ist das?
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) {
@media (min-width: 30em)
{
/* mehrspaltiges Layout für breitere Bildschirme */
#kontakt {
#kontakt
float: right;
float: right
;
width: 9em;
width: 9em
}
Wozu dient die Mobile Website Optimierung?
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
Heutzutage muss auf eine Vielzahl verschiedener Endgeräte Rücksicht genommen werden, nenne diese.
Smartphones: 320px – 480px
Tablets: 768px – 1024px
Computer-Desktop: 1024px+
Erkläre den Begriff device-width.
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.
Erkläre den Begriff width / height.
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.
Was ist 1em?
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
Auf was bezieht sich das em und rem?
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ß.
Was ist Gracefull Degredation?
"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.
Was wird unter Mobile First verstanden?
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.
Erkläre die Vorgehensweise.
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.
Nenne zu berücksichtigende Besonderheiten beim Responsive Webdesign.
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)
Bedingungen für ein Responsive Webdesign.
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.
Nenne häufige genutzte Media Features.
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
Unterschiede zwischen Smartphone vs Desktop:
Smartphone
Desktop
Viel kleinerer Bildschirm
Großer Bildschirm
Im Hoch- und Querformat nutzbar
Meist nur Querformat nutzbar
Touch Bedienung
Maus Bedienung
Eventuell weniger Datenrate (von unterwegs über 3G oder EDGE)
Große Datenrate
Direkter Zugriff auf Apps, z.B. Karten-App für Routenbeschreibungen oder Telefon
Weiterleitung durch Links auf andere Websiten
Nenne die Vorteile des Responsive Layout.
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
Zuletzt geändertvor 4 Jahren