27
10

Was ist eigentlich „responsive design”?

Der Begriff „responsive design” ist aufgekommen im Zusammenhang mit der immer größer werdenden Verbreitung von Smart-Phones und Tablet-PC’s und deren Zugriffe auf das Internet, respektive auf einzelne Websites.

Bevor es diese internetfähigen mobilen Endgeräte gab, war das Webdesign eigentlich relativ einfach. Der Webdesigner wußte, dass der User an einem Schreibtisch sitzt, vor sich einen Monitor in den gängigen Größen. Alternativ benutzte der User ein Notebook. Der Webdesigner konnte als relativ einfach neue Designs entwickeln. Solange diese auf den gängigen Monitoren gut aussahen, war alles in Ordnung.

Mit den heutigen mobilen Endgeräten, insbesondere den Smartphones, muss der Webdesigner aber nun auch Bildschirmgrößen berücksichtigen, die nur einen Bruchteil eines großen Desktop-Monitors ausmachen, nämlich die Displays dieser Smartphones.

OK, könnte der interessierte Laie sagen, dann entwickelt doch eine Website so, dass sie sich an die Größe des vorhandenen Displays anpasst, also bei einem kleinen Display praktisch in sich zusammenschnurrt und bei großen Displays die gesamte Größe ausnutzt.

Das ist zwar ein guter Ansatzpunkt,  funktioniert aber maximal auf Tablet-PC’s. Auf Smartphones wird auf diese Weise die ganze Website zwar noch ordentlich dargestellt, aber alles ist viel zu klein, insbesondere der Text ist nicht mehr lesbar. Dadurch wird der User gezwungen, ständig in den Bildschirm hinein zu zoomen, was natürlich lästig ist. Eine Website sieht dann in etwa so aus:

Batterien für Industrie, Gewerbe und Privat im Großraum Köln-Bonn

Mit der Lösung dieses Problems beschäftigt sich das „responsive design”. Dabei wird eine Website von grundauf so entwickelt, dass sie auf allen Endgeräten eine gute Figur macht. In der Hauptsache erreicht man diesen Effekt dadurch, dass die Breite einer Website nicht mehr mit einer festen Pixelanzahl definiert wird, sondern in Prozentwerten. Vorhandene Bilder werden runterskaliert und der Text wird per CSS so angepasst, dass er auch auf Smartphones gut lesbar ist.

Der Vorteil dieser Lösung liegt darin, dass man im Prinzip nur eine Website entwickeln muss. Eine andere Lösung besteht darin, dass man zwei Websites entwickelt. Eine für die Standard-Desktop-PC’s und eine weitere für die mobilen Endgeräte. Die mobile Version findet man dann in der Regel unter einer URL mobile.meine-website.de.

Der Nachteil dieser Lösung besteht darin, dass man praktisch zwei Websites entwickeln und pflegen muss. Außerdem ergeben sich bei dieser Lösung grundsätzlich noch Probleme mit den Suchmaschinen, wenn man einfach hingeht und auf beiden Versionen identische Texte verwendet. Dadurch schafft man den sogenannten „Double-Content“, was Google gar nicht gerne sieht. Für dieses Problem  gibt es aber auch Lösungen.

Welche dieser beiden Ansätze der Richtige ist, kann man eigentlich nur im Einzelfall beurteilen. Wenn Sie heute eine Website komplett neu entwickeln (lassen), dann sollte das „responsive design” zum Einsatz kommen. Wenn Sie bereits eine Website haben, diese aber nicht komplett aufgeben wollen, dann wäre die Entwicklung einer zweiten Website, die nur für die Smartphones zuständig ist, sicherlich sinnvoller.