Responsives Webdesign

Mobile First ist aktuell

Tablets und andere mobile Geräte verdrängen immer mehr den konventionellen Bildschirm und auch Notebooks. Die Differenz zwischen einem 27" LCD mit 1960/2560 x 1050 Pixeln Auflösung und einem Tablet mit Touchscreen und 1000 x 720 Bildpunkten ist beträchtlich. Schriften, Bedienungsfelder müssen in der Grösse angepasst werden und die viel eingesetzen MouseOver Funktionen sind nicht überall vorhanden. 

Die Lösung ist hier ein responsives (adaptierbares) Design der Website oder des Shops. Für den Designer sind hier Hilfsmittel wie ein CSS Framework was unumgänglich um effizient ein Design entwickeln zu können.  Eine mit einem responsiven Design erstellte Website erkennt die Eigenschaften des Bildschirmes und zeigt die Website so immer optimal in Auflösung und Bedienung an.

Wir setzen dazu auf Bootstrap 3.0, das Framework hat sich als meist eingesetztes stark durchgesetzt und steht jetzt in der 3. Version zur Verfügung.  Bootstrap ist ein Grid-basierendes Framework  und weist für verschiedene Ausgabegeräte entsprechende Vorgaben auf. Es lässt sich dabei festlegen wie die Site umgesetzt werden muss. Festlegen lässt sich wie die Spaltenfolge und Navigation optimal umgesetzt werden.

Sicher findet man auch Fälle, wo eine Umsetzung mit einem Framework nicht unbedingt optimal sein kann. In solchen Fällen empfielhlt es sich eine separate Mobile-Lösung zu entwickeln. Für solche Aufgaben setzen wir das Sencha Framework ein.

Beispiel Website des Reisebüros Crystal-Travel
Zeichen der Zeit erkannt, neue Website ist mobil Einsetzbar

Responsive Design

Die neue Website des Reisebüros Crystal-Travel wurde konsequent auf responsives Design umgesetzt. Gerade im Bereich Reisen ist die Wahrschienlichkeit sehr gross dass ein Interessent mobil unterwegs ist. Ein Kunde sitzt auf einem Flughafen fest und möchte mit dem Reisebüro kontakt aufnehmen. 

Das Bild oben zeigt die Website auf einem grossen Dektop Monitor mit HD-TV Auflösung. Der Inhalt ist in der Grösse dem Monitor angepasst, grosses Teaserbild und grosszügige Aufteilung des Inhalts.

Website auf kleinem Monitor, Tablet

Screen auf Tablet oder kleinem Monitor

Wird die Site auf einem kleineren Monitor mit Auflösung 1024 Pixel, oder Tablet mit entsprechender Auflösung angezeigt, so wird das Teaserbild verkleinert und der seitliche HIintergrund fällt weg. Die Navigationsbuttons sind proportional grösser für die Fingerbedienung und auch Texte sind gut lesbar.

Website auf mobilen Devices

Website auf einem Smartphone

Bei mobilen Geräten mit Bildschirm-Auflösung unter 1000 Pixel Auflösung wird die Navigation anders aufgebaut und die ganze Website wird nur noch einspaltig dargestellt. Dabei lässt sich die Reihenfolge der Content-Elemente genau festlegen.

Navigation mit mobilen Devices

Ansicht Website auf Tablet 800 Pixel

Die Navigation wird entsprechend dem Betriebsystem des Devices angepasst und so angeordnet, dass eine problemlose Navigation mit Touchscreen möglich ist.