Insights 2013 | Ansicht verschiedener Endgeräte

Workflow im Responsive Webdesign

Die Anzahl mobiler Nutzer im Internet wird Schätzungen zufolge in den nächsten Jahren die Anzahl klassischer Desktop-Nutzer überstiegen haben. Der Siegeszug von Tablets und Smartphones ist für die Betreiber von Websites eine Herausforderung – denn die Geräte haben verschiedenste Displaygrößen und werden nicht mit der Maus, sondern mit dem Finger gesteuert. Die Lösung: Responsive Webdesign. Wir geben Ihnen einen Einblick in die Grundlagen von Responsive Webdesign, der Funktionsweise und erklären, wie und warum Ihre Website davon profitiert.

Mittwoch, 28. August 2013

Kampf mit der Vielfalt

Bisher wurden zumeist separate mobile Versionen einer Website erstellt, auf welche man die Besucher automatisiert umgeleitet hat. Diese speziellen mobilen Versionen waren genau auf die Größe eines WAP-Handys oder Smartphones zugeschnitten und in kleinem Maße auch flexibel, um sie auf unterschiedlichen Geräten und Auflösungen bedienbar zu machen. Doch bereits heute gibt es eine unüberschaubare Vielzahl an Geräten in unterschiedlichen Formen und Größen. Es ist nahezu unmöglich, mit klassischem Webdesign ein gut bedienbares Ergebnis für alle zu erzielen. Genau hier kommt Responsive Webdesign ins Spiel.

Statt zwei eigenständige Versionen für Desktop- und mobile Besucher zu erstellen, ist das Ziel von Responsive Webdesign die Erstellung einer einzigen Version der Website. Durch die dynamische Anpassung von Layout, Interface und Inhalt an die Auflösung und Ausrichtung des Geräts, erhält jeder Nutzer eine optimale Ansicht der Website.

Umdenken zwingend erforderlich

Zunächst muss man sich dabei von der Vorstellung lösen, ein pixelgenau identisches Ergebnis durch alle Medien hinweg zu erzielen. Jedes Format muss neu überdacht werden. Ein gutes Beispiel für diese dynamische Anpassung ist dieser Blog. Verkleinern Sie das Fenster Ihres Browsers in der Breite, so ändert sich das Layout an vordefinierten „Bruchstellen“. Wird eine bestimmte Größe unterschritten, wandert beispielsweise die Seitenspalte unter den Inhaltsbereich. Dadurch erhält der Hauptinhalt der Seite mehr Platz und kann so optimal dargestellt werden. Das Design ist also „responsive“, indem es auf den verfügbaren Platz reagiert.

Diese Methodik kann auf alle Elemente einer Seite angewandt werden, also auch auf sämtliche Inhalte wie Texte, Bilder oder Videos.

Maus vs. Finger

Mindestens genau so wichtig wie die Anpassung des Grundlayouts ist die Anpassung des gesamten Navigationskonzeptes. Denn allein das „Treffen“ von Links mit dem Finger auf Smartphones oder Tablets kann zum Problem werden, wenn eine Website nicht dafür optimiert wurde. Und genau das darf eine Navigation natürlich niemals sein – eine Herausforderung für den Nutzer. Bedienbarkeit ist das A und O einer Website und deswegen braucht es im optimalen Fall auch drei unterschiedliche Navigationskonzepte für Desktop-, Tablet- und Smartphone-Nutzer, da die rein mobilen Varianten oftmals auf Tablets zu klobig wirken. Ein Responsive Webdesign kann dabei auf alle drei Gerätegrößen optimal eingehen und sicherstellen, dass die Website immer gut zu bedienen ist.

SEO?

Niemand kann sich heute noch erlauben, Suchmaschinenoptimierung außer Acht zu lassen. Responsive Design bedeutet, dass Sie sich nur um eine Website kümmern müssen. Das bedeutet nicht nur für die inhaltliche Pflege weniger Zeitaufwand, sondern gerade auch für die Verwaltung von SEO-Kampagnen, da die gleichen Links in allen Medien funktionieren. Sie brauchen keine speziellen mobilen Kampagnen, was Zeit und Geld spart. Auch gegen eine Abstrafung für Duplicate Content muss man sich – anders als bei Responsive Design – bei separaten mobilen Versionen schützen, da hier die gleichen Inhalte über unterschiedliche Domains zu erreichen sind (www.website.de/inhalt und m.website.de/inhalt).

Sogar die Analyse der Benutzerstatistiken wird durch Responsive Webdesign deutlich vereinfacht, da Ihre Nutzer nicht mehr auf mobile Seiten umgeleitet werden. Alle Nutzer werden einheitlich in einer Statistik erfasst; die Identifizierung der Endgeräte findet auf Seiten der Analysesoftware statt.

Kosten und Nutzen

Die Implementierung von Responsive Webdesign ist in jedem Fall schneller als das Aufsetzen einer separaten mobilen Version; egal ob es auf eine bestehende Website angewandt werden soll oder ob die Seite neu entwickelt wird. Neben all den anderen Vorteilen sind die Entwicklungskosten also immer geringer als beim klassischen Ansatz mit der separaten mobilen Version. Das gilt im Übrigen auch für die fortlaufende Wartung, da man nur eine Code-Basis hat.

Fünf gute Gründe

Die Vorteile von Responsive-Design lassen sich in fünf Punkten zusammenfassen:
Kompatibilität für eine große Spanne von Geräten
Eine Code-Basis – keine Notwendigkeit für separate Websites
Keine Notwendigkeit zur separaten Pflege von Inhalten in zwei Versionen
Interface/Navigation optimiert für unterschiedliche Geräte
SEO-Vorteil gegenüber Lösungen mit separaten Websites

Aber… brauchen wir überhaupt eine Version für mobile Geräte?

Ein Blick in die Statistiken Ihrer Website beantwortet die Frage meist recht schnell – die Zahl der mobilen Nutzer wächst und wächst. Und dieser Trend wird sich in den nächsten Jahren mit Sicherheit weiter fortsetzen. Responsive Webdesign mag durch die Anpassung an unterschiedliche Geräte mit den dazugehörigen Tests mehr kosten als eine reine Desktop-Website. Unter dem Strich wird es aber auf jeden Fall günstiger werden als ein nachträgliches Umrüsten; ganz zu schweigen von einer separaten mobilen Version.

Katja Karina Kapelle

Katja schreibt, konzipiert und kontaktet im publicgarden. Hier bloggt sie zu Themen und Fragestellungen aus der Projektarbeit, die für Kunden im Print- und Onlinebereich immer wieder relevant sind.

Insights