Website nicht responsive? Kunde genervt!

Website, die dank Responsive Design auf drei verschiedenen Endgeräten dargestellt wird.
Ein Leben ohne Smartphone? Unvorstellbar! Das Responsive Design macht Ihre Website fit für jedes Endgerät. Adobe Stock, (c) WDnet Studio

Haben Sie schon mal eine Website am Handy aufgerufen und nichts als einen riesigen Bildausschnitt gesehen? Das absolute Todesurteil für die User Experience! HEROLD hat nachgefragt, wie es in Sachen Responsive Design um die österreichischen Websites bestellt ist und auf welche Entwicklungen KMUs sich in der Zukunft einstellen müssen.

Responsive Design – was ist das?

Herr und Frau Österreicher sind heute rund um die Uhr online. Gegoogelt wird aus dem Auto, aus der Bahn, aus der Badewanne und vom Sofa aus. Vorbei die Zeiten, als Suchanfragen old school über den Stand-PC abgesetzt wurden! Laut der Österreichischen Webanalyse nutzen mittlerweile rund 80% der Bevölkerung das Internet via Handy und Smartphone. Das Problem dabei: Webseiten wurden bisher immer für die Darstellung am Desktop optimiert. Aber mit dem geänderten Suchverhalten des Konsumenten kommen neue Herausforderungen auf Webmaster zu. Das Zauberwort der Stunde ist mobile friendly. Aber was genau bedeutet das?

Die erste Lösung der Webdesigner war die mobile Website. Die mobile Website wurde speziell für die Nutzung auf mobilen Endgeräten wie Smartphones und Tablets optimiert, was in erster Linie die Anpassung an die geringere Bildschirmgröße erforderte. Diese (erste) Form der mobilen Website war im Grunde eine reduzierte Version der „normalen“ Desktop-Homepage. Wenn wir heute von einer mobilen Website oder von Mobile Website Optimierung sprechen, dann meinen wir in der Regel das Responsive Design.

Wie funktioniert Responsive Design?

Das Responsive Design stellt die technischen Voraussetzungen für ein anpassungsfähiges Website-Layout zur Verfügung. Mit anderen Worten: Es sorgt dafür, dass die Website sich an jedes beliebige Endgerät anpassen kann und die Inhalte immer optimal dargestellt werden – ganz gleich, ob die Webseite via Desktop, iPad oder Samsung Galaxy S5 aufgerufen wird. Das Responsive Webdesign hat die mobile Website also quasi überflüssig gemacht: Es ist nicht länger nötig, eine „abgespeckte“ Version zu entwickeln, die anstelle der „normalen“ Seite über den Browser abgerufen wird, weil die Website an sich dank Responsive Design bereits mobile friendly ist.

Wie erkennt man Responsive Design? Test

Der einfachste Test auf Responsive Design ist es, am Computer das Browserfenster schmäler zu machen und zu beobachten, ob sich die Anordnung der Elemente am Bildschirm verändert. Responsives Design bedeutet nämlich nicht einfach, dass die Inhalte in Relation zum kleineren Sichtfenster dargestellt werden, sondern auch die Anordnung der einzelnen Elemente (zum Beispiel Headerbild, Navigation usw.) passt sich an das jeweilige Endgerät an. Typisch ist zum Beispiel, dass eine horizontal angelegte Navigation am Smartphone oder Tablet einem einzigen Icon weicht, welches das Menü in einer Drop-down-Liste enthält. Wenn Sie überprüfen möchten, ob Ihre Website mobile friendly ist, klicken Sie hier.

Website mit Responsive Design, deren Inhalte auf verschiedenen Endgeräten optimal dargestellt werden.
Das Responsive Design sorgt dafür, dass der Content auf jedem mobilen Endgerät optimal dargestellt wird. Adobe Stock, (c) That Stock Company

Warum Responsive Design? Vorteile

Die Frage, warum eine Website responsive sein muss, ist schnell beantwortet: Weil der User es erwartet! Und das ist keine Plattitüde à la „Der Kunde ist König“. Vielmehr geht es darum, was Google will. Und Google will immer genau das, was der User will. Das ist auch der Grund dafür, dass der Suchmaschinengigant die Optimierung für mobile Endgeräte bereits 2015 zum wichtigen Ranking-Faktor erklärte. Der Google Bot überprüft also anhand bestimmter Kriterien wie Schriftgröße oder dem Abstand zwischen Links, ob eine Website mobile friendly ist oder nicht. Ist sie es nicht, wird die Seite für mobil abgesetzte Suchanfragen schlechter gerankt.

Das ist übrigens auch der Grund für die sogenannte Mobile-First-Strategie, nach welcher die für mobile Endgeräte optimierte Website-Version zuerst erstellt wird und entsprechende Erweiterungen für die Darstellung am Desktop erst danach integriert werden. Wir wissen also: Google bevorzugt Websites mit responsivem Design. Doch was sind die weiteren Vorteile?

Warum responsive Websites gewinnen

  • praktikabel: Das Responsive Design macht die Entwicklung einer eigenen mobilen Website unnötig.
  • zeitsparend: Es muss immer nur eine einzige Website mit Content befüllt werden.
  • eindeutige URL: Eine mobile Website hat immer eine eigene URL, was bedeutet, dass es in diesem Falle zwei URLs für Ihre Website gibt. Das kann zu Verwirrung führen  – insbesondere dann, wenn die mobile-URL via Smartphone geteilt und am Desktop abgerufen wird. Außerdem bedeutet eine zweite URL, dass auch sämtliche SEO-Maßnahmen, um Ihre Website bekannt zu machen, sozusagen doppelt gefahren werden müssen. Und das kostet sowohl zusätzliche Zeit als auch Geld.
  • benutzerfreundlich: Das Responsive Design sorgt dafür, dass die Website-Inhalte auf jedem Endgerät optimal dargestellt werden. Dies trägt zu einer positiven User Experience bei und erhöht die Verweildauer auf der Webseite (ebenfalls ein wichtiger Google Ranking-Faktor).

Sind Österreichs Websites mobile friendly?

Die Websites der österreichischen KMUs sind in Sachen mobile Optimierung gar nicht so schlecht aufgestellt. Die Performance landscape study von Silktide1, in der 30.000 österreichische Websites getestet wurden, hat ergeben, dass immerhin 61% der untersuchten Webseiten für die Darstellung auf mobilen Endgeräten optimiert sind. Das bedeutet zwar, dass es bei vielen noch Nachholbedarf gibt, aber im Vergleich mit anderen Faktoren (wie zum Beispiel der Implementierung von SSL Zertifikaten) scheint die mobile Optimierung etwas zu sein, dessen Wichtigkeit Österreichs KMUs durchaus bewusst ist.

Wo also liegt das Problem? Ganz einfach: Nur, weil eine Seite mobile friendly ist, bedeutet das noch nicht, dass sie auch gut performt. Und in Sachen Performance schneiden die getesteten Websites leider nicht gut ab. Insbesondere die durchschnittliche Ladezeit am mobilen Endgerät ist mit neun Sekunden erschreckend langsam. Immerhin gaben 20% der Nutzer an, eine Website wieder zu verlassen, wenn sie nicht innerhalb von drei Sekunden lädt!1

Macht das Responsive Design die Website langsam?

Theoretisch ja. Das gilt insbesondere dann, wenn Webmaster versuchen, eine für Desktop optimierte Website nachträglich responsive zu machen (was in manchen Fällen nicht nur schwierig, sondern sogar unmöglich ist). Aber auch, wenn eine Website von Anfang an mit den technischen Voraussetzungen für anpassungsfähige Layouts aufgesetzt wird, kann es passieren, dass die Performance nicht passt. Was wir nämlich nicht vergessen dürfen: Das flexible Layout für verschiedene mobile Endgeräte ist für die Grafiker selbst eine Herausforderung!

Plötzlich haben sie es nicht mehr mit fixen Werten zu tun, sondern alles verschiebt sich, ändert seine Größe oder verschwindet sogar ganz – je nachdem, auf welchem Endgerät die Seite gerade betrachtet wird. Wenn Sie überprüfen möchten, wie schnell (oder wie langsam) Ihre Webseite auf den unterschiedlichen Endgeräten lädt, können Sie hier den Test machen.

Junge blonde Frau mit Brille, die sich über eine Website ärgert, die nicht im Responsive Design erstellt wurde und daher am Handy schlecht lesbar ist.
Geld für Responsive Design und Webdesigner ausgegeben und die Website ist trotzdem zu langsam? Kein Einzelfall! Adobe Stock, (c) igor_kell

Responsive Design erstellen – wie geht das?

Zuallererst einmal: nicht als DIY-Projekt! Denn selbst, wenn Sie sich mit flexiblen Bildern, Media Queries und CSS (= Cascading Style Sheets) auskennen, reicht das noch nicht für eine responsive Webseite, die schnell genug lädt. Hierfür sind häufig auch serverseitige Optimierungen notwendig. Eine große Herausforderung stellt zudem die Websitegröße dar, denn viele Homepages haben heute eine Größe von rund 2 MB oder sogar mehr. Und je größer eine Webseite ist, desto schwieriger ist es, sie responsive zu machen. Auch im Hinblick darauf, dass laufend neue mobile Devices erscheinen und entsprechende Layouts nachgearbeitet werden müssen, sollten Sie diese Aufgabe einem erfahrenen Webdesigner überlassen.

WordPress Responsive Design

Laut Silktide-Studie ist WordPress das mit 41% meistgenutzte Content Management System für KMU-Websites in Österreich.Kein Wunder also, dass die Suchen nach mobile friendly Lösungen für WordPress Hochkonjunktur haben. Grundsätzlich gibt es hier zwei Möglichkeiten: Sie können entweder direkt ein responsives WordPress Theme auswählen (hier gibt es sowohl kostenlose als auch kostenpflichtige Möglichkeiten), oder Sie können ein WordPress Responsive Design Plugin installieren. Das Problem besteht also nicht darin, Ihre WordPress-Seite responsive zu machen. Es besteht eher darin, dass WordPress als CMS für Unternehmenswebsites denkbar schlecht geeignet ist.

Das Problem mit WordPress Websites

WordPress ist ein sogenanntes Open Source CMS. Open Source Content Management Systeme werden nicht von einem einzigen Unternehmen (weiter)entwickelt, sondern von einer Programmierer-Gemeinschaft. Das ist an sich nichts Schlechtes, bedeutet jedoch, dass der Quellcode offen (das bedeutet: öffentlich bekannt) ist. Das macht WordPress-Websites zu einem beliebten Ziel für Hacker, da diese sich bestens mit dem Code auskennen und genau wissen, wo die Sicherheitslücken zu finden sind.

Das ist ein Problem, das auch durch eine SSL-Verschlüsselung nicht gelöst werden kann. Die Verschlüsselung sichert die Daten nämlich nur im Moment der Übertragung – was anschließend passiert, kann durch das Protokoll nicht mehr kontrolliert werden.Mehr zu dieser Problematik finden Sie im Blogartikel Kein SSL? Ziemlich mutig!

Geschäftsmann, der für seine Website zwar ein Responsive Design, aber leider auch ein Opfen Source CMS gewählt hat und nun Opfer eines Hackers geworden ist,
Open Source CMS gibt es natürlich auch mit Responsive Design. Das schützt aber nicht vor Sicherheitslücken. Adobe Stock, (c) Syda Productions

Responsive Design Kriterien

Wir haben bereits geklärt, dass responsive Webdesign das A und O in Sachen Usability und User Experience ist. Selbst die beste Website mit den coolsten Inhalten verliert unzählige User, wenn sie sich nicht auf Mobilgeräte anpassen kann. Oder haben Sie etwa Freude daran, beim Lesen andauernd von links nach rechts scrollen, Texte und Buttons vergrößern zu müssen oder gefühlt Stunden darauf zu warten, dass die Bilder laden? Nicht? Na also! Aber welche Kriterien muss ein responsives Design erfüllen, damit die Website auf allen Endgeräten optimal dargestellt wird und die Absprungraten sinken? Welche Veränderungen braucht es, um die Webseite von statisch auf dynamisch zu bringen?

1. Keine fixen Layout Grids

