24. Juni 2013

Responsive Webdesign

Mobile Endgeräte werden immer wichtiger in unserem Alltag. Große Monitore sind auf unseren Schreibtischen auch bereits die Norm. Dieser technologische Fortschritt hinterlässt seine Spuren bei der Entwicklung von Webseiten. Daher werden Webseiten nun immer häufiger "responsive" aufgebaut.

Responsive Webdesign stellt eine aktuelle Technik dar, wobei mit Hilfe von HTML5 und CSS3 Media-Queries eine Optimierung des Layouts und der Inhalte auf Desktop PC, Tablet und Smartphone vorgenommen werden kann.

Media Queries

Media Queries sind dabei eine wesentliche Voraussetzung, welche die Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Tablet oder Smartphone. Erfahrungsgemäß entsteht für die Entwicklung eines Responsive Designs zwar ein Mehraufwand in der Konzeption und Gestaltung, der bei der technischen Umsetzung aber wieder eingespart werden kann.

Standard Auflösungen der verschiedenen Geräte sind:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Computer-Desktop: 1024px+

Frameworks

Viele Frameworks bieten mehr oder weniger unkompliziert nutzbare Komponenten für die Gestaltung responsiver Webseiten. Derzeit setzen wir als Framework Bootstrap ein, welches von Twitter entwickelt wurde. Bootstrap basiert auf einem 12-spaltigen Grid-System mit einer Default-Breite von 940px. Der Kern des Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten. Bootstrap ist sehr umfangreich und enthält sehr viele Oberflächenelemente, Navigationselemente, Labels und Hinweisnachrichten.

Auch aus SEO Sicht sollen Webseiten die eine schlechte mobile Ansicht liefern, laut Google, bald im Index nach unten rutschen. Um so wichtiger ist es also, Webseiten immer auf dem neuesten Stand zu halten und Responsive Webdesign zu nutzen. So wird ermöglicht, dass alle Inhalte auf allen Bildschirmen ideal dargestellt werden.

Auch wir haben Erfahrungen in diesem Bereich und bereits einige Seiten in Responsive Webdesign umgesetzt. Weitere werden in nächster Zeit folgen.

Link: Offizieller Google Beitrag zum Ranking von mobilen Webseiten

24. Juni 2013