Mobile Ready mit responsive Webdesign

Immer mehr Webseiten werden auf Tablet´s und Smart Phones betrachtet. Selbstverständlich also, dass Ihre Website auch auf diesen Geräten eine „gute Figur“ machen sollte.

Technisch betrachtet gibt es zwei Möglichkeiten Ihre Website für mobile Endgeräte zu optimieren: a) Indem Ihre Website als App nochmals vollständig neu programmiert wird. Oder b) indem die Bildschirmgröße abgefragt und das dafür passende CSS bereit gestellt wird (responsive Webdesign).

Responsive Webdesign hat gegenüber einer App eine Reihe von Vorteilen und ist zudem deutlich kostengünstiger realisierbar. Deshalb entscheiden sich meine Kunden überwiegend für den responsiven Ansatz. Für einen verhältnissmäßig kleinen Aufpreis wird aus einer Website mit einer festen Größe, eine Website mit unterschiedlichen Größen. So kann dieselbe Website auf einem Widescreen genauso gut betrachtet werden, wie auf dem kleinsten mobile Display.

So funktioniert responsives Webdesign

Der Webdesigner gestaltet mindestens 3 Layouts, die auf unterschiedlichen Bildschirmgrößen funktionieren. Umgesetzt werden die Layouts mit Hilfe von Media Queries (CSS).

Die Vorteile:

• Design und Inhalt passen sich automatisch den unterschiedlichen Bildschirmgrößen an.
• Die Kosten gegenüber einer App-Entwicklung sind geringer.
• Eine doppelte Pflege von Inhalten entfällt.
• Sie sind unter einer Internetadresse auf allen Endgeräten erreichbar. Subdomains mit einem „m“ voran entfallen.

Die Nachteile:

• Gegenüber einer App können Sie nicht alle Funktionen nutzen.

Merkmale eines responsiven Webdesigns:

• Flexibles Layout. Bspw. wird das Menü der Website auf dem Desktop links geszeigt, auf dem Handy dagegen oben im Kopfbereich.
• Variable Schriftgrößen. Eine bestimmte Schriftgröße kann auf dem Bildschirm gut lesbar sein, auf dem iPhone hingegen bedeutet das Augenschmerzen. Desahlb müssen sich auch die Schriftgrößen dem Bildschirm anpassen.
• Variable Bildgrößen. Ganz klar, ein 900px breites Bild führt auf dem Handy zu unschönen Ergebnissen. Für eine optimale Darstellung auf unterschiedlichen Bildschirmgrößen, werden Bilder automatisch skaliert.

Was zu beachten ist:

• Die Navigation muss auf einen Touchscreen reagieren können (ein Handy hat keine Maus).
• Der Browser muss CSS3 fähig sein (insbesondere Medai Queries muss er beherschen)
• Ladezeiten sind unbedingt zu optimieren. Dies sollte evtl. bereits bei der Konzeption berücksichtigt werden.