Das Pagespeed Content Management System für Responsive Webdesign

Echtes Responsive Webdesign einfach besser mit dem BLUECREATOR Responsive Webdesign CMS umsetzen

Damit die Inhalte einer Webseite auf verschiedenen Endgeräten richtig und sinnvoll dargestellt werden können, bietet das BLUECREATOR CMS die Möglichkeit Layout, Darstellung und Bilder individuell für verschiedene Bildschirmgrößen einzustellen. Wir nennen diesen Funktionsumfang echtes Responsive Webdesign, weil die meisten Websites, Templates und Content Management Systeme diese Möglichkeiten im HTML und im CSS nicht vollständig nutzen. BLUECREATOR ist ein Responsive Webdesign CMS, weil es für ausschließlich dafür entwickelt wurde.

 

Auf dieser Seite stellen wir die unterschiedlichen Möglichkeiten zur Steigerung der Benutzerfreundlichkeit und Optimierung der Darstellung mit dem BLUE CREATOR CMS kurz vor.

Die Grundlagen des Responsive Webdesign teilen sich in 3 Bereiche auf: 


1. Responsive Layout

2. Responsive Styles

3. Responsive Images


In Kürze werden wir hier Videos bereitstellen. Falls Sie sehen möchten, wie man mit dem BLUE CREATOR CMS einfach Responsive Webdesign umsetzen kann, rufen Sie uns doch einfach an.

Wir können Ihnen dann mit Google Hangouts, Skype oder Teamviewer zeigen, wie man aktuell mit unserem CMS arbeitet. Gerne erstellen wir Ihnen auch eine kostenlose Vorschau-Website, wenn Sie aktuell planen einen Relaunch Ihrer Website zu machen.

Responsive Layout - die Darstellungsbreite von Containern und Inhalten

Der Inhalt der folgenden 3 Textmodule, die unterschiedliche Hintergrundfarben haben, verfügen über besondere Layout Einstellungen. Verändern Sie die Breite Ihres Browserfenster, um den Unterschied zu sehen.

Die meisten Websites mit Responsive Webdesign basieren auf vordefinierten Templates mit einem mehrspaltigen Layout, welches auf ein einspaltiges Layout wechselt, sobald nicht mehr genügend Platz in der Breite zur Verfügung steht. Auch das BLUE CREATOR CMS nutzte bis Mitte 2016 nur einen Standard-Breakpoint. Doch um Inhalte auf jedem Endgerät besser darzustellen benötigt man mehr Flexibilität bei der Gestaltung des Layouts. Das BLUE CREATOR CMS bietet nun 4 Breakpoints zur Steuerung des Responsive Layouts.

 

Ein Standard-Breakpoint bestimmt ab welchem Breakpoint die Inhalte z.B. von 1/3 Breite auf ganze Breite umbrechen.

Im Juni programmierten wir das BLUE CREATOR CMS einfach so um, dass man Content- und Layoutkomponenten einen individuellen Standard-Breakpoint zuordnen konnte. Leider war diese Lösung nicht anwenderfreundlich und führte zu viel Verwirrung.

Ein gutes Responsive Layout ließ sich bis dahin noch nicht umsetzen.

Erst nachdem die Probleme analysiert und identifiziert waren, entschieden wir uns für eine neue flexibele und anwederfreunliche Lösung. Ehrlich gesagt war die Idee genial, weil sie die Verwaltung des Responsive Layouts einfach besser macht.

Jede Komponente verfügt jetzt über ein Konfigurationsmenü, mit dem man für jeden Viewportbereich einstellen kann, wie Breit die Komponente dargestellt werden soll.


Mit den Responsive Settings des BLUE CREATOR CMS lässt sich deshalb exakt steuern, welche Breite ein Container oder ein Inhaltsmodul in einem bestimmten Viewport-Breich hat.

Fachliche Erklärung der oben zu sehenden Textmodule: Die 3 Textmodule bedinden sich in einem Container mit voller Breite ( 100% ). Der Container ist als Flex, flex-wrap eingestellt. Begrenzt wird dieser Container nach außen durch den umgebenden Standard-Container mit einer maximalen Breit von 1170,1400 oder 1600px für den Content.


Responsive Styles - die Gestaltung von Inhalten für verschiedene Viewports

Die Darstellung von Inhalten lässt sich beim BLUE CREATOR CMS einfach über den Style-Editor bearbeiten. Der Style-Editor bietet alle relevanten Optionen in einem leicht bedienbaren Konfigurationsmenü an. 


Im Style-Editor können bei Bedarf für jeden Viewport individuelle Einstellungen definiert werden. So kann man z.B. die Darstellung der Schrift, Abstände und Rahmen anpassen. Zum Beispiel werden 3 verschiedene Textblöcke nebeneinander dargestellt. Zur Abtrennung der Texte zu den benachbarten Texten haben Text 1 und Text 2 jeweils eine Rahmenlinie auf der rechten Seite. Auf Smartphones (XS) und Tablets (SM) werden die Texte untereinander dargestellt. Die Rahmenlinien auf der rechten Seite sind also nutzlos. Statt rechts sollte die Trennlinie nun unter den Texten 1 und 2 erscheinen. Dazu ändert man die Style Einstellungen für SM und legt so fest, dass bis zu einer Bildschirmbreite von  768px die Textmodule eine Rahmenlinie am unteren Rand haben sollen.


Wenn Sie diese Website gerade mit einem großen Bildschirm ansehen, können Sie den Unterschied sehen, wenn Sie das Browserfester schmaler machen.

Text 1 befindet sich in einem Container. Der Container hat eine türkise Rahmenlinie rechts, die auf Bildschirmen mit einer Breite ab 768px zu sehen ist. Unter 768px Breite ist eine Rahmenlinie unten zu sehen.

Text 2 befindet sich auch in einem Container. Dieser hat ebenfalls eine violette Rahmenlinie rechts, die auf Bildschirmen mit einer Breite ab 768px zu sehen ist. Unter 768px Breite ist eine Rahmenlinie unten zu sehen.

Text 3 ist befindet sich ebenfalls in einem Container. Dieser hat jedoch keine Rahmenlinien weil die Trennung bereits durch den Text darüber erfolgt.

Responsive Images - verschiedene Bilddateien für unterschiedliche Bildschirmgrößen 

Für unterschiedliche Bildschirmgrößen sollte man auch unterschiedlich große Bilder nutzen, um einseits die Datenmenge so gering wie möglich zu halten und auf der anderen Seite die Darstellung zu optimieren.


Webbrowser können Bilddateien kleiner Darstellen als sie tatsächlich sind. Allerdings ist es schon quasi alltäglich geworden, dass auf Webseiten Bilder mit 1920px Breite für Smartphones ausliefern, die nur 480px breite Displays haben. Folglich wird eine Datei geladen, die 4 mal größer ist als notwendig.

Das BLUE CREATOR CMS liefert seit März 2017 vollautomatisch Bilder in optimierter Größe aus.


Außerdem kann man über den Style-Editor für jeden Viewport eine andere Bilddatei wählen. So kann man steuern, dass das Bildmotiv auch tatsächlich zur Geltung kommt. 


Das Titelbild dieser Seite ist voll responsive und nutzt verschiedene Bilddateien bei verschiedenen Bildschirmbreiten. Auch das folgende Bild ändert sich je nach verfügbarer Bildschirmgröße.



Jetzt kostenlos und unverbindlich testen.  

Fordern Sie eine kostenlose Vorschau-Website an. 

BLUE CREATOR GmbH

Erwitter Str. 105

59557 Lippstadt

Besuchen Sie auch unsere Agentur-Webseite