Mobile Webseiten oder Responsives Webdesign?

Mobile Webseiten oder Responsives Webdesign?

Wie Ihre Homepage auch auf Smartphone und Tablet perfekt funktioniert

Wissen Sie, von wo und wie Ihre Kunden Ihre Website aufrufen? Wird Ihre Website auf einem Smartphone oder Tablet-Computer genauso gut und übersichtlich dargestellt, wie auf einem Laptop oder PC? Beide Fragen sollten Sie auch als mittelständischer Unternehmer künftig mit „Ja“ beantworten können. Denn die Internet-Nutzer sind so mobil und flexibel wie nie zuvor.

Sechs von zehn Bundesbürgern und damit rund 42 Millionen Deutsche besitzen internetfähige Mobiltelefone, 31 Millionen (44 Prozent) haben ein modernes Smartphone. Jede Woche gehen 13,7 Millionen Bundesbürger (19 Prozent) über ihr internetfähiges Mobiltelefon online; 8,2 Millionen Deutsche (12 Prozent) greifen über Tablets auf Online-Inhalte zu. (Quelle: BVDW Bundesverband Digitale Wirtschaft e. V. 11/2012).

Mobile Kunden wollen funktionierende Webseiten auf allen Bildschirmen

Die Mobilität Ihrer Kunden stellt Ihre Webeite vor eine völlig neue Herausforderung. Wurde bisher ein Webauftritt zumeist für die Bildschirmauflösung von maximal 1000 px Breite auf dem Computer-Desktop optimiert, gibt es jetzt eine Vielzahl von Größen für Smartphones, Tablets, Laptops etc. Und ständig kommen neue Endgeräte dazu.

Aber nicht nur die extrem unterschiedlichen Bildschirmgrößen erschweren die Darstellung, auch einige Techniken sind nicht mit allen mobilen Endgeräten kompatibel, so werden beispielsweise Flash-Animationen nicht auf dem iPhone oder iPad dargestellt.

Um Ihre Webseite für alle mobilen Besucher gleichermaßen gut aussehen zu lassen, stellen wir Ihnen hier zwei verschiedene Möglichkeiten vor:

1. Firmen-Webseite wird ergänzt durch mobile Webseite

Damit Ihr Internetauftritt vor allem auf Smartphones gut funktioniert, können Sie zusätzlich eine mobile Webseite anbieten. Diese zeigt reduziert und übersichtlich die wichtigsten Infos zu Ihrem Unternehmen, wie Leistungen, Öffnungszeiten, Kontaktdaten, Anfahrtsbeschreibung etc. Das BVMW-Mitglied Poccy bietet dafür einen „Mobilen-Website-Generator“ an unter www.poccy.de

Vorteil:
• Eine mobile Webseite ist schnell und kostengünstig umsetzbar.

Nachteile:
• Es besteht ein doppelter Pflegeaufwand bei der Aktualisierung von Texten und Bildern.
• Für Tablets ist die Darstellung der mobilen Webseite meist nicht optimal. Entweder benötigt man dann eine zusätzliche Variante in einer Zwischengröße, oder die herkömmliche Desktop-Version der Webseite muss für Tablets optimiert werden.

2. Firmen-Webseite wird erstellt im responsiven Webdesign

Responsives Webdesign ist die technische Umsetzung eines anpassungsfähigen Website-Layouts. Gemeint ist damit, dass Ihre Webseite so gestaltet und programmiert wird, dass sie automatisch „reagiert“, d. h. Design, Navigation und Inhalte passen sich der Bildschirmauflösung des Endgerätes an. Ziel ist es, die komplette Website auf einem Smartphone genauso benutzerfreundlich und gut lesbar darzustellen, wie auf einem großen Bildschirm.

Vorteile:
• Eine responsives Webseite ist einfacher zu pflegen, als die Kombination von „normaler“ Webseite und mobilen Versionen. Denn alle Inhalte, Texte und Bilder werden nur einmalig angelegt und aktualisiert.
• Responsives Webdesign wird mittlerweile auch von Google zur Erstellung mobiler Webseiten empfohlen, da nur eine Sitemap übermittelt werden muss, doppelter Content vermieden wird, Google Crawler können die Seite leichter korrekt indexieren und Besucher die Inhalte schneller im Netz teilen. All dies wirkt sich positiv auf das Suchmaschinen-Ranking aus.

Nachteile:
• Das responsive Webdesign erfordert eine komplette Neu-Gestaltung und -Programmierung der bestehenden Webseite.
• Eine responsive Gestaltung und Programmierung ist komplexer als bei herkömmlichen Webseiten. Dieser Mehraufwand amortisiert sich aber schnell durch den geringeren Pflegeaufwand.

Tipp: Nutzen Sie einen geplanten Relaunch Ihrer bestehenden Webseite für den Umstieg auf ein responsives Webdesign.

Wie responsives Webdesign funktioniert

Drei Gestaltungsrichtlinien bestimmen das responsive Webdesign:
1. Form follows function: Die Darstellung von Design und Inhalt der Webseite folgt der Bildschirmauflösung des verwendeten Smartphones, Tablets oder Desktops. Das responsive Webdesign orientiert sich damit absolut am Nutzer.
2. Mobile First: Die Entwicklung geht immer von der kleinsten Bildschirmauflösung aus, d. h. dem Smartphone. Dies betrifft sowohl die Gestaltung einzelner Elemente als auch der Datenmenge.
3. Beschränkung auf das Wesentliche: Kleine Bildschirmgrößen zwingen zu einer Reduktion auf das Wesentliche. Ziel ist eine schnelle und intuitive Bedienung durch den Nutzer. Programmiert wird das responsive Webdesign mit HTML5 und CSS3. „Media Queries“ fragen ab, mit welchem Endgerät der Besucher auf die Website zugreift. Geprüft werden u. a. Display-größe, Auflösung, Bildschirmformat, Sprache und welche Eingabemöglichkeiten zur Verfügung stehen (Maus, Tastatur, Finger). Je nach Ergebnis passt sich dann das Layout der Website sowie die Größe von Schriften und Bildern automatisch an.

Was bei welcher Auflösung und an welcher Stelle angezeigt wird, ist Teil des Webseiten-Konzeptes, welches vor der Gestaltung und Programmierung erstellt wird. So werden auf Smartphones die Inhalte oft untereinander angezeigt, Tablets im Hochformat verzichten bei der Darstellung meist auf ein bis zwei Spalten, Tablets im Querformat und große Monitore präsentieren die Webseite in voller Breite.

Praxis-Tipp: Wann sollten Sie eine responsive Webseite einsetzen?

Wenn Ihre Website nicht optimal auf Smartphones und Tablets dargestellt wird.
Dies können Sie ganz einfach testen, indem Sie mit der Maus das Browserfenster entsprechend kleiner ziehen.

Wenn Ihre Webseite viele Zugriffe von Smartphones und Tablets hat.
Dies erfahren Sie über Analyse-Tools, die Sie kostenlos in Ihre Webseite einbinden können, wie Piwik oder Google-Analytics.

Claudia Mattheis

Diesen Artikel herunterladen …