Grid – eine einfache Einführung in Responsive Webdesign

25. Mai 2014 | Von | Kategorie: Non Print, Responsive Webdesign, Webdesign

Grid – eine einfache Einführung in Responsive Webdesign

Autor: Ilja ZaglovDatum: 24.05.2014, 13:42 Uhr

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem.

Grid – eine einfache Einführung in Responsive WebdesignGrid LogoResponsive Webdesign ist keine Zauberei: Dennoch ist die richtige Herangehensweise an die Herausforderungen einer responsiven Website eine Kunst für sich. Jeden Tag werden neue Techniken und Workflows für die Erstellung von Responsive-Webdesign-Projekten entwickelt und eingesetzt. Adam Kaplan bringt auf seiner Website ein wenig Ordnung in das Methoden-Chaos und erklärt grundlegende Sachverhalte im responsive Webdesign. Das Ergebnis ist nicht nur eine schicke, interaktive und responsive „Infografik“ sondern auch ein individuelles, responsives Grid für dein Projekt.

Die hohe Anzahl verschiedener Display-Größen und Auflösungen macht Responsive Webdesign zu einem Unverzichtbaren Werkzeug. Grafik: Grid

In seinem Mini-Tutorial erklärt Kaplan, für die, die es immer noch nicht mitbekommen haben, was es mit Begriffen wie Responsive Webdesign und Mobile First auf sich hat und gibt Einblick in die Arbeit mit Media Queries, Viewports und Normalizern und erklärt das Box-Model und wie man es am besten einsetzen kann. Im Anschluss lässt er die Kurzeinführung in die Entwicklung eines eigenen responsiven Grid-Systems münden.

Das Ergebnis ist eine neun Kilobyte große CSS-Datei, die eine grundlegende Vorlage für die Erstellung eines individuellen Mobile-First-Grid liefert, die du mit dem Wissen aus der Infografik ergänzen kannst.

Auf der Website von Grid erfährst du mehr. Im GitHub Repository von Grid kannst du den vollständigen Code des Projekts herunterladen.

via Grid – eine einfache Einführung in Responsive Webdesign » t3n.

Keine Kommentare möglich.