Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Grid – Eine einfache Einführung in Responsive Webdesign

    Grid – Eine einfache Einführung in Responsive Webdesign
Grid Logo. (Grafik: Grid)

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

Responsive 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.

Display Fragmentierung
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.

Finde einen Job, den du liebst zum Thema Webdesign

1 Reaktionen
Peter
Peter

Mir fehlt der Link zum Tutorial - oder muss ich mir den anderen Artikel durchlesen?

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen