Responsive Design mit CSS: Flexbox oder Grid?

Wie eine Webdesign Agentur eine oder mehrere Websites gestaltelt, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Masonry-Layouts

Masonry-Layouts (Masonry steht für Mauerwerk) haben durch Pinterest, Tumblr und Unsplash große Beliebtheit erlangt. Dank eines Updates für CSS Grid, welches in 2021 ausgerollt wird, werden solche Layouts in naher Zukunft ziemlich einfach werden.

Hier ist ein vollständiges Masonry-Layout mit nur 6 Zeilen CSS:

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-template-rows: masonry;
  grid-gap: 1rem;
}

Die Magie liegt in grid-template-rows:masonry, welches das typische Masonry-Layout erstellt. Mit der Funktion minmax () können wir definieren, welches die Mindestgrröße für unsere Artikel sein soll, in diesem Fall 16rem. Danach definieren die maximale Größe, in diesem Fall 1fr, welches ein Teil des verbleibenden Platzes beansprucht.

Das Ganze sieht im CodePen dann so aus (funktioniert zum Zeitpunkt des Artikel-Updates nur in Firefox Nightly):

1-Line Layouts

Mit 1-Line-Layouts zeigt Una Kravets auf, wie einst sehr komplexe Layouts sehr einfach geworden sind, Dank CSS-Grid. Hier ein Beispiel: Ein Element in die Mitte des Bildschirms zu zentrieren, dazu braucht es nur noch drei Zeilen CSS.

.parent {
 
    display: grid;
    place-items: center;
}

Vom Tabellenlayout zu CSS-Flexbox

Wer schon etwas länger im Webdesign unterwegs ist, wird sich an die Zeiten des Tabellenlayouts erinnern. Als es noch kein CSS gab, wurden abenteuerlich verschachtelte Tabellen gebastelt und Schriften, sowie Farben, direkt im HTML ausgezeichnet.

Mit der Einführung von CSS wurden Inhalt und Gestaltung voneinander getrennt und die Gestaltung per CSS begann ihren Siegeszug. Dank relativer und absoluter Positionierungen konnten HTML-Elemente beliebig platziert werden. Und die „float“-Eigenschaft ermöglichte es, Elemente nebeneinander darzustellen. War „float“ eigentlich dafür gedacht, Texte an Bildern entlang fließen zu lassen, wurde die Eigenschaft zu einer der wichtigsten in der Gestaltung von Layouts.

Doch Websites mussten auf der einen Seite dank unterschiedlicher Auflösungen und Ausrichtungen von Geräten immer flexibler gestaltet werden. Auf der anderen Seite wurden Weblayouts immer komplexer. Um dem Rechnung zu tragen, entstand das Flexbox-Modell.

Flexiblere Layouts dank Flexbox

CSS Flexbox setzt im Grunde an die Idee der Float-Layouts an. Per Flexbox ausgerichtete Elemente können in einer Reihe angeordnet werden. Dabei wird optional am Ende der Reihe in die nächste Zeile umgebrochen.

Im Gegensatz zu den Float-Layouts liefert das Flexbox-Modell noch weitere Features. So lässt sich die Breite einzelner Elemente innerhalb eines Flexbox-Layouts sehr variabel definieren. So wird per „flex-basis“ eine Standardgröße für Elemente definiert. Mit „flex-grow“ und „flex-shrink“ wird festgelegt, wie groß oder klein ein Element maximal sein darf. Auch die Ausrichtung der Elemente kann einfach und unkompliziert definiert werden.

Dazu kommt, dass eine Anordnung nicht nur horizontal möglich ist, sondern ebenso vertikal. Wer also aus dem typischen Zeilenlayout lieber ein Spaltenlayout zaubern möchte, kann dies mit CSS-Flexbox sehr einfach tun.

Flexible Boxen anordnen

Anders als beim Anordnen mit der Float-Eigenschaft, verlangt das Flexbox-Modell ein übergeordnetes Element, welches die Eigenschaften für die Anordnung der darin enthaltenen Kindelemente besitzt:

<div class="flexbox"> 
  <p>Box 1</p> 
  <p>Box 2</p> 
  <p>Box 3</p></div> 

Die drei P-Elemente des eben gezeigten Beispiels sollen nun alle nebeneinander angeordnet werden. Dazu sind folgende Zeilen CSS nötig, die im Elternelement der drei Absätze definiert werden:

div.flexbox {
  
  display: flexbox; 
  flex-flow: row wrap;
}

div.flexbox p {
  
  width: 100px; 
  height: 100px;
}

Über die Eigenschaft „display“ wird das Element als Flexbox definiert. Die Eigenschaft „flex-flow“ gibt an, ob die Kindelemente nebeneinander („row“) oder untereinander („column“) angeordnet werden sollen. Der optionale Wert „wrap“ gibt an, dass die Kindelemente umgebrochen werden sollen, wenn der Platz des Elternelementes nicht ausreicht, um alles in einer Reihe unterbringen zu können. Ohne „wrap“ würden die Kindelemente grundsätzlich ohne Umbruch nebeneinander dargestellt werden.

Den P-Elementen weisen wir nun eine Höhe und Breite von jeweils 100 Pixel zu. Das folgende Bild zeigt, dass bei dem Flexbox-Modell die Float-Problematik nicht auftaucht:

Flexible Breite für Boxen

Die Breite der Kindelemente richtet sich entweder nach deren Inhalt oder nach einer Breitenangabe, wie sie hier im Beispiel gemacht wurde. Alternativ besteht die Möglichkeit, einzelne oder alle Kindelemente so auszurichten, dass sie immer die gesamte Breite des Elternelementes ausfüllen:

#flexbox p:nth-child(1) {
  flex: auto;
}

Im Beispiel wird mit „:nth-child(1)“ das erste Kindelement per „flex“ auf automatische Breite gestellt. Das heißt, die Breite des ersten Kindelementes passt sich immer so an, dass alle drei Kindelemente die gesamte zur Verfügung stehende Breite einnehmen. Das zweite und dritte Kindelement wird jeweils mit der angegebenen Breite von 100 Pixel dargestellt.

Umfangreiche Layouts mit CSS-Grid

Kurze Zeit, nachdem das Flexbox-Modell die Runde gemacht hatte, erblickte mit CSS Grid das zweite neue Layoutmodell das Licht des Internets. Während Flexbox eher vergleichbar ist mit den lange sehr beliebten Float-Layouts, erinnert das Grid-Modell eher an die guten alten Tabellenlayouts.

Aber auch hier gibt es natürlich entscheidende Unterschiede und vor allem Vorteile. Zunächst einmal ist CSS-Grid insbesondere dafür geeignet, komplexe Layouts zu erstellen. Dazu wird zunächst ein Gitter definiert, welches aus Zeilen und Spalten besteht. Mit den Eigenschaften „grid-template-rows“ und „grid-template-columns“ legst du die Anzahl und Größen der Gitterelemente fest. Dabei werden die Breiten und Höhen mit der neuen Einheit „fr“ für „fraction“ festgelegt.

Ein Wert von „1fr“ macht alle Spalten und Zeilen gleich groß und verteilt sie über den zur Verfügung stehenden Platz. Will man eine Spalte doppelt so groß haben wie die anderen, weist man ihr „2fr“ zu. Natürlich können aber auch absolute Einheiten wie Pixel verwendet werden.

Anschließend müssen die einzelnen HTML-Elemente noch im Gitter platziert werden. Dazu ist es wichtig, zu definieren, welche Bereiche des Gitters ein Element einnehmen soll. Hierfür gibt es die vier CSS-Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“.

Mit „grid-gap“ richtest du Abstände zwischen den einzelnen Gitterbereichen ein.

CSS-Flexbox oder CSS-Grid?

Bleibt die Frage, für welches Layoutmodell du dich nun entscheiden solltest. Glücklicherweise handelt es sich nicht um eine Entweder-oder-Frage. Denn beide Modelle haben ihre Berechtigung und ein unterschiedliches Einsatzgebiet.

Wann immer es darum geht, ein komplexes Layout zu entwickelt, bietet sich CSS-Grid an. Du kannst es einsetzen, um dein Grundlayout für eine Website festzulegen. Im Gitter definierst du Bereiche für den Header, die Navigation, den Inhalt und den Footer. Je nach Auflösung hast du dank CSS ja zudem die Möglichkeit, die Anordnung für kleine Displays komplett anders aussehen zu lassen.

