Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout Aktuelle Situation Mobile Browser sind leistungsstark Viele unterschiedliche Displaygrößen Desktop-Mode zeigt Webseiten wie auf dem Desktop Mobile Frameworks versuchen das Template Mobil zu machen Hang zur eigenständigen APP damit es sich auch richtig anfühlt
Kann sich eine Webseite verschiedenen Bildschirmgrößen anpassen? Es gibt eine Vielzahl von Responsive Grids die dieses Verhalten bereits heute bieten können. Dazu gehört unter anderem SimpleGrid (www.simplegrid.info) das im folgenden vorgestellt wird. Desktop u. Mobile Version einer Webseite Das Layout stellt sich auf die jeweils verfügbare Größe des Browserfensters ein. Testen kann man dieses Verhalten bereits im Browserfenster auf dem Desktop. Hier reicht es das Browserfenster entsprechend zu verkleinern oder zu vergrößern.
Das Layout unterliegt einem per CSS definiertem Raster. Ähnlich einer frühen Tabellen-Umsetzung wird hier mit rows und slots gearbeitet. CSS sorgt dafür dass die jeweils vorhandene Breite optimal genutzt werden kann. Elemente für die horizontal kein Platz mehr vorhanden ist, werden nach unterhalb verschoben. Rows und Slots in der Desktop und Mobile Ansicht Damit das funktionieren kann müssen bei der ersten Umsetzung der Webseite Vorkehrungen getroffen und Regeln eingehalten werden.
Die Technik CSS wird per Media-Queries Breitenabhängig eingebunden Zeile mit 6 Spalten Zeile mit 4 Spalten Zeile mit unterschiedlichen Spaltenbreiten Skalierung von Bildern Tiefe Verschachtelung von Elementen
Da wir nun das Layout responsive gestaltet haben bleibt noch zu klären inwieweit sich das auch auf die Bilder bezieht. Auch stellt sich die Frage wie wir mit verschiedenen DPI umgehen wollen. Verschiedene Versionen eines Bildes Man könnte die Bilder der Desktop-Version ausliefern und vom Endgerät verkleinern lassen das würde allerdings viel zu große Datenmengen ausliefern und Ressourcen auf dem Endgerät belegen. Als Alternative könnte man die Bilder im Quelltext mit zusätzlichen Größenmarkern versehen und die vorbereiteten Bilder je nach vorhandener Breite laden. Das würde zwar die Darstellung optimieren aber für jede denkbare Auflösung vorab die optimale Datei zu erzeugen ist auch nicht unproblematisch. Adaptive-Images (www.adaptive-images.com) bietet eine möglichen Ausweg über die Nutzung von.htaccess und dynamischer Erzeugung von angepassten Bildinhalten. So funktionieren ADAPTIVE-IMAGES
Sourcecode der Beispiele <!DOCTYPE html> <html lang="en"> <head> <title>simplegrid</title> <meta http-equiv="x-ua-compatible" content="ie=emulateie7; IE=EmulateIE9"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"/> <link rel="stylesheet" href="./css/base.css" type="text/css" media="all"> <!--[if lt IE 9 ]><link rel="stylesheet" href="./css/720_grid.css" type="text/css"><![endif]--> <link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)"> <link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)"> <link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" > </head> <body> <div class="grid"> <div class="example-grids"> <div class="slot-0">.slot-0 <div class="slot-1">.slot-1 <div class="slot-2">.slot-2 <div class="slot-3">.slot-3 <div class="slot-4">.slot-4 <div class="slot-5">.slot-5 <!-- /.row mit 6 Spalten --> <div class="slot-6">.slot-6 <div class="slot-7">.slot-7 <div class="slot-8">.slot-8 <div class="slot-9">.slot-9 <!-- /.row mit 4 Spalten --> <div class="slot-0">.slot-0 <div class="slot-1-2">.slot-1-2 <div class="slot-3-4-5">.slot-3-4-5 <!-- /.row mit 3 unterschielich breiten Spalten --> <div class="slot-0">.slot-0 <!-- end.slot-0 --> <div class="slot-1-2-3">.slot-1-2-3 <div class="slot-1">.slot-1 <div class="slot-1">.slot-1 <div class="slot-2-3">.slot-2-3 <div class="slot-2">.slot-2 <div class="slot-3">.slot-3 <div class="slot-2-3">.slot-2-3 <!-- end.slot-1-2-3 --> <div class="slot-4-5">.slot-4-5 <div class="slot-4">.slot-4 <div class="slot-5">.slot-5 <!-- end.slot-4-5 --> <!-- /.row --> <!-- /.example-grids --> <!-- /.grid --> </body> </html>