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.