Wann immer es darum geht, Elemente neben- oder untereinander anzuordnen, bietet sich CSS-Flexbox an. Es ist etwa die richtige Wahl, wenn du eine Galerie gestaltest oder Links entsprechend ausrichten möchtest.

Grundsätzlich lässt sich sagen: CSS-Flexbox dient der eindimensionalen Anordnung von Elementen. Die Elemente laufen also immer nur in eine Richtung – entweder nach rechts oder nach unten, wobei optional ein Zeilen- beziehungsweise Spaltenwechsel möglich ist. CSS-Grid ist zweidimensional, da du hierbei eine gerasterte Fläche zur Verfügung hast, auf der du Elemente frei platzieren kannst.

Browserkompatibilität

In Sachen Browserkompatibilät spricht mittlerweile auch nichts mehr gegen CSS-Grids. Denn so wie das Flexbox-Modell wird auch das Grid-Modell mittlerweile von allen Browsern unterstützt, teils schon seit mehreren Versionen. Selbst der Internet Explorer 11 ist dabei.

Jedoch ist beim Internet Explorer etwas Vorsicht geboten. Das Flex-Modell läuft dort nicht ganz rund, beim Grid-Modell bedarf es eines Prefixes.

Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.
Die einfache Einteilung eines Weblayouts in Zeilen und Spalten war mit CSS nicht mehr möglich. Mit CSS-Grids kommt die Layouterstellung als Raster zurück – sogar ganz ähnlich, wie es einst mit Tabellen in den Zeiten vor CSS üblich war.

Raster vorbereiten

Zunächst einmal muss festgelegt werden, für welchen Bereich eines HTML-Dokumentes CSS-Grids angewendet werden sollen. Will man das gesamte Dokument per CSS-Grids in Raster einteilen und gestalten, sollte das „<body>“-Element als Ausgang genommen werden. Mit der „display“-Eigenschaft werden das Element sowie dessen Kindelemente für die Verwendung von Grids ausgezeichnet.

body {
  
  display: grid;
}

Im nächsten Schritt wird ein Raster definiert. Per „grid-template-rows“ und „grid-template-columns“ gibt man für jede anzulegende Reihe beziehungsweise Spalte einen Wert ein. Hierbei kann es sich um absolute oder relative Angaben oder das Schlüsselwort „auto“ handeln. Reihen oder Spalten mit dem Wert „auto“ nehmen eine Größe ein, die dafür sorgt, dass das Raster immer den gesamten zur Verfügung stehenden Raum einnimmt.

body {
  grid-template-columns: 300px auto;
  grid-template-rows: 200px auto 200px;
}

Spalten und Zeilen definieren

Ist das Raster definiert, können die darin enthaltenen Kindelemente innerhalb des Rasters verteilt werden. Dazu wird eine sogenannte Grid-Area definiert, innerhalb derer ein Element dargestellt wird. Dieser Bereich benötigt die Angabe einer Start- und Endposition für die Spalte und Zeile.

Die vier Angaben werden über die Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“ festgelegt. Jeder Eigenschaft wird also eine Zahl oder ein Name zugewiesen, der vorher definiert wurde.

header {
  
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 1;
}
nav {
  
  grid-column-start: 1; 
  grid-column-end: 1; 
  grid-row-start: 1; 
  grid-row-end: 1;
}
article {
  
  grid-column-start: 2; 
  grid-column-end: 2; 
  grid-row-start: 2; 
  grid-row-end: 2;
}
footer {
  
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 3; 
  grid-row-end: 3;
}

Auf diese Weise lassen sich Elemente frei innerhalb des Rasters verteilen. Dabei können einzelne Elemente sich auch überschneiden. Die einzige Einschränkung besteht darin, dass die Bereiche immer ein Rechteck darstellen müssen. Andere Formen sind also nicht möglich.

Im Beispiel wird ein einfaches Standardlayout dargestellt, bei dem die Höhe der ersten und dritten Spalte fest, die der zweiten flexibel ist. Die Breite der ersten Spalte ist ebenfalls fest und die der zweiten flexibel.

header {
  grid-column: 1 / 2;
  grid-row: 1;
}

Ausrichtung von Elementen

Die Gestaltungsmöglichkeiten sind an dieser Stelle noch nicht am Ende. So gibt es auch neue Eigenschaften, mit denen Inhalte innerhalb einer Grid-Area unterschiedlich ausgerichtet werden können.

