Responsives Webdesign

Bleiben Sie "responsive"

Warum auch ein ausgeklügeltes responsives Webdesign in meinem Content Management System keine Chance hat, wenn der Anwender beim Benutzen der Eingabemodule (Textmodul, Referenzmodul) nicht darauf achtet, responsive zu bleiben.
Dazu gibt es hier Hilfestellungen und Erklärungen, wie man das CMS in der richtigen Weise befüllt, um auch SmartPhone- und Tabletbenutzern ein angenehmes und übersichtliches Layout zur Verfügung zu stellen.

Wie ich mich an das responsive Layout halte

In dieser Hilfestellung geht es nicht nur rein um mein eigenes Content Management System. In jeder anderen Webseite, ob nun mit Wordpress, Joomla,Drupal,TYPO3, Contao oder komplett selbst programmiert; Bei der Erstellung der einzelnen Web- oder Unterseiten muss sich zwingend das responsive Layout gehalten werden, damit sich die Internetseite an die Eigenschaften des jeweils benutzten Endgeräts anpassen kann.

Ich mache das normalerweise immer so: Ich lege mir beim Erstellen oder Ändern von Web- oder Unterseiten im CMS immer ein Smatphone und/oder Tablet an die Seite (je nachdem, was ich gerade zur Hand habe), um sofort, nach Speicherung meiner Eingaben, das Ergebnis auf den Engeräten zu begutachten.

Denn es hat sich bei mir herausgestellt, dass es einen Unterschied macht, ob ich nur den Internetbrowser "klein ziehe" (minimiere) oder mir die Webseite auf dem SmartPhone oder Tablet anschaue.

Jetzt ein paar Tipps speziell bei der Benutzung meines Content Management Systems.

Responsives Textmodul

Die größten Design-Fauxpas in meinem CMS verursachen die Anwender bei der Benutzung des Textmoduls. Entweder sie simulieren die Spalten mit Leertasten oder sie benutzen Tabellen mit festen Breiten. Meist passiert dies, wenn sie kleine Design-Elemente einfügen wollen. Ein Bild neben dem Text oder 3 Bilder nebeneinander. Dafür habe ich eigens für das Textmodul Vorlagen erstellt.

Es sollten immer die Vorlagen benutzt werden, um Text und Bilder zusammen in einen Absatz zu bringen.

Ein Beispiele für non-responives Layout

Wie man es nicht, gar nicht, niemals machen sollte:

Benutzen von Leertasten, um Spalten zu simulieren.

Die Bahamas Warnemünde Grand Turk

Eine Insel im Atlantic die zum Das Ostseebad Warnemünde, Eine Insel des britischen Commonwealth der Bahamas ein Stadtteil der Hansestadt Rostock Überseegebietes gehört

Das sieht jetzt eigentlich gar nicht mal so schlecht aus. Wenn Sie nicht grad an einem SmartPhone, Tablet oder Laptop/PC mit einer Auflösung unter 1920x1080 Pixeln sitzen. Ansonsten sehen sie sofort, dass das alles ein wenig durcheinander ist.

Ziehen Sie jetzt mal Ihren Internetbrowser kleiner, auf ein viertel Ihrer Bildschirmbreite. Dann sehen Sie, was passiert.

Es sollte dann so aussehen:

Die Bahamas Warnemünde Grand Turk

Eine Insel im Atlantic die zum Das Ostseebad Warnemünde, Eine Insel des britischen Commonwealth der Bahamas ein Stadtteil der Hansestadt Rostock Überseegebietes gehört

Hier sieht man, was passiert. Es wird alles total unübersichtlich. Das Fatale ist, selbst auf Laptops, Tablets oder PCs mit kleinern Monitoren würde das Layout "brechen".

Damit haben Sie mit Ihrer 1920x1080 Auflösung am Monitor das Gefühl, alles auf Ihrer Webseite würde gut aussehen. Das ist aber nicht so.

Vielleicht würden Ihre Webseitenbesucher kleinere Design-Fehler gar nicht bemerken aber dieses Durcheinander bemerkt jeder noch so unerfahrene Internetnutzer.

Lösung

Dieses "brechen" des Layouts verhindern Sie ganz einfach, indem Sie die Vorlagen im Textmodul verwenden. Das ist am Anfang etwas "fummelig" und man sollte immer den "Zurück-Button" Textmodul Rückgängig Knopf verwenden, wenn etwas unerwartetes mit dem Design passiert.

Wenn der "Zurück-Button" mal nicht funktioniert, nicht speichern. Einfach auf den "Seite Bearbeiten-Knopf" drücken und die Meldung bestätigen, dass Sie die Seite ungespeichert verlassen wollen.

Dann nochmal von vorn.

Wenn man das Ganze nun mit einer Tabelle umsetzt, die auch noch schlauerweise prozentuale Breiten hat, kommt man den Mobilen nutzern schon etwas entgegen. Nur sollte man bedenken, dass 3 Spalten bei 1000 Pixeln Breite genug Platz haben für den Inhalt. Bei 320 Pixeln sieht das schon anders aus. Denn, Tabellen fügen sich nicht ab einer gewissen Breite untereinander an. Dies könnte auch wieder schwierigkeiten beim Lesen des Inhalts mit sich bringen.

Die Lösung

Jetzt ein Beispiel, wie man es machen könnte/sollte:

Benutzen von Vorlagen mittels des Vorlagenknopfes.

Die Bahamas

Eine Insel im Atlantic die zum Commonwealth der Bahamas gehört

Warnermünde

Das Ostseebad Warnemünde, ein Stadtteil der Hansestadt Rostock

Grand Turk

Eine Insel des britischen Überseegebietes

Wenn Sie hier jetzt den Internetbrowser minimieren und auf ein viertel Ihrer Bildschirmbreite bringen, werden Sie sehen, dass sich das Layout an die Bildschirm- oder Viewportbreite anpasst.

Für die etwas versierteren unter Ihnen: Die Vorlagen wurden mit einem sogenannten "Grid-Layout" erstellt. Dies benutzt das vorgefertigte Layout von bootstrap, einem Mobile-First Frond-End-Framework, dass man schnell und unkompliziert in der Webentwicklung einsetzten kann. Infos unter bootstrap. Speziell für das Grid-Layout können Sie hier nachschauen: Grid-System (http://getbootstrap.com/css/#grid)

Abschließend gibt es zu sagen

Das alles hier in dem Artikel gilt für jedes Modul des Content Management Systems, in dem ein WYSIWYG (What You See Is What You Get) - Editor eingebaut ist. Das Textmodul besteht rein nur aus dem WYSIWYG-Editor und das Referenzmodul hat noch so einen. Auch dort immer Vorlagen benutzen. Bei 2 oder weniger Spalten tun es auch Tabellen. Aber wenn dann mit prozentualen Breiten.