Interview mit Jens Grochtdreis

Web-Design Trends: Wozu eigentlich Flexbox?
Keine Kommentare

Das Flexbox-Layoutmodell erfreut sich zunehmender Beliebtheit. Doch welches Problem löst Flexbox eigentlich? Welche Herausforderungen gibt es beim EInsatz von Flexbox zu meistern, und welche Tools helfen dabei? Jens Grochtdreis, Gründer der Webkrauts und Sprecher auf den JavaScript Days 2018, gibt Antworten.

Flexbox – wozu eigentlich?

Entwickler: Hallo Jens, vielen Dank, dass du dir die Zeit für dieses Interview genommen hast. Wir wollen uns ein wenig über den Flexbox-Standard unterhalten. Welches Problem löst Flexbox?

Jens Grochtdreis: Flexbox ist die erste Technik, die wir zur Verfügung haben, um richtige Layouts im Web zu zimmern. Wir schicken zwar selbstfahrende Roboter zum Mars, die ein Selfie zurücksenden, aber bis vor Kurzem hatten wir noch keine Möglichkeit, wirklich planmäßig ein Web-Layout zu erstellen.

Mit Flexbox können wir endlich flexible Layouts definieren, die browserübergreifend funktionieren.

Mit Flexbox können wir nun endlich auch flexible Layouts definieren, die browserübergreifend funktionieren und auch so gedacht sind – was in Zeiten des responsiven Web-Designs sehr wichtig ist. Wir müssen nicht mehr, wie mit früheren Techniken, einfach mal irgendetwas „hinzudengeln“ und dann hoffen, dass es funktioniert.

Entwickler: Welche Herausforderung siehst du bei der Verwendung von Flexbox?

Jens Grochtdreis: Die erste Herausforderung ist, dass diejenigen, die schon länger im Web unterwegs sind und mit Floats sehr gut zurechtkommen, die Denkweise der neuen Technik erlernen müssen. Im Prinzip ist es nötig, sich sein Gehirn neu zu formatieren und sich vom Alten frei zu machen, um das Neue vernünftig zu erlernen.

Die Denkweise für die Arbeit mit Flexbox ist eine komplett andere, als diejenige, die wir bislang kennen. Es gibt kein Oben und Unten, Links und Rechts mehr. Es gibt nur noch Achsen, die der Entwickler selbst drehen kann – und darauf muss man sich erst einmal einlassen. Auf den ersten Blick erscheint das noch ein wenig schwierig. Auch ich habe ein bisschen gebraucht, um mich daran zu gewöhnen. Aber wenn man sich einmal mit der neuen Technik vertraut gemacht hat, ist das sehr charmant.

Flexbox: Hintergrund zum Thema

Lesen Sie auch den ausführlichen Artikel zu Flexbox von Jens Grochtdreis: Layout in flexibel: Flexbox im Einsatz

 

Flexbox-Alternativen & Tools

Entwickler: Kann man das gleiche Ergebnis auch mit einer anderen Technik erreichen?

Jens Grochtdreis: Man wird ein ähnliches Ergebnis erreichen können, aber nicht das gleiche. Wenn man das gleiche Ergebnis erreichen könnte, hätte es keine Notwendigkeit für diese neue Technik gegeben.

Es ist auch die Frage, ob man diese neue Technik zwangsweise wird anwenden müssen. Wenn man mit dem Bisherigen zufrieden ist, gibt es keine Notwendigkeit für etwas Neues. Das ist wie im alltäglichen Leben auch: Wenn die Hose passt, dann brauche ich mir keine neue kaufen – außer ich habe unbedingt Bock drauf!

Aber ich werde nicht das gleiche Ergebnis mit einer alten Technik erreichen können. Dafür gibt es aber auch die Grundhaltung des Progressive Enhancement. Das heißt, ich habe eine alte Technik, die ich um etwas Schöneres, vielleicht Featurereicheres erweitere. Wir haben dann auf der einen Seite die alten Browser, die das Neue nicht beherrschen und ein entsprechend konservatives Layout aufweisen. Auf der anderen stehen die neuen Browser, die das Neue können und ein noch besseres, angepasstes  Layout erzeugen können.

Entwickler: Gibt es Tools für Entwickler, die man bei der Arbeit mit Flexbox empfehlen kann?

Jens Grochtdreis: Das wichtigste ist in meinen Augen ein Tool namens Autoprefixer. Das ist ein PostCSS-Tool, das man am sinnvollsten mit Grunt oder Gulp nutzen kann. Für all die Entwickler, die keines der beiden Tools verwenden, gibt es auch eine Onlineversion – das ist die einfachste Variante.

Die eigentliche Herausforderung in der Praxis ist, dass es nicht nur eine Flexbox-Variante gibt.

Die eigentliche Herausforderung in der Praxis ist nämlich, dass es nicht nur eine Flexbox-Variante gibt, sondern drei. Wenn man alle drei, und damit auch die alten Browser, mit bedienen möchte, dann muss man eigene, neue Eigenschaften schreiben. Ich sehe da keinen Sinn darin, diese zu lernen. Genau dafür gibt es Tools wie Autoprefixer, die man dann auch nutzen sollte.

Autoprefixer geht noch einmal über das erzeugte CSS und schreibt alles rein, was noch notwendig wäre. Das ist eigentlich das wichtigste Tool. Ansonsten finde ich persönlich diverse Cheat Sheets, die es im Internet reichlich gibt, recht wichtig. Damit kann man sich immer wieder vor Auge führen, wie diese eine Eigenschaft heißt, mit der ich dieses eine Ziel erreichen möchte. Diese Eigenschaften sind nämlich in meinen Augen nicht besonders intuitiv und gut merkbar benannt. Ich brauche immer mal wieder den Rückgriff auf so ein Cheat Sheet. Das ist für mich das zweite wichtige Tool.

Entwickler: Jens, vielen Dank für das Interview!

Jens Grochtdreis im Flexbox-InterviewJens Grochtdreis ist freier Webentwickler und Berater (www.grochtdreis.de). Er ist dabei auf moderne Frontendentwicklung und Barrierefreiheit spezialisiert. Vor seiner Selbständigkeit arbeitete er zehn Jahre in Agenturen u.a. für eine sehr große deutsche Bank und einen großen Telekommunikationsanbieter. Jens gründete 2005 die Webkrauts (webkrauts.de), um für ein besseres Medium zu streiten.
International PHP Conference

Testing React Applications

by Hans-Christian Otto (Suora GmbH)

Building a Robo-Army with Angular

by Sebastian Witalec (Progress)

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -