Responsive Styles: Die optimale Darstellung der Inhalte passend zum Layout auf jedem Endgerät

Die Darstellung von Inhalten wird über CSS Darstellungsregeln festgelegt. Im Webdesign können die Darstellungsregeln über Mediaqueries für bestimmte Bildschirmbreiten unterschiedlich definiert werden. Deshalb sprechen wir von Responsive Styles bei der Ausarbeitung eines optimalen Responsive Webdesign. 

Ein klassisches Beispiel für eine wechselnde Darstellung ist das horizontale Navigationsmenü oben auf der Website. 

Auf kleineren Bildschirmen reicht der Platz nicht aus, um das Navigationsmenü abzubilden und wird deshalb durch den  Hamburger-Button ersetzt. 

Die Darstellungsregeln für alle Inhalte einer Webseite können mit Responsive Styles passend für die gewünschte Darstellung und ihren Zweck angepasst und verbessert werden. 


Im den folgenden Beispielen verwenden wir Lorem Ipsum Text. Die Textblöcke haben die selbe Schriftart. Wir verändern nur einige Darstellungsregeln der Schrift und Abstände.


Im zweiten Beispiel wurden die Abstände vergrößtert und es wurde ein 1px breiter Rahmen hinzugefügt. Zusätzlich wurde die Schriftgröße verkleinert auf 14px statt 18px verkleinert.


Im dritten Beispiel hat jeder der 3 Textblöcke eine eigene Schriftstärke.

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Mit diesem Beispiel möchten wir Ihnen zeigen, dass die Darstellung der Inhalte auf Ihrer Website über CSS Darstellungsregeln einfach und schnell modifiziert werden kann, um Akzente zu setzen und wichtige Inhalte für den Websitebesucher zu priorisieren oder besser lesbar zu machen.


Bei der Erstellung einer Website testen wir die Darstellung der Inhalte deshalb auf allen Endgeräten. Denn was auf einem großen Bildschirm gilt, kann auf kleinen Bildschirmen durch die Veränderung des Layouts zu Fehldarstellungen führen.n


Im nächsten Beispiel sehen Sie wieder unsere 3 Textblöcke, die auf großen Bildschirmen durch horizontale Linien getrennt sind.

Tatsächlich haben wir dazu nur dem mittleren Textblock einen Rahmen links und rechts hinzugefügt.

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Auf kleinen Endgeräten werden die Textblöcke untereinander dargestellt. Der daraus resultierende Darstellungsfehler fällt Ihnen sicherlich sofort auf.

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Die vertikalen Trennlinien sind nutzlos geworden. Damit die Darstellung wieder passt, werden aus dem Rahmen links und rechts am 2. Textblock entsprechende Rahmenlinien oben und unten.

1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Ist es Ihnen aufgefallen? Wir haben den erklärenden Text auf dieser Seite in einer etwas stärkeren Schrift geschrieben und die Breite der Erklärungstexte verringert. Außerdem haben wir große Abstände zwischen den Erklärungstexten und den Beispielen eingefügt. 

Falls es Ihnen nicht aufgefallen ist, Sie aber auch nicht dauernd versucht haben die Lorem Ipsum Texte zu lesen und diese als Beispiele erkannt haben, dann haben wir das erreicht, was wir beabsichtigt haben.



Wir hoffen, dass wir Ihnen mit diesen Beispielen erklären konnten, dass Responsive Styles ein wichtiges Werkzeug sind, um Inhalte auf der Website ansprechend und benutzerfreundlich für alle Bildschirmgrößen zu gestalten.  


Gerne beraten wir Sie telefonisch oder persönlich zum Thema Responsive Styles und der Behebung von Darstellungsfehlern in CSS Dateien.

Links zu weiteren Responsive Webdesign Kategorien

Responsive Schrift

Responsive Layout

Responsive Bilder

Ihre Agentur für Responsive Webdesign, SEO und Webprogrammierung aus Gütersloh

Erneuerung von Websites innerhalb weniger Tage

SEO für gute Platzierung in Suchmaschinen