Denn bislang waren Ausrichtungen per „text-align“ und „vertical-align“ nur für Texte beziehungsweise Tabellen möglich. Um ganze Elemente auszurichten, musste bislang ebenfalls die „float“-Eigenschaft zweckentfremdet werden oder auf eine absolute Platzierung gesetzt werden.

Mit „justify-self“ und „align-self“ gibt es zwei neue Ausrichtungseigenschaften. Erlaubt sind „start“, „end“, „center“ und der Standardwert „stretch“. Auch hier werden die Inhalte entsprechend ausgerichtet.

Während “justify-self” ein Element auf der Horizontalen ausrichtet – zum Beispiel links oder rechts –, ermöglicht “align-self” eine Ausrichtung auf der Vertikalen – zum Beispiel oben oder unten.

Reihenfolge im Raster

Im Prinzip lässt sich das im Beispiel definierte Layout weitestgehend auch mit „klassischen“ CSS-Eigenschaften wie „float“ realisieren. Der Vorteil beim Einsatz von CSS-Grids ist jedoch, dass die Reihenfolge der Auszeichnung der Elemente im Quelltext keinerlei Rolle spielt. Denn jedes Element bekommt mit „grid-column“ und „grid-row“ einen festen Platz innerhalb des Rasters zugewiesen.

Das „<footer>“-Element könnte also vor allen anderen Elementen im Quelltext ausgezeichnet werden. Es würde dennoch in der letzten Zeile des Rasters dargestellt werden.

Gerade bei responsiven Layouts ist es häufig sinnvoll, die Darstellungsreihenfolge einzelner Bereiche für die Mobilansicht umzustellen. Per CSS-Grids ist es ein Leichtes, zum Beispiel die Navigation für die Mobilansicht am Seitenende darzustellen.

Der Browsersupport erlaubt den Einsatz ganz ohne schlechtes Gewissen. Alle modernen Browser unterstützen CSS-Grids zuverlässig.

Weitere Beispiele für CSS-Grid-Layout

News Layout

Hier ein hervorragendes CSS-Grid-Beispiel mit einem 12-Spalten-Layout für eine Nachrichtenseite, mit einer Featured Story ganz oben. Von Marc Müller.

Magazine Layout

Dieses Magazin-Layout verwendet Flexbox, um Retro-Formen, mehrspaltigen Text und ein großes Bild hinzuzufügen. Erstellt von Raisa Yang.

Modular CSS Grid Layout Sections

Von Brian Haferkamp.

CSS Grid Magazine Layout

Von Elzette.

CSS Grid Newspaper

Von Olivia Ng.

A Piece of Art

Von Michelle Barker.

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Die folgenden Design-Tipps sind  gedacht für jene, die sich mit dem Konzept der Zugänglichkeit im (responsiven) Webdesign beschäftigen möchten. Dabei werde ich nicht mehr von einem responsiven Webdesign sprechen, denn ich halte diesen Begriff für veraltet. Responsives Webdesign sollte heute bereits als Normalität angesehen werden. Daher spreche ich im folgenden nur noch von Webdesign oder von Webentwicklung und meine dabei stets responsive Ansätze. Heute sollte jede Website in einer ansprechenden Art und Weise in Handarbeit gestaltet werden, um ein möglichst großes Publikum erreichen zu können.

Vernünftig zu lesende Schriftarten verwenden

Text auf einer Website ist das wichtigste Element, denn jede Website transportiert eine Botschaft zu den Lesern. Wenn jedoch Besucher mit weniger guten Augen die Website besuchen und den Inhalt nicht erfassen können, ist das schlecht. Die einzige Botschaft, die dann transportiert wird, ist: »wir müssen leider draußen bleiben«. Daher ist es wichtig, der Schriftart, der Schriftgröße, dem Kontrast und der Zeilenhöhe ebenso Aufmerksamkeit zu widmen, wie dem Freiraum zwischen den Absätzen. All diese Dinge spielen eine wichtige Rolle bei der Lesbarkeit von Texten.

Schriftarten auf  Websites sollten sich in der Größe der Bildschirmauflösung anpassen können. Dies kann man schnell mit einer entsprechenden CSS-Notierung der Schriftgrößen in REM erreichen. Hier solltest du einige Tests machen, denn zu kleine Schriften auf einer Smartphone- oder Tablet-Ansicht zerstören schnell die Wirkung des Designs.

