Haben Sie den Begriff “responsive Design” schon einmal gehört und sich gefragt was damit gemeint ist? Schauen wir uns das Thema einmal genauer an.
Der Begriff “responsive Design” kommt aus dem englischen und meint sinngemäß übersetzt “sich anpassende Gestaltung”. Dieses technische und gestalterische Konzept unterstützt die Anforderungen für die Anzeige von Webinhalten auf Smartphones und Tablets. Elemente einer Webseite (Navigationsleisten, Bilder, Texte) aber auch Eingabemethoden werden so auf die Auflösung und Größe von Mobilgeräten angepasst.
Wie funktioniert responsive Webdesign?
Wenn eine Webseite in einem Browser geladen wird, werden bestimmte Informationen wie zum Beispiel die Displaygröße an den ausliefernden Server übergeben. So können über einen Schalter im Code zum Beispiel andere Schriftgrößen oder kleinere Bilder vom Server bereit gestellt werden. Das beeinflusst nicht nur die Benutzerfreundlichkeit, sondern kann auch die Ladezeit einer Webseite senken. Schließlich macht es keinen Sinn, ein Bild mit 1000px auszuliefern wenn das Gerät nur maximal 480px anzeigen kann.
Inhalte die z.B. in Spalten angeordnet sind können so weiterhin in einer logischen Reihenfolge ausgeliefert werden. Der Benutzer kann so den Inhalt einer Webseite genau so wie ihn der Redakteur erfasst hat konsumieren.
Brauche ich responsive Design auf meiner Webseite?
Die kurze Antwort lautet: Ja, man braucht auf jeden Fall ein responsive Design auf seiner Webseite.
Jetzt werden Sie vielleicht denken, Sie können auch zwei komplette Webseiten machen – eine für Desktop und eine für Mobil optimiert. Am Beginn der Smartphone-Ära haben dies auch viele Unternehmen mangels anderer Alternativen gemacht. Das hatte jedoch zwei große Nachteile: Inhalte mussten doppelt erfasst werden und auch der finanzielle Aufwand durch den Betrieb von zwei Webseiten war höher.
Was sind die Vorteile von responsive Webdesign?
Kurz zusammengefasst bietet Ihnen ein responsive Webdesign folgende Vorteile:
[av_iconlist position=’left’ iconlist_styling=’av-iconlist-small’ custom_title_size=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” custom_content_size=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” font_color=” custom_title=” custom_content=” color=’custom’ custom_bg=” custom_font=’#7fae8d’ custom_border=” animation=” alb_description=” id=” custom_class=” av_uid=’av-b5twom’ admin_preview_bg=”]
[av_iconlist_item title=’bessere Lesbarkeit auf Mobilgeräten’ icon=’ue812′ font=’entypo-fontello’ heading_tag=” heading_class=” link=” linktarget=” linkelement=” av_uid=’av-wzvfa’][/av_iconlist_item]
[av_iconlist_item title=’schnellere Ladezeit auf Mobilgeräten’ icon=’ue812′ font=’entypo-fontello’ heading_tag=” heading_class=” link=” linktarget=” linkelement=” av_uid=’av-81lhfq’][/av_iconlist_item]
[av_iconlist_item title=’weniger finanzieller Aufwand da nur eine Webseite betrieben werden muss’ icon=’ue812′ font=’entypo-fontello’ heading_tag=” heading_class=” link=” linktarget=” linkelement=” av_uid=’av-65wa8m’][/av_iconlist_item]
[av_iconlist_item title=’Zeitersparnis, da keine doppelte Wartung von Inhalten erforderlich ist.’ icon=’ue812′ font=’entypo-fontello’ heading_tag=” heading_class=” link=” linktarget=” linkelement=” av_uid=’av-3ys7di’][/av_iconlist_item]
[av_iconlist_item title=’mehr Besucher über Mobiltelefone durch höheres Ranking auf Suchergebnis-Seiten’ icon=’ue812′ font=’entypo-fontello’ heading_tag=” heading_class=” link=” linktarget=” linkelement=” av_uid=’av-ttly’][/av_iconlist_item]
[/av_iconlist]
Wie kann ich eine Webseite auf responsive Webdesign testen?
Die einfachste und wohl naheliegendste Variante ist, die Webseite auf dem eigenen Mobiltelefon oder Tablet aufzurufen. Hier kann es – wie auch bei den Desktop-Varianten einer Webseite – zu unterschiedlichen Anzeigen je Browser und Betriebssystem kommen. Zum Testen könnte man auch Familie und Freunde um Hilfe bitten um möglichst viele Varianten abzudecken. Das ist jedoch eine zeitaufwändige Angelegenheit die Änderungen – sollte ein auszubessernder Punkt gefunden werden – nur mühsam ermöglicht.
Naheliegender ist, ein Test-Tool zu verwenden. Hier gibt es etliche Varianten im Internet, wie zum Beispiel den Responsinator oder das Website Responsive Testing Tool. Bei beiden Tools gibt man die Webadresse der zu testenden Seite ein und kann so die Webseite mit den verschiedenen Auflösungen und Bildschirmgrößen testen.
Was kann ich tun, wenn meine Webseite kein responsive Design unterstützt?
Kommt man bei seinem Test zu der Erkenntnis, dass die eigene Webseite nicht responsive ist, hat man drei Möglichkeiten:
Das verwendete Template upgraden
Der erste Schritt den ich in so einer Situation empfehlen würde, wäre zu recherchieren ob das eingesetzte Template der Webseite in der Zwischenzeit aktualisiert wurde und in der neuen Version bereits nach responsive Design Richtlinien adaptiert wurde. Dann müsste man nur das neue Template einspielen und alles ist gut.
Ein neues Template auswählen
Ist das bisher verwendete Template nicht aktualisiert worden, kann man ein neues Template für die Webseite einspielen. Das bedeutet jedoch einiges an Mehraufwand, zumal sich das Look & Feel der Webseite nur marginal ändern sollte. Farbgebung, Schriften, allgemeiner Seitenaufbau will man ja meist grundsätzlich nicht ändern um den Wiedererkennungswert der Webseite zu erhalten. Hinzu kommt, dass man eventuell verwendete Shortcodes in allen veröffentlichten Seiten anpassen oder gar aus- oder umbauen müsste.
Einen kompletten Relaunch
Ein kompletter Relaunch kann in manchen Fällen die günstigste Variante sein. Wenn die Webseite vor mehr als 5-7 Jahren zuletzt “grundüberholt” wurde, wäre das zu überlegen. Auch wenn es im ersten Moment nach viel Arbeit klingt, langfristig würde sich ein kompletter Relaunch der Webseite bestimmt auszahlen!
Egal ob Sie Unterstützung beim upgrade Ihres Templates benötigen oder einen kompletten Relaunch Ihres Webauftrittes erwägen: Ich stehe Ihnen hier gerne unterstützend zur Seite!
[av_button label=’Hier können Sie mich kontaktieren.’ icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ size=’medium’ position=’center’ label_display=” title_attr=” color=’theme-color’ custom_bg=’#444444′ custom_font=’#ffffff’ link=’page,33′ link_target=” id=” custom_class=” av_uid=’av-2hveue’ admin_preview_bg=”]
