Search
Search Menu

Was ist Responsive Design?

What is responsive design?

Responsive Design beschreibt die Anpassungsfähigkeit von Webseitinhalten so dass sie auf verschiedenen Geräten wie Desktop-Computer, iPad oder Handy leicht gelesen werden können.

Die ersten Webseiten wurden mit festen Pixel-Breiten gebaut und und mussten nur für die Anzeige auf dem Bildschirm eines Desktop-Computers passen. Solche Webseiten sind oft auf kleineren Bildschirmen wie auf einem iPhone schlechter lesbar, da der Text zu klein angezeigt wird und man auch nach links und rechts Scrollen müsste.

Weil die Anzahl Nutzer, die auf mobilen Geräten surfen, stetig steigt, wurden bald Designanpassungen und technische Lösungen entwickelt, um die Inhalte auf den am häufigsten verbreiteten Bildschirmgrössen einigermassen gut darzustellen, mit sogenannten media queries. Je nach Bildschirmauflösung und Format wird dann anhand von CSS3 (Cascading Style Sheets) das entsprechende Layout angezeigt, daher auch der Begriff ‘Adaptives Design’.

Wie die gleichen Inhalte auf verschiedenen Geräten angezeigt werden.

Sie sehen am Beispiel dieser Webseite (ja meine!) wie sich das Design (eben responsive, was hier soviel heisst wie anpassungsfähig) verhält. Versuchen Sie die Grösse Ihres Browsers (falls auf Desktop Computer) durch Ziehen an der rechten unteren Ecke zu verändern und beobachten Sie, was mit dem Inhalt passiert.

Da heute bereits über eine Milliarde Menschen ein Smartphone besitzen und zukünftige Technologien das Surfen im Internet auf mobilen Geräten erleichtern wird, können Sie sicher sein, dass viele Unternehmen es so einfach wie möglich machen möchten, dass die Nutzer alle relevanten Informationen online finden.

Fluid-Design geht noch einen Schritt weiter mit der Designanpassung. Anstatt sich nur an die bestehenden Gerätformate zu orientieren, zielt sie darauf ab, den Inhalt immer perfekt auf allen der jetzt auf dem Markt erhältlichen Bildschirmdimensionen anzuzeigen. Webseiten mit Fluid Design sind in prozentuellen Einheiten aufgebaut, die Spalten sind also relativ zueinander und der Browser erlaubt eine annähernd stufenlose Skalierung.

Weitere eindrückliche Beispiele für eine ansprechende Webseiten mit Responsive Design finden Sie bei unitedpixelworkers, und bei foodsense.

Inhaltkomponenten wie das Logo, die Navigation, Bilder und Texte, können für die Layoutoptimierung skaliert, übereinander gestapelt werden oder weggelassen werden.

Ist Ihre Webseite ‘responsive’?
Wie sieht sie aus wie auf einem iPhone, Samsung Galaxy oder Kindle?
Testen Sie die Darstellung auf www.responsinator.com.

 

Leave a Comment

Required fields are marked *.