Websites Responsive machen? - ja klar, machen wir!

Zunächst brauchen wir natürlich die URL der Website. Idealerweise per Mail, in dem vielleicht auch schon ein paar Anmerkungen stehen: Was wichtig ist, worauf wir achten sollen. Dann schauen wir uns das mal an.

Umbau oder gleich ein neues Design?

Zuerst einmal muss das Template selbst responsive gemacht werden, und da vor allem das Menü.

Bei manchen Designs ist ein Umbau schwierig. Wenn dann auch das Design insgesamt schon etwas älter ist, wird es besser sein, wenn man ein passendes, modernes Template als Basis nimmt und entsprechend anpasst.

Wir nehmen dann alles, was am alten Design gut ist und bauen es in das neue Template ein: Logos, Styles, Farben…. Das ganze ist dann also insgesamt ein Redesign. Die Website sieht dann auch am PC anders aus.

Die andere Möglichkeit ist, das vorhandene Template zu ändern. Bei dieser Methode ändert sich die Website am PC nicht oder kaum, der Unterschied ist nur am Tablet/Handy sichtbar.
Auch das geschieht natürlich mit einer Kopie, also einem "neuen" Template.

Das ist die bessere Wahl, wenn das Design gut ist und wenn es nicht unbedingt "Mobile First" sein soll; wenn also der größere Teil der Besucher einen PC verwendet.

Häufig gibt es auch Elemente, etwa aufwändige Slider, die sich nicht so ohne weiteres aufs Handy bringen lassen, oder wenn die Site so umfangreich ist, dass das Menü am Handy so oder so nicht optimal benutzbar ist.

Schritt 2: Ran an die Innereien

Wenn das Template responsive gemacht ist, ist es der Inhalt noch lange nicht, das sieht man aber natürlich erst jetzt: Wo klemmt es? Was ist jetzt zu machen?

Zunächst versuchen wir, der Sache generell mit CSS zu Leibe zu rücken, aber es wird da & dort schon nötig sein, Klassen in den Inhalt einzufügen.

Wichtig zu wissen in dieser Phase: Normale Besucher sehen nur die alte, bisherige Version. Angemeldete Besucher sehen die neue Version. Das wird im Inhalt aber nicht unterschieden, man muss daher so vorgehen, dass beide Versionen funktionieren.

Schritt 3: Umschalten und durch

Irgendwann kommt der Punkt, wo man wirklich größere Änderungen am Inhalt machen muss: Eine Responsive Website erlaubt keine festen Breiten, keine Code-Schlampigkeiten.

Jedes <span style="font-size:30px"> muss zur sauberen <h1> werden, Tabellen müssen bereinigt werden.

Ab hier schlagen alle Änderungen auch sichtbar für alle Besucher durch und es ist mühsam, noch mit 2 getrennten Templates zu arbeiten, zumal es hier ja optisch nur mehr um Feinheiten geht. Also: Online schalten, für alle sichtbar.

Hier stellt sich dann die Frage: Wie weit soll man es treiben? Soll es perfekt sein, oder „nur“ funktionieren?

Perfektion ist aufwändig und teuer; oft zu teuer, wenn ein Durchschnittsbesucher den Unterschied gar nicht mehr sieht. Das muss man abwägen – womit wir bei den Kosten wären.

Kosten für die Umstellung

Es ist nicht möglich, den Zeitaufwand für das Erreichen eines bestimmten Zieles zu nennen. Meistens ist es schon gar nicht möglich, das Ziel zu definieren; Es wird immer etwas geben, wo man einfach ansteht und die Verbesserung unverhältnismäßig aufwändig wird. Das kann man vorher nicht sehen, da hilft nur: sehen und probieren.

Relativ gut abschätzen lässt sich die grundsätzliche Umstellung des Templates. Da liegen wir meist bei € 300,- bis 500,- (netto).

Ab dann hängt es sehr davon ab, wie homogen der Inhalt ist. Lassen sich die verwendeten Module gut anpassen? Wie wurde der WYSIWYG Inhalt erstellt?: Mit Massen von Tabellen in Fix-Breite oder sauber mit Absatzformaten? Wie weit komme ich mit globalen CSS Regeln – oder habe ich überall Ausnahmen?

Hier sagen wir meist: Nenne mir ein Budget und wir fangen mit den wichtigsten Sachen an, mit dem, wo man am effektivsten am meisten erreicht.

Nicht zuletzt können Sie auch selbst vieles machen – das müssen Sie natürlich auch nicht zahlen.

Hier ist laufende Kommunikation wichtig: Was passiert, was habe ich vor, wo stehen wir, wie weit gehen wir, was ist wichtig.

Wenn man sich einig ist, brauchen wir Admin- und FTP-Zugang. Wir machen das dann so, dass ein angemeldeter Besucher das neue Design sieht, ein „normaler“ Besucher noch das alte. So kann man immer gut vergleichen.

Anhang: Welche Schwierigkeiten sich konkret ergeben

Ein Klassiker sind zb Tabellen: Es gibt Layout-Tabellen, etwa um jeweils Text und Foto nebeneinander zu stellen, und natürlich "echte Tabellen".

Überhaupt wenn Bilder im Spiel sind, wird’s haarig: Ein PC-Monitor ist breit, ein Handy schmal, das klemmt einfach.

Es gibt zwar Tricks und Methoden, um das halbwegs auf die Reihe zu kriegen, aber man muss für fast jede Tabelle eine Extra-Lösung machen. Bei vielen Seiten und vielen Tabellen kann das sehr mühsam werden. Meistens lassen wir solche Tablellen am Handy einfach „rausstehen“. Nicht edel, aber sinnvoll.

„Kunstvolle“ ;-) Anordnungen von Text und Bild: zB. ein 800 Pixel breiter Textblock mit einem Bild, das gerade so breit ist, dass die eMail-Adresse daneben nicht angeschnitten wird. Wie soll das auf einen 320 Pixel breiten Handy-Bildschirm passen? Gar nicht. Einfach ausblenden wird das beste sein.

Einrückungen mit Leerzeichen, harte Zeilenwechsel, falsche Trennungen.

Im Internet gibt es keinen Tabulator, keinen Adobe-Absatzsetzer und keine automatische Trennung. Wer Blocksatz und genaue Einrückungen will, ist nicht sonderlich originell, sondern liebt das Abenteuer. Am PC schaut das noch gut aus, aber am Handy ist die Einrückung „irgendwie“, der Trennstrich mitten in der Zeile und der harte Umbruch ein Unding.

So etwas geht nicht automatisch, sondern nur von Hand, jedes einzeln. Sowas korrigieren wir auf den wichtigsten Seiten, ansonsten lassen wir es, wie es ist.