Bei für Desktop optimierten Websites haben die Layout-Grids fixe Größen und genau platzierte Bilder/Texte. Im Responsive Design ist nichts mehr fix. Damit die Seite sich den Gegebenheiten des jeweiligen Endgeräts anpassen kann, werden für alle Elemente prozentuale statt fixer Pixelwerte verwendet. An die Stelle fixer Layout-Grids tritt also das flexible Design. Und das bedeutet eine vollkommen neue Herangehensweise beim Aufbau von Websites:

  • Mobile First: Wenn eine Website frisch aufgesetzt wird, ist es das Beste, nach der Mobile-First-Strategie vorzugehen. Das bedeutet, Sie konzipieren die Seite zuerst für das kleinste Endgerät mit der schwächsten Leistung und fügen nach und nach Erweiterungen hinzu.
  • User First: Hand in Hand mit dem Responsive Design sollte die Frage gehen, welche Informationen der mobile (!) User wirklich braucht. Ellenlange Texte sind immer noch ellenlange Texte – auch wenn sie dank RWD (Responsive Web Design) gut zu lesen sind.
  • Content First: Die Inhalte der Website sollten immer an erster Stelle stehen (kurz, informativ und eindeutig). Das Design (Bilder, Grafiken oder unnötige Hintergrund-Elemente) dürfen niemals zulasten des Contents gehen.

2. Keine fixen Schriftgrößen

Auch in Sachen Schriftgrößen arbeiten Sie im Responsive Design mit prozentualen Werten. Das ist auch vollkommen logisch, denn Headlines und Fließtexte sehen am Desktop vollkommen anders aus als am Tablet oder Smartphone. Grundsätzlich gilt: Verpacken Sie sämtliche Infos so, dass sie auch auf kleinstem Raum gut zu lesen und gut zu verstehen sind. Ob Ihre Texte auch mobil gut lesbar sind, sollten Sie grundsätzlich direkt auf dem jeweiligen Gerät überprüfen.

3. Keine fixen Bildgrößen

Bilder sind im responsiven Webdesign ein zweischneidiges Schwert. Der User erwartet nämlich, dass sie sowohl schnell laden als auch hochauflösend sind – und das bei mobilem Internet, was eine weitere Herausforderung darstellt. Es gibt eine Reihe von Plugins (zum Beispiel Adaptive Images), die Grafik und/oder Bilder entsprechend der jeweiligen Bildschirmgröße laden. Eine andere Möglichkeit ist es, jedes Bild in verschiedenen Größen direkt am Server zu hinterlegen. Auf diese Weise wird automatisch die passende Größe für das jeweilige Endgerät angezeigt, ohne dass sich die Ladezeiten verlängern.

Grafik von verschieden gekleideten Armen und Händen, die mobile Endgeräte in unterschiedlichen Größen in die Höhe halten und das responsive Webdesign veranschaulichen.
EIN Layout für alle Endgeräte? Bloß nicht! RWD sorgt für die optimale Darstellung Ihrer Inhalte auf jedem Endgerät. Adobe Stock, (c) mast3r

Responsive Webdesign von HEROLD

Ihnen schwirrt vor Grids, Pixelwerten und Media Queries bereits der Kopf? Kein Wunder! Webdesign ist alles andere als einfach. Das ist auch der Grund dafür, dass es Agenturen gibt, die sich darauf spezialisiert haben. Wenn Sie sichergehen möchten, dass Ihre Website für sämtliche mobile Endgeräte optimiert ist, sollten Sie sich über das HEROLD-Website-Angebot informieren. HEROLD ist derzeit der größte Website-Anbieter im KMU-Segment2 und hat bislang 20.000 österreichische Websites realisiert. Unsere Websites sind selbstverständlich

  • responsive
  • DSGVO-konform
  • SSL-zertifiziert
  • schnell ladend

Pluspunkt: Unsere Websites werden über geschlossene, nicht öffentliche Content Management Systeme betrieben. Laufende Updates der Software selbst sowie der Firewall sorgen zusätzlich für die Sicherheit Ihrer Daten und ein kompetentes Team sorgt dafür, dass Ihre Website stets am aktuellen Stand der Technik bleibt. Über die Kosten informieren wir Sie gerne hier.


1) Silktide Performance landscape Study 2018

2) HEROLD (2018)

Weitere Artikel