3 Tutorials: Responsive Design für Anfänger
Kommentare

Responsive Design ist in aller Munde. Mit steigenden Absatzzahlen von Smartphones und Tablets steigen die Ansprüche der Endkunden. Durch die adaptive Anpassung der Bildschirmdarstellung werden die Elemente auf der Website lediglich anders angeordnet. Zum Beispiel wird aus einem dreispaltigen Layout auf dem Desktop auf dem Smartphone nur noch eine Spalte.

Korrekt umgesetztes Responsive Design macht Apps von Desktop-Seiten damit überflüssig. Die Vorteile liegen klar auf der Hand: Zum einen passt sich die Seite an die Größe des Displays des mobilen Endgeräts, den sogenannten Viewport, an. Design, Look und Charakter der Seite bleiben weitestgehend erhalten. So muss sich der Besucher, der die Desktop-Variante kennt, auf der geschrumpften Variante nicht erst komplett neu orientieren.

Möglich machen das unter anderem sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften, wie zum Beispiel die Größe des Gerätes oder dessen Bildschirmauflösung, erlaubt.

Heute haben wir Euch drei Surftipps herausgesucht, die Euch bei der Arbeit mit Responisve Design behilflich sein dürften:

 

Teamtreehouse.com

Fangen wir mit einem Tutorial an, das sich vor allem für blutige Anfänger eignet. Hier erklärt Nick Pettit im Blog blog.teamtreehouse.com Grundbegriffe wie Fluid Grids und die Entwicklungsgeschichte von Responsive Design. Auch die weiterführenden Links am Ende der Seite sind eine hilfreiche Quelle für weiterführende Infos.

treehouse

Quelle:  blog.teamtreehouse.com

Responsive Website Design Tutorial: Using Media Queries

Auch bei YouTube finden sich Tutorials zum Thema Responsive Design. Dieses hier dauert fast zehn Minuten und zeigt Schritt für Schritt, wie man Media Queries in die Designs integriert.

Webdesignerwall.com

Unser dritter Surftipp kommt von webdesignerwall.com und erklärt wie man Responsive Design in drei Schritten umsetzen kann. Allerdings richtet sich auch dieses Tutorial eher an Newbies.

webdesignerwall

Quelle:  webdesignerwall.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -