Responsive Webdesign testen – Warum es wichtig ist clean zu arbeiten

Es ist wirklich praktisch, dass es bereits so viele vorgefertigte Responsive Webdesign-Vorlagen (Themes) gibt, mit denen man ganz einfach tolle Websites erstellen kann. Der „Hund“ liegt hier allerdings im Detail begraben. Sobald wir etwas individualisieren wollen – also von der  Norm, beziehungsweise dem Handlungsspielraum, welchen uns das Theme einräumt – abweichen, wird es oftmals nicht mehr ganz so einfach. Je nach Motivation und Einfallsreichtum beginnen Webdesigner durch „Herumtricksen“ die Websites auf Kundenwunsch zu verbiegen. Dies offenbart sich meistens im Nachhinein in Darstellungsfehlern diverser Endgeräte.

Problem bei Individualisierungen von Responsive Webdesigns

Die Anforderungen an eine moderne und professionelle Website beinhaltet natürlich die Voraussetzung der otimalen Darstellung auf allen handelsüblichen Endgeräten, sei es Desktop-, Tablet- oder Smartphone-Screens, sowie allen Browsern, jenen Programmen, welche die Websites auf den Bildschirmen darstellen.  Mittlerweile sind die vorhandenen Bildschirmformate extrem vielseitig und unterschiedlich. Dies bringt die Möglichkeiten der CSS (Cascading Style Sheets) hin und wieder durchaus an ihre Grenzen. Umso komplexer und anspruchsvoller das Design ausgerichtet ist, umso wichtiger ist ein sauberer Umgang damit. Einhergehend ist der Content im HTML-Code ebenso sauber zu behandeln damit alle Browser die Website richtig interpretieren / darstellen können.

Das große Problem bei Individualisierungen ist das Überprüfen / Testen der Anpassung und die Beantwortung der Frage: Wird meine Individualisierung auf allen Endgeräten / Browsern richtig dargestellt?

Erkenntnis durch das Testen von Responsive Webdesigns

Im Rahmen eines ausführlichen Tests wird einem so richtig bewusst, wie komplex und vielseitig die Welt der Darstellung von Websites geworden ist. Es gibt eine reichhaltige Auswahl aus Online-Testtools um relativ einfach Websites auf ihre Darstellung zu testen. Ein paar dieser Tools möchte ich hier vorstellen:

• Responsive Check Center – testet die Darstellung auf mobilen Endgeräten, selektierbar nach Marken / Modellen
• responsivechecker.net bietet eine sehr reichhaltige Auswahl Endgeräten, die getestet werden können
• Screenfly – sehr individueller Test aller möglichen und denkbaren Bildschirmformate
• Cross Browser Testing – testet die Darstellung in verschiedenen Browsern – unabhängig vom Endgerät

Beim Responsive Webdesign Testen kommt es nicht nur auf das jeweilige Endgerät an, sondern auch auf den Browser mit dem die Website am Endgerät dargestellt wird. Verschiedene Browser stellen hin und wieder Inhalte anders dar. Deshalb kommt es hin und wieder zu Darstellungsfehlern, insbesondere beim „unsauberen“ Arbeiten. Je sauberer eine Website erstellt ist, desto eher wird sie auf allen Edgeräten und Browsern funktionieren. Beim Cross Browser Testing kann man in der Pro-Version viele verschiedene Browser testen. Dieses Tool ist allerdings kostenpflichtig, wenn man es in vollem Umfang nutzen will. Dies ist vielleicht auch nicht erforderlich, solange man sich bewusst ist, welche Probleme durch Individualisierungen enstehen können.

Es geht mir hier in diesem Artikel nicht darum, Unsicherheit und Angst vor Darstellungsfehlern zu schüren, sondern vielmehr darum Bewusstsein zu schaffen, was wichtig ist um im Endeffekt alle Website-Besucher abzuholen, egal auf welchem Endgerät. Schnelle Ladezeit, richtige Darstellung und ein praktisches „Look & Feel“ sind nunmal wesentliche Grundaspekte für eine Conversion (Zielerreichung), eine positive Absprungrate und Verweildauer auf der Website. Ich denke, dass wir nun zur Erkenntnis gekommen sind, dass es absolut Sinn macht, sich an die Spielregeln von professionellem Webdesign zu halten. Damit dieser Artikel Sinn macht, will ich ein paar Tipps zu den wichtigsten Grundregeln im Erstellen von Responsive Websites geben.

Die Lösung – halte dich an die Grundregeln von Responsive Webdesign

Wenn wir uns an folgende zehn Grundregeln halten, haben wir zumindest schon die halbe Miete für eine professionelle Website, die auf allen Endgeräten gut dargestellt werden kann, bezahlt.

1. Mobile First – denken Sie schon gleich zu Beginn, am besten schon im Projektgespräch / der Evaluierung an die Möglichkeiten der mobilen Version. Welche Inhalte wollen wir unbedingt am Smartphone dargestellt  haben? Wie können diese Elemente dargestellt werden, damit sie überall funktionieren? Tipp: Bei vielen CMS-Systemen ist es möglich zu selektieren, ob Elemente überhaupt auf gewissen Endgeräten dargestellt werden sollen. Es ist besser, ein Element nur auf der Desktop-Version anzuzeigen (mobile ausgeblendet), bevor jenes Element die komplette Darstellung auf kleinen Screens negativ beeinflusst. Dies kann beispielsweise bei „Tables“ Tabellen passieren. Es gibt tolle Möglichkeiten zur optimalen Darstellung von Tabellen, jedoch ist hier auch wieder spezielles Wissen oder das richtige Tool / Plugin erforderlich.
2. Bilder und Grafiken so erstellen und integrieren, damit diese sich je nach Bildschirmformat ohne Qualitätsverlust und „Verzerren“ anpassen können. Dazu ist es wichtig, dass die hochgeladene Originalgrafik mindestens so groß ist, wie die größtmöglich erwünschte Darstellungsvariante auf der Website. Bei einem „Contentbild“ in einem Artikel verhält sich der Umgang damit anders als mit einem Hintergrundbild, welches sich über die gesamte Bildschirmbreite verteilt. Insofern sollten Hintergrundbilder stets in einem großen Format (zB. 2.000 x 800 Pixel) verwendet werden. Um die Ladezeit nicht zu beeinträchtigen empfiehlt es sich, dennoch sparsam mit der Auflösung (zB 72 dpi) umzugehen. Ich empfehle jedenfalls die Verwendung hochwertiger Bilder, damit kein rauschen zu erkennen ist.
3. Sparsamer Umgang mit „Margin“ und „Padding“ zahlt sich aus. Hier kann ein Teufelskreis entstehen, wenn man die Ränder und Abstände einzelner Elemente im Contentbereich ineinander hin und her verschiebt. Es ist besser seine Taktik grundlegend zu ändern, bevor man hier wilde (z.B. – 780px, etc..) Werte eingibt. Grundsätzlich sollte man „Margin“ (äußere Abstände eines Elementes) und „Padding“ (innere Abstände) möglichst gering verändern und das im Prinzip beim Feinschliff um die Positionen für das Auge schön zu setzen.
4. Keine Experimente mit Schriftarten und Stilen zeichnen eine professionelle Website aus. Eine gute Website hat es nicht notwendig durch extravagante Kunstformen auf sich aufmerksam zu machen. Insofern zahlt es sich nicht aus, womöglich schwer darstellbare Schriftarten zu verwenden, die mobil womöglich gar nicht richtig angezeigt werden können. Es macht absolut Sinn, gleich zu Beginn die Schriftart, Farbe und Größe für die verschiedenen semantischen Schrifttypen (H1, H2, H3, <p>, <strong>, <a>, …)  der Website zu definieren und genau so ohne Ausnahme zu verwenden.
5. Der Aufbau der Website ist ebenfalls gleich zu Beginn zu definieren. Arbeiten wir ein-, zwei- oder drei-spaltig? Macht es überhaupt Sinn drei-spaltig zu arbeiten, wenn wir nicht genügend sinnvollen Content haben? Wenn wir zwei-spaltig arbeiten: wie breit soll die Seitenleiste sein, beziehungsweise links oder rechts? Dies sind alles Fragen, die zu Beginn beantwortet gehören und sich wie ein roter Faden durch die komplette Website ziehen sollen.
6. Selbst die Zeilenlänge von Text kann eine Website erfolgreich oder unübersichtlich erscheinen lassen. Speziell wenn wir ein-spaltig arbeiten, besteht die Gefahr, dass Textpassagen über den gesamten Bildschirm verlaufen. Eine zu lange Textzeile macht es dem Leser schwierig in die nächste Zeile zu finden. Daher macht es zum Beispiel Sinn im Inhaltsbereich 2-spaltig zu arbeiten oder ein Bild neben den Text zu setzen, damit die Textzeile nicht so lange ist. Das Bild sollte im Idealfall die Aussage des Textes untermalen und sich in der mobilen Darstellungsversion direkt über oder unter dem Text eingliedern.
7. Weniger ist mehr gilt vorallem dann, wenn es darum geht, zwischen „Notwendigem“ und „nice to have“ zu unterscheiden. Daher empfiehlt es sich „nice to have“-Elemente mobil auszublenden, damit die Benutzerfreundlichkeit und Übersicht am Smartphone gefördert wird. Es zahlt sich aus die mobile Version schlank zu halten und nur Wesentliches darauf darzustellen.
8. Content = King gilt nach wie vor. Dementsprechend sollte für genug Content in Form von Text genug Platz vorhanden sein. Text ist sehr wichtig, nicht nur für SEO. Daher sollte Text auf mobilen Endgeräten nie ausgeblendet werden. Genau so sollte Text nie auf Bildern stehen, welcher womöglich dann so klein ist, dass mobil gar nichts mehr zu erkennen ist. Text verbraucht fast keine Ladezeit und ist nach wie vor unerlässlich für funktionierendes SEO.
9. Barrierefreiheit stellt immer wieder eine wichtige Rolle, speziell bei seh-behinderten Menschen (zB farbenblind). Daher ist auf das hohe Kontrastverhältnis zwischen Text und Hintergrund sehr wichtig. Ja, es macht Sinn schwarzen Text auf weißem Hintergrund zu schreiben und die Schriftgröße so zu wählen, dass der Text ohne „Verschiebungen“ auf allen Endgeräten gut zu lesen ist. Einige CMS-Systeme bieten an, mit relativ wenig Aufwand die Textgröße je Version anzupassen. Das Thema Barrierefreiheit ist natürlich viel weitreichender, der Text ist aber einer der wichtigsten Apsekte, die noch dazu ganz einfach umgesetzt werden kann.
10. Website-Besucher wollen geführt werden, bieten wir deshalb nützliche Wege durch die Website die einfach und logisch zu verfolgen sind. Damit leiten wir Menschen dorthin, wo wir sie im Prinzzip haben wollen.

Der Wunsch nach Vielseitigkeit und Individualisierung hat in den letzten Jahren unglaubliche Fortschritte mit sich gebracht, jedoch auch viele Gefahrenquellen für unwissende Personen geschaffen. Daher besteht meiner Meinung nach nach wie vor der Bedarf nach professionellen Webdesignern, deren Arbeiten sich weiterhin deutlich von „Hobbybastlern“ abheben, völlig gleich wie toll das System zu sein scheint.