Responsive Webdesign Test für deine Webseite

Responsive Webdesign

Responsive Webdesign, also ein sich des Ausgabemediums anpassendes Webdesign, ist zur Zeit in aller Munde. Das ist kein Wunder, denn bei einem explosionsartig wachsenden mobilen Internetmarkt wird die Zielgruppe mit Smartphones und Tablets immer größer. Für Webseitenbetreiber heisst das, den Inhalt der Webseite entsprechend aufzubereiten um den Besucher nicht lang warten zu lassen oder ihm das Besuchserlebnis auf der Webseite zu vermiesen.

Einst konnten es sich nur „große“ Firmen leisten neben den Inhalten für den „normalen“ PC User auch Inhalte für mobile User bereitzustellen. Das ist heute ganz anders, Dank XHTML/HTML5 und moderner CSS Techniken ist nun jeder Webdesigner so wie auch Webseitenbetreiber in der Lage, ohne große Kosten und zusätzlichem Aufwand seinen Besuchern auch mobile Inhalte zur Verfügung zu stellen.

Responsive Webdesign nennt sich die Zauberformel, die mittlerweile auch von Google zur Erstellung mobiler Inhalte empfohlen wird. Um es einfach zu halten: beim Responsive Webdesign fragt die Webseite ab welche Auflösung das Ausgabegerät auf dem sie gerade dargestellt wird hat (MediaQuery). Entsprechend der Auflösung, zum Beispiel die eines Tablets, werden dann Bilder skaliert, HTML Elemente wie Navigationen und Menüs anders positioniert und auch Schriften entsprechend angepasst. Das funktioniert mit recht wenigen Zeilen Code in den Stylesheet Dateien (CSS). Der Vorteil an dieser Technologie liegt auf der Hand. Betreiber einer Webseite müssen nur noch einen Inhalt pflegen, der doppelte oder gar dreifache Aufwand entfällt. Auch aus Google Sicht bringt das große Vorteile, man muss nur noch eine Webseite/Sitemap übermitteln und nicht mehr die „normale“ und die „mobile“ separat. Doublicate Content ist damit ausgeschlossen.

Wer seine Webseite nun auf Responsive Webdesign umstellt muss oft testen. Viele machen das mit den Ausgabegeräten direkt, doch es gibt auch andere Möglichkeiten. Eine davon ist die von Victor Coupon, einem Interfacedesigner. Er hat ein Bookmarklet bereitgestellt welches Eure Webseite direkt im Browser auf die verscheiden Ausgabeformate trimmt. Es lassen sich Hoch- und Querformate von Tablet PC und Smartphone per Toolbar einstellen, man kann aber auch eigene Größen definieren.

Probiert es aus

Responsive Webdesign Test iPad
Darstellung meiner Webseite für Tablet im Hochformat

Responsive Webdesign Test iPad
Darstellung meiner Webseite für Tablet im Querformat

responsive Webdesign Test iPhone
Auch die Darstellung für Smartphones ist möglich, Hochformat…

Responsive Webdesign Test iPhone
…und eben auch Querformat lassen sich über eine Toolbar festlegen. Man kann auch eigene Werte eingeben.

Eine Antwort auf „Responsive Webdesign Test für deine Webseite“

  1. Das ist mal eine tolle Idee. Die Seite ist echt cool. Gerade wenn man seinen Kunden eine responsive Website erstellt und diese aber nicht alle Geräte zum ausprobieren haben. So schickt man seine Kundschaft dort vorbei und die können sich die einzelnen Darstellungen anschauen!

Kommentare sind geschlossen.