Entwicklung & Design

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
Peter
Peter

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

Antworten
Abbrechen

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