Responsive Webdesign
und flexibles LayoutWörtlich übersetzt bedeutet "responsive" reaktionsfähig. Das Webdesign passt sich also automatisch und flexibel der jeweiligen Display-Größe an. Eine neue Art des Internetnutzens vornehmlich über mobile Devices mit sehr kleinen Displays erfordert eine neue Art des Webdesigns. Mit dynamischem grafischem Aufbau von Webseiten reagiert responsive Webdesign auf die verschiedenen Displaygrößen der mobilen Devices. Wesentliche Voraussetzung sind Media Queries, welche Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Tablet-Computer/Tablet-PC oder Smartphone.
Responsive Webdesign
Es werden für die verschiedenen Geräte bzw. Gerätegruppen wie Smarthones, Tablets oder PC, individuelle Gestaltungsvarianten entwickelt. Auf der mobilen Version der Webseite können dabei auch nur bestimmte Inhalte ausgegeben werden. Man setzt dafür eine Weiche ein, die beim Abruf einer Webseite das Gerät erkennt und dann automatisch die passende Version der Webseite ausgibt.
Flat Design
Beim Flat Design wird auf eine realistische Darstellung von Texturen, Verzierungen, Schlagschatten und dreidimensionalen Elementen verzichtet und der Ansatz „weniger ist mehr“ verfolgt. Im Fokus steht die Reduktion der Gestaltung auf das Wesentliche. Farbe hingegen wird oft intensiv eingesetzt; beispielsweise ist Windows 8 deutlich bunter als die Vorversion.
SEO Optimiert
Suchmaschinenoptimierung fußt seit jeher auf zwei Säulen: Offpage- und Onpage-SEO. Wie schon der Name andeutet, beinhaltet Onpage-SEO alle website-internen Faktoren. Sie beginnen beim Inhalt der Webseite, führen über die Seitenstruktur und interne Links bis hin zu Meta-Tags.
Flexible Layouts
Anstelle der Möglichkeit, Schriftgrößen einer Webseite nachträglich zu vergrößern, skaliert die neue Technik das gerenderte Layout samt Bildern und Hintergrundgrafiken proportional. Dadurch wird jedes pixelbasierte Layout “skalierbar”, Inhalte brechen nicht mehr aus ihre Boxen aus, Inhalte überlagern sich nicht plötzlich – reale Vorteile der neuen Technik.
Abgrenzung zur mobilen Webseite
Der wesentliche Unterschied zwischen einer mobilen Webseite und einem responsiven Design besteht in der Anzahl der Templates. Aus historischer Sicht bildet die Desktop-Version die normale Ansicht der Website. Dieser wird nach der klassischen Methode ein zusätzliches, unabhängiges Template für mobile Endgeräte hinzugefügt.
Beim Responsive Webdesign wird nur eine einzige Version der Website erstellt. Diese passt sich selbstständig der verfügbaren Umgebung an. Besonders sichtbar wird dies beim Layout, das sich nach Breite des Browser-Fensters entsprechend verändert.
Die Entscheidung für ein responsives Webdesign oder nur ein separates mobiles Template hängen vom Sinn und Zweck der Website ab.
Responsive Webdesign ist die Zukunft der modernen Webseite
Studien zum Absatz mobiler Endgeräte belegen eine stetige Zunahme der Verkäufe von Tablets und Smartphones. Diese Entwicklung wird nicht nur von der Fachszene mit Euphorie verfolgt, es gibt auch fast täglich neue Entwicklungen zum Thema der technischen und grafischen Umsetzung von Webseiten für mobile Endgeräte. Responsive Webdesign spielt mit der geräteübergreifenden Flexibilität eine tragende Rolle in dieser Bewegung die sich zunehmend zu einem Standard entwickelt.
Ein weiterer Aspekt für die Nachhaltigkeit von responsiven Webseiten stellt der Pflegeaufwand dar. Die gesamten Inhalte einer Webseite, ob grafischer oder textlicher Natur, werden einmalig angelegt und können auf allen aktuellen sowie zukünftigen Endgeräten und Auflösungen mit gleichbleibendem Bedienkomfort zur Verfügung gestellt werden.
Für diejenigen, die entweder keine Zeit oder wenig Kenntnisse von der Programmierung haben, bietet sich der Einsatz von Content Management Systemen wie WordPress an.
Buch-Empfehlung:
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 Überschrift 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.
CSS: Cascading Style Sheets
CSS3 ermöglicht die Einbindung beleibiger Schriften auf Webseiten und Stilmittel wie Schatten, Rundungen, Farbverläufe und Transparenzen können ohne Grafiken umgesetzt werden. Und auch beim Box-Modell gibt's Neues zu entdecken. 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. 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.
