t3n News Entwicklung

Grid – Eine einfache Einführung in Responsive Webdesign

Grid – Eine einfache Einführung in Responsive Webdesign

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

Grid – Eine einfache Einführung in Responsive Webdesign
Grid Logo

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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Peter am 27.05.2014 (10:50 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?