Die wichtigsten Begriffe zum Responsive Webdesign

Technischer Fortschritt bietet immer neue Möglichkeiten, stellt uns aber auch vor neue Herausforderungen. Immer und überall Zugriff auf das World Wide Web zu haben, ist fast schon selbstverständlich. Egal ob zu Hause am Schreibtisch, unterwegs in öffentlichen Verkehrsmitteln oder abends im Restaurant – Viele haben ständig ihr Smartphone, Tablet oder Laptop zur Hand. Auf über 200 verschiedenen Bildschirmgrößen unterschiedlichster Geräte wird gegoogelt, sich informiert und verglichen. Nahezu jeden Tag kommt ein neues Gerät auf den Markt. Und je mehr Geräte es zu kaufen gibt, desto flexibler muss das Design einer Webseite sein, um allen Usern gerecht zu werden. In diesem Zusammenhang ist immer häufiger die Rede von Responsive Webdesign, ein Webdesign, das flexibel auf alle Bildschirmgrößen reagiert und die Seiteninhalte stets optimal anpasst und darstellt. Für alle, die sich noch nicht so genau mit dem Thema Responsive Webdesign befasst haben, aber auch für diejenigen, die letzte kleine Wissenslücken schließen möchten, haben wir als Hilfestellung ein Glossar erstellt:

Einleitungsbild_Responsive_Webdesign

 

Was ist was? im Responsive Webdesign

Ethan Marcotte
Die allererste Erwähnung fand die Bezeichnung „Responsive Webdesign“ durch Ethan Marcotte in einem Artikel, den er 2010 im Magazin „A List Apart“ veröffentlichte. Er gilt somit als der Begründer des Responsive Webdesigns. Hier ein Link zu besagtem Artikel: http://alistapart.com/article/responsive-web-design

Mobiles Internet
„Mobiles Internet“ bezeichnet den Zugriff auf das Internet von mobilen Endgeräten. Dabei spielt es allerdings keine Rolle, ob der User sich von unterwegs über UMTS (Universal Mobile Telecommunications System), GPRS (General Packet Radio Service) oder LTE (Long Term Evolution) einloggt, oder ob er ein lokales W-LAN-NETZ nutzt. Mit Downloadraten von bis zu 300 Megabit liefert LTE die derzeit schnellste Verbindung, ist allerdings noch nicht überall verfügbar.

Mobiles Endgerät
Unter Mobilen Endgeräten versteht man tragbare, also mobile Geräte wie Smartphones, Tablets oder auch Laptops, die eine ortsungebundene Internetnutzung, sowie die Inanspruchnahme anderer Kommunikationsdienste ermöglichen.

 devices_responsive_webdesign

 

HMTL5
HTML5 ist die derzeit neuste HTML-Version. HTML ist eine Abkürzung für „Hypertext Markup Language“. Es handelt sich dabei um eine Hypertext-Auszeichnungssprache, mit der Bilder, Videos, Texte und andere Webseiten-Elemente strukturiert und vor allem in der neusten Version ohne externe Plugins plattformübergreifend dargestellt werden können. In HTML wird zum Beispiel festgelegt, welche Textelemente die Überschrift sein sollen, indem man sie durch den Code <h1>Überschrift</h1> markiert. Allerdings bestimmt HTML nicht die Schriftfarbe oder -art. Solche Formatierungseigenschaften werden mittels CSS definiert. HTML5 ist gegenüber den Vorgänger-Versionen in der Lage, Dokumente besser semantisch zu strukturieren. So kann man in der neuen Version mittels eines time-Elements Datums- und Zeitangeben gesondert auszeichnen oder mit dem figure-Element Abbildungen besser beschriften.

CSS3
Eine Webseite wird mit Hilfe von CSS und HTML erstellt. Wobei CSS3 und HTML5 die jeweils neusten Versionen sind. HTML dient dazu, die Dokumente zu strukturieren, mit CSS werden die strukturierten Elemente formatiert. CSS steht für „Cascading Stylesheets“, was übersetzt etwa „überlappende Formatvorlage“ heißt. CSS sind also Formatvorlagen für eine Webseite, die zum Beispiel Layout-Aspekte wie Schriftart und -farbe, Zeilenabstand oder die Position von Texten und Bildern festlegen. Mittels CSS kann auch ganz einfach mehreren Seiten das gleiche Layout zugeordnet werden. Es werden also Formateigenschaften von HTML-Elementen definiert. CSS3 ist das aktuellste Update des bekannten CSS2.1. Als einige der Neuerungen sind hier die Erweiterung der RGB-Farben um Transparenz, Schlagschatten für Boxen und Texte und abgerundete Ecken zu nennen. Bisher wird noch nicht jedes CSS3-Feature von allen Browsern unterstützt. So kann es zum Beispiel beim Internet-Explorer bis einschließlich der Version 8 zu Komplikationen kommen. Wenn Sie sich informieren wollen, welche CSS3-Features Ihr Browser unterstützt, können Sie das zum Beispiel hier nachlesen: http://www.normansblog.de/demos/browser-support-checklist-css3/

Javascript
Theoretisch kommt das Responsive Webdesign bereits ohne Javascript aus. Meistens wird es aber doch vor allem bei der Erzeugung von Menüs auch im Responsive Webdesign verwendet. Javascript ist eine Skriptsprache, die es ermöglicht objektorientierte Anwendungen in Webseiten zu integrieren. Javascript-Befehle werden direkt in das HTML- Dokument eingebunden und erweitert die Möglichkeiten, die HTML bietet. So kann man mit Hilfe von Javascript Effekte einfügen. Javascript wird zum Beispiel eingesetzt, um einzelne Inhalte auf einer Seite rotieren zu lassen oder wenn sich mehrere Inhalte gleichzeitig verändern sollen.

Fixed Layout
Beim Fixed Layout basiert sowohl die Höhe (height) als auch die Breite (width) einer Webseite auf Pixelwerten. Somit ist das zugrunde liegende Gestaltungsraster starr unddie Seite nur an eine bestimmte Browsergröße (Viewport) angepasst. Wird die Webseite in einem größeren,als dem festgelegten Browserfenster angezeigt, bildet sich ein ungenutzter Weißraum um das Seitenlayout, in einem kleineren als dem festgelegten Browserfenster ist nur ein Teil der Fixed-Layout-Seite zu sehen. Den Rest der Seite sieht der Nutzer erst nach Betätigen von Bildlaufleisten, Scrollen oder Swipen.

Layout_Typen_Fixed_Responsive_Webdesign

 

Fluid Layout
Beim Fluid Layout ist das Gestaltungsraster flüssig, d.h. Die Webseiten-Breite ist durch Prozentwerte definiert, während die Höhe mittels Pixelwerten festgelegt ist. Innerhalb einer festgelegten Mindest- und Maximalbreite passt sich das Layout flexibel an die Größe des Browserfensters (Viewport) an.

Layout_Typen_Fluid_Responsive_Webdesign

 

Elastic Layout
Beim Elastic Layout ist sowohl die Höhe als auch die Breite einer Webseite in Prozentwerten definiert und proportional zur Browsergröße (Viewport) skaliert. Dieser Layout-Typ wird selten verwendet, da der Text in Browserfenster-Formaten, für die die Seite nicht optimiert ist, schnell zu groß oder zu klein und damit schlecht lesbar wird.

Layout_Typen_Elastic_Responsive_Webdesign

 

Adaptive Design
Das Adaptive Design basiert auf starren Rastern also Fixed Layouts, die für mehrere bestimmte Browserfenstergrößen (Viewports) optimiert werden. So wird üblicherweise eine Ansicht für Desktops, eine für Smartphones und manchmal eine dritte für Tablets entwickelt.

Responsive Design
Das Responsive Webdesign reagiert flexibel auf alle Bildschirmgrößen, egal ob Smartphone, Tablet, Laptop oder Desktop-PC. Es passt die Seiteninhalte mit Hilfe von flüssigen Rastern, Media-Queries und Breakpoints optimal an jedes Browserfenster (Viewport) an.

Breakpoint
Breakpoints markieren bestimmte Display-Breiten bzw. Viewportgrößen, an denen sich das Webseitenlayout im Responsive Design automatisch verändert. Solche Breakpoints werden im CSS-Code definiert und sorgen dafür, dass einzelne Content-Elemente der Webseite ihre Position verändern, wenn die Displaygröße einen bestimmten Pixelwert unter- oder überschreitet. Die einzelnen Elemente der Webseite müssen dazu nach relevanz geordnet werden. Weniger relevante Elemente, wie etwa Werbung können dann zum Beispiel bei Unterschreitung einer bestimmten Pixelbreite von der Sidebar in eine Position unter den Haupttext wandern.

Media Queries
Media Queries sind Medienabfragen. Sie sind dafür zuständig, einem Medium ein bestimmtes Stylesheet zuzuordnen. Dafür werden der Typ des Ausgabegerätes (z. B. Drucker oder Bildschirm), sowie spezifische Eigenschaften dieses Mediums wie die Bildschirmauflösung (Resolution), die Orientierung oder die Farbfähigkeit abgefragt. Erfüllt ein Medium bestimmte Kriterien, so wird ihm das entsprechende Stylesheet zugeordnet.