Als Beispiel nehmen wir uns hier die Website der Todoist-App. Die Seite verwendet verschiedene Schriftarten und Größen in Verbindung mit einem „Hero“-Hintergrundbild. Auf kleineren Geräten wird das Hintergrundbild anders gesetz. Die Smartphone-Ansicht unterscheidet sich allerdings signifikant. Was gut zu sehen ist, ist, dass sich die Schriftgrößen wunderbar anpassen.

Ein weiteres wirklich gutes Beispiel ist die Website von MightyText. Auch hier kann man beobachten, wie sich die Schriftgröße und die Zeilenhöhen einer kleineren Bildschirmauflösung  anpassen. Das nenne ich gelungenes (responsives) Webdesign.

Gelungene Interaktionen

Der überwiegende Teil moderner Mibilnutzer hat kein Problem im Umgang mit einem modernen Smartphone oder Tablet. Touch, Swipe, Tippen und Halten und die anderen Techniken sind vielen Menschen bereits in Fleisch und Blut übergegangen. All diese Techniken sind Teil einer gelungenen, mobilen Benutzeroberfläche. Damit diese Techniken auf einem Smartphone gut funktionieren, bedarf es jedoch einiger Anpassungen. Einfach nur die Bilder und die Textgrößen anpassen, reicht nicht.

Browser-Kompatibilität prüfen

Die Browser-Kompatibilität ist heute nicht mehr die katastrophale Bedrohung von einst. Allerdings sollte trotzdem ein Test der Website mit allen mobilen Browsern erfolgen. Das Ziel ist hierbei, eine nahtlose Schnittstelle auf so vielen Geräten und Browsern wie nur möglich zu gestalten.

Optimal zu bedienende Navigation gestalten

Die Navigation ist eines der wichtigsten Elemente im Webdesign. Hier muss zuerst eine Form eines Navigations-Menüs gefunden werden, das gerade auf kleineren Bildschirmen mit Touch-Bedienung gut funktioniert. Auch hier kann Todoist wieder als Beispiel dienen. Die Seite verwendet ein modernes, verstecktes Menü. Erst bei Bedarf klappt der User das Menü auf und kann es ohne Probleme auch mit weniger filigran konstruierten Fingern auf einem Smartphone-Bildschirm nutzen. Eine Navigation dieser Art bietet eine hervorragende Benutzerfreundlichkeit.

Benutzerfreundlichkeit: Trenne dich vom Unwesentlichen

Responsive Benutzerfreundlichkeit heißt im Klartext Geschwindigkeit, Effizienz und Klarheit. Bei einer Website, die für große Bildschirme erstellt wurde, hat man ausreichend Raum für Elemente. Du kannst zwei Sidebars verwenden, etliche Werbebanner, viele Widgets und so weiter. Kurzum: Wenn man möchte, kann man das Layout vollstopfen. Abgesehen davon, dass dies auch bei einer für normale Bildschirme designten Website keine gute Idee ist, wird dieses Vorhaben bei einer für mobile Anwendung vorgesehenen Website total scheitern.

Ein responsives Design stellt auf einem Smartphone-Bildschirm alle Elemente untereinander dar. Um eine Website auf die Anwendung mit mobilen Geräten zu optimieren, heißt es, sich vom Unwesentlichen zu trennen. Nicht benötigte Inhalte sollten also entfernt werden.

Diese Elemente sind auf kleinen Auflösungen verzichtbar

Noch mal: für eine wirklich gut auf mobile Ansichten optimierte Website brauchen wir Geschwindigkeit, Effizienz und Klarheit. Alles nicht wirklich benötigte muss also weg. Zuerst einmal könnte das die Sidebar sein. Sie enthält zumeist nichts Wichtiges für Smartphone-User. Auch der Footer sollte entmüllt werden. Ist er überhaupt nötig? Oder ist nur die Anzeige der beiden wichtigen Links »Kontakt und Impressum« wirklich nötig? Ich tendiere immer zu letzterem.

Social-Sharing-Links können am unteren Ende des Bildschirms responsiv angebracht werden. Extragroße Banner gehören definitiv verkleinert und Werbung sollte nur sehr sparsam eingebunden werden. Vielleicht kann sogar nur ein sehr schnell ladender Werbeblock oberhalb des Logos Verwendung finden.

