mcroll WEB
  • CMS
  • Core
  • Web Referenzen
  • Pfeil nach untenWissen
    • CMS Anleitungen
    • SEO
  • mcroll
mcroll WEB

  • CMS
  • Core
  • Web Referenzen
  • Pfeil nach untenWissen
    • CMS Anleitungen
    • SEO
  • mcroll
Mobilen Menü Icon
  • CMS
  • Core
  • Web Referenzen
  • Wissen Pfeil nach rechts
    • Wissen
    • CMS Anleitungen
    • SEO
  • mcroll
  • Kundensystem
  • Impressum
  • Datenschutz
  • Sitemap
mcroll WEB




< zurück

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

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

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" Seite bearbeiten Icon 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. Textmodul Vorlagen Knopf

 

Die Bahamas

Bild Nr. 1
 
 
 

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

 

Warnermünde

Bild Nr. 2
 
 
 

Das Ostseebad Warnemünde, ein Stadtteil der Hansestadt Rostock

 

Grand Turk

Bild Nr. 3
 
 
 

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.




mcroll WEB Programmierung © 2005-2021

  • Kundensystem
  • Impressum
  • Datenschutz
  • Sitemap

Webprogrammierer

Tristan Radike

E-Mail



mcroll WEB Programmierung © 2005-2021

Nach oben scrollen Pfeil
Nach oben scrollen Pfeil
Nach oben scrollen Pfeil