Responsive Webdesign, mobile Homepage: Was ist der Unterschied?

Responsive Webdesign ist derzeit ist aller Munde. Zu Recht, denn jede Homepage sollte auch auf dem Tablet oder dem Smartphone gut lesbar sein. Was aber ist der Unterschied zur mobilen Webseite? Ich erkläre es Ihnen hier.

Responsive Webdesign: gleicher Code, gleiche URL

Wenn eine Homepage responsive ist, dann ist Sie im Tablet oder Smartphone über dieselbe Adresse aufrufbar wie die „Desktop-Version“ der Homepage für den PC. Es wird daher auch derselbe html-Code ausgeliefert.

Responsive wird sie dadurch, dass die Elemente der Homepage verkleinert und/oder neu angeordnet werden. Dreispaltige Layouts werden dadurch in der Regel zweispaltig (auf dem quer gehaltenen Tablet) oder einspaltig (auf dem hochkant gehaltenen Tablet oder dem Smartphone).

Dabei wird üblicherweise eine linke Spalte oder Sidebar vor dem Content, also dem mittleren Inhaltsbereich, angezeigt und eine rechte Sidebar oder Spalte unter dem Content. Slider werden entweder verkleinert oder ausgeblendet, Bilder in der Regel verkleinert.

Ein Beispiel dafür ist die Homepage, die Sie gerade besuchen, also meine. Wenn Sie das Browserfenster verkleinern, sehen Sie, wie sich die Elemente verkleinern und verschieben. Wie ich gerade sehe, klappt das allein bei den Social-Media-Buttons nicht so ganz…

Moderne Themes, die Sie für WordPress & Co kaufen könnt, sind heute eigentlich durch die Bank bereits responsive. D.h. man braucht sich um die Umsetzung einer responsiven Version nicht mehr zu kümmern.

Nimmt man im CSS Änderungen vor, sollte man das Aussehen der Homepage auf Smartphones & Co. allerdings immer kontrollieren, weil man das responsive Verhalten natürlich durch solche Änderungen auch beeinflussen kann.

Ausblenden „überflüssiger“ Elemente möglich

Um das „mobile Surf-Vergnügen“ zu erhöhen, kann man in der responsiven Version auch Elemente ausblenden lassen, die man nicht als so wichtig erachtet. Es wird dann im CSS festgelegt, dass ein Element dann nicht angezeigt wird, wenn die Bildschirmauflösung eine gewisse Größe unterschreitet. Das ist keine Hexerei, sondern recht einfach. Das soll hier aber nicht näher beleuchtet werden. Deswegen hier eine kurze Erläuterung bei Wikipedia. Und etwas mehr bei selfhtml.org. Google hilft Ihnen ansonsten auch weiter, Stichworte: CSS/Media Queries.

Mobile Homepage: eigener Code, eigene URL

Etwas ganz anderes ist die mobile Variante einer Homepage. Hierbei handelt es sich um eine völlig eigenständige Homepage, die extra für mobile Endgeräte entwickelt wird. Sie wird also parallel zur normalen „Desktop-Version“ erstellt und hat daher auch eine eigene URL, meist eine Subdomain wie mobil.domain.de.

Es gibt allerdings auch Ausnahmen hierzu, die allein für den mobilen Markt hergestellt werden, z. B. www.handycasino.de. Hier gibt es keine Desktop-Variante.

Der Vorteil von solchen mobilen Homepages ist, dass diese viel dezidierter für die Verwendung mit Smartphone & Co angepasst werden können. Nachteil ist ein erhöhter Aufwand, wenn man daneben noch die Desktop-Variante pflegt.

Eine mobile Webseite lässt sich jederzeit erstellen, eine responsive Homepage sollte hingegen mit der Dektop-Version zusammen geplant werden. Ein Nachrüsten der „Responsiveness“ ist wegen des hohen Aufwandes kaum sinnvoll.