Auf der Beispielseite ist nur ein einzelnes Werbeelement eingebunden, welches zudem noch auf Geschwindigkeit optimiert wurde. Es besteht lediglich aus einer verlinkten Grafik. Geschwindigkeit ist sehr wichtig auf den mobilen Ansichten, denn nicht jeder Smartphone-User hat das Hochgeschwindigkeitsnetz LTE zur Verfügung. Lädt die Website zu lang, wird der Vorgang abgebrochen und deine vielleicht sehr interessante Website nicht besucht.

Die Flexibilität der Inhaltsbereiche

Bei der Gestaltung eines ansprechenden Layouts solltest du stets deinem Instinkt vertrauen. Das beinhaltet auch das Nachdenken über die einzelnen Inhaltsbereiche. Wie werden sie sich bei einer bestimmten Auflösung verhalten? Versuche stets, die Website aus den Augen eines Besuchers zu sehen. Hierbei sind die Inhaltsbereiche sehr wichtig, denn sie müssen sich flexibel den einzelnen Auflösungen anpassen. Dabei funktionieren große Full-Size-Layouts nur selten ohne erhebliche Anpassungen auf kleineren Bildschirmen.

Hier bist du als Designer besonders gefragt, denn bereits in der Planungsphase einer Website sollten die mobilen Ansichten berücksichtigt werden.

Ein Beispiel sehr guter Flexibilität

Die Website von Storify bietet ein hervorragendes Beispiel für die Flexibilität der einzelnen Inhaltsbereiche. Wenn du diese Website scrollst, wirst Du viele Blockelemente bemerken, die abwechselnd links oder rechts aneinander liegen. Doch sobald die Website mit mobilen Geräten angesehen wird, ändern sich diese Bereiche und gliedern sich untereinander an. Die unwesentlichen Elemente werden ausgeblendet, nur das Wesentliche bleibt in der Ansicht auf mobilen Endgeräten erhalten.

Die Website auf großen Bildschirmen

Die Website auf einem Smartphone betrachtet

Wenn das Layout schrumpft, braucht es mehr Finesse, um es ansprechend darstellen zu können. Du wirst mit Sicherheit nicht immer die perfekte Lösung finden. Doch es ist deine Aufgabe, einen gut funktionierenden Kompromiss im Sinne der Benutzerfreundlichkeit zu finden.

Benutzerfreundlichkeit und die Mobile First Strategie

Ein wirklich empfehlenswertes Buch zum Webdesign unserer Tage ist »Mobile First« von Luke Wroblewski. Es ist gut zu lesen und beschreibt anschaulich das Konzept hinter dem Mobile-First-Gedanken. Zumeist ist es wesentlich einfacher, mit einem ansprechenden mobilen Design für Smartphones zu beginnen, um sich dann langsam über die Tablets zu den großen Monitoren für Notebooks und PCs hochzuarbeiten.

Diese Art der Herangehensweise zwingt Dich, zuerst über die wichtigsten Schlüsselelemente nachzudenken. Danach bekommst du dann die Freiheit, je nach wachsendem Bildschirm ergänzende Elemente hinzuzufügen. Mobile First heißt, nur die wichtigsten Design-Elemente zu gestalten, und nach und nach daraus die Full-Size-Version zu entwickeln. So arbeitet die Website auf jeder Bildschirmauflösung optimal benutzerfreundlich.

Fazit

Mit der richtigen Herangehensweise ist (responsives) Webdesign bedeutend einfacher. Es ist erstaunlich, welche Ergebnisse man erreichen kann, wenn zuvor genau bedacht wurde, wie die Website auf welcher Auflösung aussehen soll. Webdesign ist keine leichte Aufgabe in der heutigen Zeit. Umso wichtiger ist es, stets am Ball zu bleiben und sich täglich den neuen Herausforderungen zu stellen. Denn statische Websites locken heute keinen Hund mehr hinter dem Ofen hervor. Hierzu braucht es Kreativität, Planung und die Sicht aus der Perspektive eines Besuchers.

Auch spannend

• Webdesign Trends
• Atomic Design
• Der goldene Schnitt
• Brutalismus im Webdesign
• Neumorphisches Design
• Mehr Webdesign-Kunden finden