Viewport
Der Viewport bezeichnet den sichtbaren Bereich innerhalb des Browserfensters. Es ist der Platz, in dem eine Webseite dargestellt wird, also das was auf den ersten Blick, ohne Scrollen und Swipen zu sehen ist. Nach unten ist der Viewport durch den Fold, bzw. Falz begrenzt.

Viewport_Responsive_Webdesign

 

Fold
Der Fold (dt. Falz) ist die untere Begrenzung des Viewports (Größe des Browserfensters). Die Elemente einer Webseite, die erst nach Scrollen oder Betätigen von horizontalen Bildlaufleisten sichtbar werden, befinden sich unterhalb des Folds.

Fold_Responsive_Webdesign

 

Resolution
Die Resolution (Bildschirmauflösung) ist eine wichtige Eigenschaft, die im Responsive Webdesign durch die Media Queries abgefragt werden. Im Responsive Webdesign folgen Design, Inhalt und Funktion der jeweiligen Auflösung eines Gerätes. Nur das Responsive Webdesign ist der Lage sich den zahlreichen verschiedenen Auflösungen der unterschiedlichen Endgeräte flexibel anzupassen. Die Bildschirmauflösungen einiger gängiger Geräte sind zum Beipsiel: iPhone 5s: 1136×640 Pixel; Samsung Galaxy S4 1920×1080 Pixel; iPad Air: 2048×1536 Pixel; 15,6 Zoll Notebook: 1366 x 768 Pixel; 27 Zoll Monitor: 2.560 x 1.440 Pixel.

Orientation
Die Orientation ist eine Medieneigenschaft, die zur Zuordnung des richtigen Stylesheets im Responsive Webdesign durch Media Queries abgefragt wird. Die Orientation bezeichnet die Ausrichtung Endgerätes, also ob eine Seite auf dem Tablet oder Smartphone im Quer- oder Hochformat (Landscape oder Portrait View) angezeigt werden soll.

Landscape_Portrait_View_Responsive_Webdesign

Mobile First
Mobile First ist ein innovatives aber im Responsive Webdesign gängiges Prinzip. Mobile First bedeutet, dass das Layout und die Funktionen einer Webseite zunächst für die Ansicht auf kleinen Display, wie Smartphone-Bildschirmen optimiert und dann nach der Methode des Progressive Enhancements (schrittweise Verbesserung) Stück für Stück erweitert wird bis zur optimale Darstellung eines Webprojekts auf allen Bildschirmgrößen.

Content First
Neben Mobile First, ist Content First ein weiterer wichtiger Grundsatz im Responsive Webdesign. Die Inhalte einer Webseite werden nach Relevanz bewertet. Gerade auf kleinen Bildschirmen soll verhindert werden, dass „unwichtiger“ Content wie etwa Werbung, den „wichtigen“ Elementen wie dem Haupttext den Platz nimmt. Durch Breakpoints kann festgelegt werden, bei welchen Bildschirmgrößen einzelne Content-Elemente ihre Position verändern, um die Benutzerfreundlichkeit auf allen Endgeräten zu gewährleisten.

Graceful Degradation
Graceful Degradation lässt sich in etwa mit „würdevolle Herabstufung“ übersetzen und ist eine Vorgehensweise der Webseitenentwicklung, die vor allem beim Responsive Webdesign als veraltet gilt. Dabei wird eine Webseite zuerst für die Anzeige auf großen Desktop-Computern entwickelt und diese Version dann Stück für Stück angespeckt, um sie für kleinere und leistungsschwächere Geräte zu optimieren. Im Responsive webdesign wird meist die umgedrehte Vorgehensweise gewählt, das Progressive Enhancement (schrittweise Verbesserung).

Graceful_Degradation_Responsive_Webdesign

Progressive Enhancement
Progressive Enhancement bezeichnet eine bestimmte Vorgehensweise bei der Webseitenentwicklung. Übersetzt heißt es soviel wie „schrittweise Verbesserung“. Es ist die Umkehrung der früher üblichen Methode „Graceful Degradation“ (würdevolle Herabstufung). Die webseite wird beim Progressive Enhancement zuerst für kleine Viewports und leistungsschwächere Endgeräte optimiert und dann Stück für Stück um Funktionen erweitert, bis die Seite auf allen Endgeräten optimal dargestellt wird. Eine Seite wird also zum Beispiel erst für die „abgespeckte“ Anzeige auf dem kleinen Smartphone-Bildschirm entwickelt und solange Schritt für Schritt erweitert bis sie auch auf dem 24Zoll-Desktop-Computer bestmöglich angezeigt wird.

Progressive_Enhancement_Responsive_Webdesign

 

Share

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


9 − fünf =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>