Anzeige
Anzeige
UX & Design
Artikel merken

Bootstrap 3 vs. Foundation 5: Die Top-Frameworks im ersten Vergleich

Heute zeigen wir euch, was die größten Unterschiede dieser beiden Frameworks sind. Im kommenden „Bootstrap 3 vs. Foundation 5“-Teil zeigen wir euch, wie sich die Frameworks im „Prototyping“ schlagen.

Von Mario Janschitz
3 Min. Lesezeit
Anzeige
Anzeige

Als Kunde hat man weder das Geld noch die Zeit, einen Webentwickler Websites von Grund auf neu bauen zu lassen. Als Webentwickler wiederum muss man nicht immer das Rad neu erfinden, kurzum: Ein Framework muss her.
Die beiden derzeitigen Platzhirsche, subjektiv wahrgenommenen, sind Twitters Bootstrap in der dritten Version und Zurbs Foundation, seit einige Tagen in der Version fünf. UI-Framework hin oder her, beide Systeme haben ihre Stärken und Schwächen. Ich versuche euch die Kernunterschiede vorzustellen.

Bootstrap 3 vs. Foundation 5: Pixel vs. rem

Anzeige
Anzeige

Kurz gesagt: Bootstrap setzt auf die Angabe von Pixeln und Foundation verwendet „Rem“.

Dem Einen möge die Bezeichnung „rem“ unbekannt sein, deswegen möchte ich kurz darauf eingehen, damit die Auswirkung von „rem“ besser verstanden werden kann.

Anzeige
Anzeige

„Back to the root“

CSS3 hat neue Einheiten eingeführt, eine davon ist das sogenannte „root em“ – eben ein „rem“. Ein „rem“ verhält sich exakt wie ein bereits bekanntes „em“ allerdings orientiert sich ein „rem“ am Eltern-Element beziehungsweise dem „Root-Element“. Ein Vorteil von „rem“ ist eine einfachere Berechnung von verschiedenen Abständen oder Höhen, zum Beispiel der Schriftgröße. Grund dafür ist, dass im Gegesatz zu „em“ sich „rem“ nicht unendlich kaskadieren. Nachteil: Erst Internet Explorer neun kann mit der Einheit „rem“ umgehen. Mehr zu diesem Thema könnt ihr hier nachlesen.

Anzeige
Anzeige

Das heisst: Nutzt ihr Bootstrap müsst ihr für jedes Element auf jedem Gerät eine Pixel-Größe definieren. Bei Foundation fällt das weg, weil „rem“ eine responsive Angabe ist. Möchtet ihr also zum Beispiel die Schriftgröße aller Elemente innerhalb eines anderen Elements verkleinern, dann müsst ihr dem Eltern-Element nur font-size:80% zuweisen und alle darunter liegenen Elemente werden um 20 Prozent verkleinert.

Da es sehr abstrakt ist in „rem“ zu denken, bietet euch Foundation ein „Sass-Mixin“ an um Pixel in „rem“ umrechnen zu lassen.

Anzeige
Anzeige
.element {
 width: remCalc(10px); // will be converted to REMs
}

Adaptive-Design vs. Fluid-Design

Kurz gesagt: Bootstrap setzt adaptive Layouts ein und Foundation nutzt einen fluiden Ansatz.

Foundation kann sich besser an verschiedene Größen anpassen, während Bootstrap in verschiedene vordefinierte Designs „springt“. Mehr zum Thema Responsive-Design-Pattern erfährt ihr in meinem Guide gegen Bullshit-Bingo in der Web-Entwicklung.

Um in Bootstrap auch fluide Layouts darstellen lassen zu können, könnt ihr diesen Trick nutzen:

Anzeige
Anzeige
.container-fluid{
    padding:0 15px;
}

Damit gleicht ihr den margin aus, der auf .row-Elemente angewendet wird.

Bootstrap 3 vs. Foundation 5: UI-Elemente

Kurz gesagt: Bootstrap bietet eigentlich alles, was für ein Webprojekt benötigt wird. Foundation ist eher minimalistisch ausgestattet.

Das bedeutet aber auch, dass bei Foundation nicht so viele CSS-Styles überschrieben werden müssen, wie bei Bootstrap.

Anzeige
Anzeige

Beide sind responsive

Kurz gesagt: Foundation wurde fluid mit dem Mobile-First-Gedanken designt und Bootstrap orientiert sich an adaptiven Layouts für einige spezielle Auflösungen.

Zurb forciert Mobile-First und so auch ihr Framework. Twitters Bootstrap verfolgt den adaptiven Ansatz und hat im Laufe seiner Entwicklung die Darstellung für mobile Geräte erst im nachhinein implementiert. Das soll aber nicht heissen, dass Bootstrap nicht responsive wäre, oder man keinen „mobile-first“-Ansatz verfolgen könnte.

Fazit

Ich habe versucht euch einige Aspekte aufzuzeigen die euch bei einer Framework-Entscheidung helfen können. Eine Empfehlung kann ich nicht abgeben weil der Einsatz eines solchen Frameworks auch vom Webprojekt selbst abhängig ist. Im folgenden zweiten und letzten Teil dieser kurzen Serie werde ich ein kleines Webprojekt anfertigen, einmal mit Bootstrap und einmal mit Foundation damit ihr sehen könnt wie sich euer Workflow im Bezug auf das Framework eurer Wahl ändern wird.

Anzeige
Anzeige

Habt ihr gute Erfahrungen mit den beiden Frameworks?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
38 Kommentare
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

thore

Ich habe schon mit beiden Frameworks gearbeitet und muss sagen, dass mir persönlich Foundation doch etwas besser gefällt als Bootstrap.

Antworten
holger1411

Hm, kann es sein das sich im Artikel auf Bootstrap2 bezogen wird? „container-fluid“ gibts doch bei v3 gar nicht mehr und der „mobil-first“ Ansatz ist doch gerade die Neuerung die sich Bootstrap3 gross auf die Fahnen geschrieben hat…oder hab ich was übersehen?

Antworten
thomasklaiber

Hätte auch gesagt dass Bootstrap 3 doch gerade damit wirbt jetzt den mobile-first Ansatz zu verfolgen? …

Antworten
Heiko

@holger1411: Nein, du hast vollkommen recht. Auch Bootstrap v3 basiert auf dem Mobile-First Prinzip. Da hat wohl jemand nicht richtig recherchiert… :p

Antworten
hannes

Bootstrap3 setzt definitiv auf Mobil-First. Da hat der Author definitiv Bootstrap2 zum Vergleich herangezogen.

Antworten
holger1411

Ja, auch das Codebeispiel mit .container-fluid deutet darauf hin. Der Anhang „-fluid“ entfällt bei BS3 ja gerade weil da alles von Haus aus „fluid“ ist, im Gegensatz zu BS2 wo es optional war.

Antworten
Christoph Paterok

Also ich muss sagen Bootstrap 2 war schon gut. Aber mit Bootstrap3 bin ich wunschlos glücklich… Sicherlich ist der Codeanteil noch größer geworden, aber mal rein auf das bezogen, was am Schluss raus kommt – Perfekt! Meine Meinung (!) :)

Antworten
musyyy

Der Vergleich mit Mobile First ist vll. zu tief gegriffen, weil meiner Meinung nach kann man mit beiden Frameworks sowohl den mobile first als auch den desktop first ansatz verfolgen, es hängt dann mehr vom design ab, welcher sinnvoller ist bzw. muss man sich schon beim Design der Website für einen Ansatz entscheiden.

Antworten
Mario Janschitz

Hallo an Alle! Danke für die Kommentare.

@holger @heiko @hannes
Wo habe ich geschrieben, dass es mit Bootstrap nicht möglich sein soll Mobile-First zu entwickeln?

Ich habe geschrieben, dass Bootstrap nicht von Anfang an für Mobile-First ausgerichtet war sondern dieses Feature erst im Laufe seiner Entwicklung hinzubekam. Bootstrap wurde 2011 entwickelt, da wurde „Mobile-First“ erst vorgestellt.

Was hier viele als einen Fehler in Bezug auf Bootstrap 2 zu identifizieren glauben:
„container-fluid“ ist eine generische Bezeichnung sonst nichts. Den Hinweis zum padding könnt ihr selbst und direkt auf der Bootstrap-3-Seite aus der Dokumentation entnehmen. Da Bootstrap eben nicht fluid ist, sondern adaptive.

Antworten
Alex

Ich hab bisher nur mit Bootstrap 3 gearbeitet weil mir 2 noch nicht gefallen hat. Ich werde mir aufjedenfall auch mal Foundation anschauen. Ich finde das 5 gute neuerungen bekommen hat und es hört sich sehr interessant für Projekte an. Woran ich auch zu erst denken musste war der mobile first Ansatz bei Bootstrap.

Antworten
Pixel-Casi

I LOVE Bootstrap the best Framework :-)
Danke an die Entwickler..

Antworten
cherti

Also ich hab bisher bootstrap 3 ein paar mal eingesetzt und bin damit ganz zufrieden.

Antworten
levito

Ich baue mir in der Regel eigene „Projekt-Bootstraps“ – nur das drin, was ich brauche, dazu ein paar projektspezifische Specials.

Twitter Bootstrap hat ein paar ganz nette Ansätze und ist schön, um passende Klassennamen zu finden.

Die Grid-Systeme in Bootstrap und Foundation sind nett, aber nicht perfekt. Ich setze lieber auf inline-block statt floating (ähnlich wie in inuit.css) – das macht weniger Stress. Keine Clearfixes nötig, Vertical Alignment geht, ein Wrapper reicht für mehrere Zeilen.

Bei Formularen hat Bootstrep wesentlich mehr zu bieten als Foundation und ist deutlich solider gebaut. Baut z.B. mal eine Checkbox mit mehrzeiligem Label (für „AGB bestätigen“ Blabla z.B.).

Die JS-Komponenten sind bei Bootstrap auch nicht optimal, aber besser als bei Foundation. Man sehe sich nur den Slider an: da wird bei 3 Slides gleichzeitig margin via JS animiert. Das kann nur ruckeln auf mobilen Geräten. Man kann auch die Wrapper-UL über 3D-Transforms mit CSS-Transition animieren – das ist schnell! Tja, mobile first geht für mich anders.

Wer nicht viel Frontend-Erfahrung hat und ein Admin-Frontend o.ä. bauen will, dem würde ich weiterhin Bootstrap empfehlen – vor allem jetzt mit der Version 3.

Wer Projekte für Endkonsumenten baut, die nach was aussehen sollen und gleichzeitig gut pflegbar bleiben sollen, der sollte immer wieder unter die Haube solcher Frameworks schauen, sich inspirieren lassen, aber am Ende lieber selbst eine kleine, schlanke Basis entwickeln. Gerade jetzt in Zeiten schmaler Mobil-Anbindungen.

Antworten
Thomas D.

Selber etwas zusammenbauen ist die Rute von Eval. Diese kleinen, schmalenc Lösungen skalieren überhaupt nicht und wenn der Originaldev gewechselt hat, will die auch keiner mehr anfassen. Ne du, dann lieber einen Branchenstandard wie Bootstrap.

Antworten
cephei

Bi auch der Meinung, dass sich der Artikel auf Bootstrap v2 bezieht.

„Nutzt ihr Bootstrap müsst ihr für jedes Element auf jedem Gerät eine Pixel-Größe definieren.“

Dafür das sich der Abschnitt nur um Textgrössen handelt wirkt der obige Satz ganz schön hart.
Zudem ist der Aufwand um 4 Textgrössen -p, h1,h2,h3- in Pixel anzugeben kaum ein nennenswerter Nachteil. Nach meiner Erfahrung kommen die Designer immer als erstes angerannt, wenn mal eine Schrift etwas daneben ist. Somit ist es für mich eher ein Vorteil, wenn ich Schriften pixelgenau einstellen kann.
Übrigens wäre es mit Bootstrap kein grosse Herausvorderung das umzustellen. Dank LESS. Und ich denke man kann auch bei Foundation dies relativ leicht anpassen, kenne mich jedoch dort nicht aus.

Antworten
cephei

@Mario Janschitz
„Was hier viele als einen Fehler in Bezug auf Bootstrap 2 zu identifizieren glauben:
„container-fluid“ ist eine generische Bezeichnung sonst nichts. Den Hinweis zum padding könnt ihr selbst und direkt auf der Bootstrap-3-Seite aus der Dokumentation entnehmen. Da Bootstrap eben nicht fluid ist, sondern adaptive.“

Das allererste was man auf der getbootstrap seite unter Migration lesen kann ist

Bootstrap 2.x -> Bootstrap 3.0
.container-fluid -> .container

„„container-fluid“ ist eine generische Bezeichnung sonst nichts.“
Wieso schreibst du dann einen Codebesispiel?

Ich schreibe das nicht, um dir einen Fehler vorzuwerfen. Aber wenn viele glauben dass das unklar ist, solltest du das vielleicht berichtigen und nicht einfach sagen, dass es kein Fehler ist. Es kommt ja nicht darauf an was falsch oder nicht falsch ist. Es kommt darauf an was verstanden wird. Und wenn du ein Codebeispiel aus v2 bringstt, kannst du nicht erwarten, dass man das hinnimmt.

Antworten
smartin

Ich habe mir nun nicht alle Kommentare durchgelesen, werde daher bereits Gesagtes sicher wiederholen bzw. mit meinen Worten wiedergeben.

Dieser Artikel ist für mich so sinnfrei wie das Horoskop jeder Tageszeitung. Warum? Weil er mir und sicher auch vielen anderen, nicht allen, t3n-Lesern keinen Mehrwert bietet. Das was ich hier lese bekomme ich in ca. 4 Stunden heraus wenn ich mich das erste Mal überhaupt mit einem der Frameworks beschäftige.

Ich habe bei dieser Überschrift eine direkte Gegenüberstellung der Kernkompetenzen beider Frameworks erwartet.

Stattdessen lese ich missverständliche Aussagen, die mehr falsch als richtig klingen und bekomme „Tipps“ die gänzlich falsch sind.

Ich habe beide Frameworks lieb gewonnen aber ich finde es besonders traurig/armseelig wenn unwissende ihre Entscheidungen auf solche Artikel stützen.

Für michpersönlich ist übrigens eine leichte Sympathie Richtung Foundation spürbar geworden. Außerdem erscheint es mir als hätte der Artikel schon ne Weile gelegen

Zur Info, beide Frameworks haben sogenannte Customizer. Darüber kann man Bootstrap sehr einfach fluid machen, also mit stufenlosen Viewports. Es stimmt das Bootstrap noch weitaus aufgeblähter erscheint aber wenn man beide Frameworks kennt, weiß man auch was man braucht und holt sich nur dies über den Customizer.

Ich lese sehr gerne t3n.de (die Zeitschrift auf Arbeit) und dies ist meine erste schlechte Kritik aber solangsam hab ich das Gefühl das in den Artikel nicht mehr so viel Liebe zum Detail steckt.

Antworten
Alex

Was ist mit dem wichtigsten Unterscheidungsmerkmal und dem Grund, dass es überhaupt zwei Platzhirsche gibt? Bootstrap setzt auf LESS, Foundation auf Sass.

Wir haben uns in der Agentur für Sass entschieden und damit für Foundation, damals in Version 3 und bewusst gegen eine Sass-Portierung von Bootstrap.

Die Entwicklung von Foundation sehen wir allerdings mit Sorge, manchmal werden Konzepte komplett über den Haufen geworfen, dann später wieder aufgenommen, z.b. die benannten rem-Werte:
– v3: rem
– v4: em, zwar mit em-calc mixin, das allerdings bei unseren Designvorgaben große Probleme machte
– v5: wieder rem

Oder jquery/zepto:
– v3: jquery 1
– v4: jquery 1 oder zepto
– v5: zepto raus, jquery 2

Bisher konnte man mittels bundler mehrere Foundation-Versionen parallel einsetzen, jetzt sind die zurbianer auf bower umgestiegen, diesen umstieg ist man gezwungen mitzumachen.

Ausserdem ist es aktuell so, dass das topbar-Script einen Fehler hat, der die Fixierung der Bar am oberen Bildschirmrand verhindert, ein kleiner Vertipper zwar, aber sowas sollte wirklich nicht passieren! Man hat den Eindruck, dass nicht ausreichend getestet wird und Versionen rausgekloppt werden, teils mit erheblichen Veränderungen, die dann nicht durchdacht sind und in der nächsten Version wieder rausfliegen.

Naja, wir lieben Sass, Frameworks sind toll, aber was zurb momentan so veranstaltet … macht uns bissel grumpy.

Antworten
Mario Janschitz

Hallo @Cephei
Ich weiss nicht warum du jetzt eine Migration ansprichst, mein Artikel tut das jedenfalls nicht.

Hier der link zum „fluiden“-Gitter:
http://getbootstrap.com/css/#grid
Zitat: „Grids and full-width layouts
Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.“

Den Codeschnipsel habe ich deswegen eingefügt weil es für einige wichtiger ist ein „fluides“ statt einem „adaptiven“ Layout zu verwenden. Daher ist auch der Name „container-fluid“ absolut logisch. Bei Bootstrap 2 musste man ja auch nicht selbst im Nachhinein den alten „container-fluid“ anpassen — daher imho auch unlogisch an BS2 zu denken.

Der Aufwand für gute Typographie wird von dir anscheinend unterschätzt. Findest du Typographie-Frameworks überflüssig? Hast du schon mal vom „Outline-Algorythmus“ in HTML5 gehört — auch hierbei geht es um Typographie und eine einfachere Handhabung von Textformatierung.

Wie ihr alle wisst lasse ich mich gerne eines Besseren belehren und bin dafür auch dankbar. Aber nicht mit Argumenten wie: „Du hast den selben Klassen-Namen verwendet du meinst die alte Version bla bla“

@novusidea
Wie du siehst ist das der erste Teil einer kleinen Serie. Und es freut mich dir 4 Stunden deiner Arbeitszeit gespart zu haben, das ist der Sinn der Sache. Wir stecken immer in einem Zwiespalt zwischen Anfängern und Entwicklern. Ich kann mich noch gut erinnern als mir Leser gesagt haben, dass sie mehr Einsteiger-Artkel wollen. Daher ist der erste Teil auch etwas „flacher und breiter“ angelegt. Aber wie Boostrap „fluide“ wird habe ich bereits beschrieben ;)

+1 @levito
+1 @Alex
Bin ganz eurer Meinung.

Zu den „schmalen“ Lösungen und Frameworks:
Es muss nicht per se heissen, dass diese kleinen Frameworks nutzlos werden, sollte der Lead-Dev wechseln. Gerade BEM hilft hier und ich selbst sehe auch Probleme mit diesen Frameworks wenn man Designs abseits des Mainstreams entwickeln möchte. Diese Riesen-Frameworks decken manchmal mehr ab als nötig. Zum Beispiel eine .text-center-Klasse.
Ich habe das Problem damit, dass ich im Zuge des Refactoring mehr Zeit benötige Unnötiges rauszustreichen als ich effektiv beim Coden gespart habe. Für Prototyping find ich das ganz ok — damit man dem Kunden eben schnell was zeigen kann. Aber das ist nur meine persönliche Meinung.

Mit internetten Grüßen :)

Antworten
hannes

@Mario Janschitz

Da haben wir dir wohl vorschnell unrecht getan. Ich bin jedenfalls auf weitere Artikel zum Thema gespannt.

Antworten
cephei

@Mario Janschitz

Wie ich schon sagte, will ich dir keinen Fehler vorwerfen.
>Ich schreibe das nicht, um dir einen Fehler vorzuwerfen.
>Aber wenn viele glauben dass das unklar ist, solltest du
>das vielleicht berichtigen und nicht einfach sagen, dass es kein Fehler ist.

Vielleicht zu deiner info „.container-fluid“ is eine Klasse die von Bootstrap v2 verwendet wird. Diese Klasse ist im Framework der Version 2 enthalten, in Version 3 jedoch nicht mehr. Wenn du jetzt ein Snipped postest mit genau dieser Klasse im Bezug auf dasselbe Framework in v3, kommt logischerweise eine gewisse Unklarheit auf.

Antworten
Thomas D.

Traurig. Im Facebookbeitrag beweihräuchert sich der Autor auch noch selbst.

Antworten
holger1411

Lassen wir mal gut sein. Kann mir gut vorstellen wie ärgerlich es ist einen Artikel zu schreiben und gleich von 10 Spezis eins aufs Dach zu kriegen. Es entsteht (ob subjektiv oder objektiv) für jemanden der lange mit Boostrap 2 gearbeitet hat und jetzt mit BS3 einfach der Eindruck das von Bootstrap 2 die Rede ist. Ob das im Artikel klarer dargestellt werden kann/sollte liegt m.E. aber beim Autor und sollte kein Grund für weitere „Attacken“ sein.

Antworten
Thomas D.

Kritik muss er abkönnen, wenn er auf einer bekannten Plattform etwas publiziert,

Antworten
smartin

Das mit .container-fluid hab ich nun verstanden. Allerdings ist es auf der Bootstrap-Seite (http://getbootstrap.com/css/#grid) etwas unverständlich bzw. mißverständlich formuliert. Ich habe mich gefragt warum ich dem .container ein padding: 0 15px; geben soll, wenn dieser diese Angabe doch schon bekommt (von Bootstrap selbst).

Es soll also eine eigene Klasse namens „.container-fluid“ angelegt werden, da es diese in Bootstrap 3 nicht mehr gibt (warum auch immer). Diese Klasse ist eine alternative zur, in Bootstrap 3 vorhandenen Klasse, „.container“.

Vorher hatte man nur folgenden Container (in Bootstrap 3 enthalten):

.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}

Nun hinzugekommen (in eigener CSS-Datei eingefügt):

.container-fluid {
padding-left: 15px;
padding-right: 15px;
}

Die Klasse „.container“ bekommt durch Bootstrap in den verschiedenen Media-Query-Angaben für die Viewports noch die Breitenangaben, die Klasse „.container-fluid“ ja aber nicht, da sie gar nicht in Bootstrap 3 berücksichtigt wird. Dies ist der Grund das es erst Fluid wird.

Diesen Effekt kann man rein theoretisch auch erziehlen wenn man via Customizer die Breiten aller Viewports auf auto oder 100% setzt, allerdings hat man dann nicht mehr die Wahl zwischen fluid und fixed Layout. Daher finde ich die Lösung mit .container-fluid besser. Allerdings sollte diese dann unmißverständlicher formuliert werden.

@Mario Janschitz:
Ich weiß nicht ob dein Zweiter Satz eher ne Retourekutsche oder ein Mißverständnis ist aber ich nehme die Retourekutsche an, da ich mit meiner Aussage [Stattdessen lese ich missverständliche Aussagen, die mehr falsch als richtig klingen und bekomme „Tipps“ die gänzlich falsch sind.] selbst zum Teil falsch lag. Zum Teil weil die Erklärung weiterhin mißverständlich ist. ;-)

Allerdings schreibst du eindeutig …Bootstrap orientiert sich an Desktop-Auflösungen. was selbst eine Falschaussage für Version 2 ist. Denn für mobile Geräte sind Version 2 und 3 ausgelegt. Sie verfolgen beide nur unterschiedliche Ansätze. Und zwar ist Bootstrap 2 quasi „desktop first“ und Version 3 ist „mobile first“. Also => Responsive/Mobil != mobile first.
Aber auch der Satz nach diesem Zitat ist eigentlich falsch formuliert, da ich dort wieder die Gleichsetzung von „mobile first“ und „mobile Optimierung“ verstehe.

Um ehrlich zu sein, habe ich „mobile first“ auch erst verstanden als ich Bootstrap 3 richtig verwendet habe. Ich will es hier nicht versuchen zu erklären, aber ich weiß das ich versucht habe „desktop first“ mit Bootstrap 3 zu arbeiten, was mir einige Doppelte-CSS-Anweisungen berscherrte, in diesem Zuge habe ich es dann verstanden. (Ich stehe öfter auf der Leitung) ;-)

Zeit Fragen (zur Abwechslung mal): Warum wird so ein Artikel in 3 Teile gesplitet? [und] Besteht der 2. und 3. Teil des Artikels schon?

Antworten
Mario Janschitz

@novusidea
Zum Thema .container-fluid. Ich sehe das genau so wie du, daher habe ich das auch im Artikel erwähnt. Ich finde es auch nicht unbedingt cool, dass BS3 hier mit adaptiven Layouts arbeitet und „fluid“ eigentlich nur als „Hack“ — wie du auch herausgefunden hast — anbietet. Bin da voll bei dir.

Nein, war nicht als Retour gedacht — ich versuche hier wirklich Arbeit abzunehmen ;) Ich gebe hier einen Überblick und zwar kurz und schmerzlos — der auch für Anfänger geeignet ist. Wie bereits gesagt, es gibt hier unterschiedliche Leser die ich bedienen möchte.

Ich habe bereits über mobile-first geschrieben, wurde auch im Artikel verlinkt (https://t3n.de/news/responsive-design-web-entwicklung-504906/).

Was ich mit „Desktop-First“ meine ist, dass BS3 eben adaptive ist und Designs für Phone, Tablet, Desktop und großen Desktop-Auflösungen anbietet. Man könnte auch sagen, dass BS3 „Mobile-Also“ ist, aber der Begriff ist hier im deutschsprachigen Raum nicht wirklich bekannt. Und bevor jemand aufschreit: Ja auch Foundation macht das, was ich aber bis jetzt gesehen habe ist Foundation komplett fluid, das heisst es ist eigentlich egal mit welcher Auflösung der Viewport daherkommt, das Layout wird immer passend sein -> weil: fluid.

Mobile-First ist ja auch nur ein „Denkansatz“ von daher wird das auch oft als Buzzword benutzt … leider. Ich hab übrigens auch nirgends geschrieben, dass Bootstrap 3 nicht für Mobile-First geeignet ist, oder? Aber wenn da etwas unklar ist, werde ich das morgen nochmal etwas präzisieren :)

Wie gesagt ich habe kein Problem wenn ihr mich auf etwaige Unklarheiten aufmerksam macht, ganz im Gegenteil — dafür gibt ja auch Communities. Aber nicht mit solchen Flame-Argumenten.

Mit internetten Grüßen!

Antworten
Thomas

Ich will auf niemandem rumtrampeln, aber in dem Artikel, wie auch den rechtfertigenden Kommentaren gibts einige Missverständnisse, die hier bei T3N so nicht hätten sein sollen.

Zitat: „Der Aufwand für gute Typographie wird von dir anscheinend unterschätzt. Findest du Typographie-Frameworks überflüssig? Hast du schon mal vom „Outline-Algorythmus“ in HTML5 gehört — auch hierbei geht es um Typographie und eine einfachere Handhabung von Textformatierung.“

Lieg ich jetzt grad total falsch, wenn der Outline-AlgorIthmus nun wirklich NICHTS mit Typographie zu tun hat? Hier geht es lediglich um strukturelle Elemente..
Das kann man auch leicht nachvollziehen, indem man eine Seite durch den Outliner (http://gsnedders.html5.org/outliner/) jagt. Da bleibt von der Optik (das ist es nämlich, was Typographie nun bezeichnet) nicht viel übrig, sondern das Tool schlüsselt lediglich den „Document Flow“ auf.

Antworten
Mario Janschitz

Hallo Thomas. Und genau weil Typographie wichtig ist, stellen die (unterstützenden) Browser mithilfe des Outline-Algorythums die Struktur „richtig“ dar.

Ich beziehe mich bei der Definition von „Typographie“ auf das Typolexikon.de und bei diesem Beispiel auf: „Die Lehre, Sprache und Gedanken mittels maschinell bzw. digital reproduzierbarer Schriften sichtbar und den Anforderungen entsprechend optimal lesbar oder verständlich zu machen;“

Die „richtige“ Strukturierung innerhalb eines Dokumentes wird mit diesem Algorithmus sichtbar gemacht. Also auch wenn zum Beispiel nur h1 in Kombination mit Sections verwendet wurden. Das ist der Outline-Algorithmus in HTML5.

Einziges Bild, dass ich jetzt dazu schnell auftreiben konnte: http://webdevlinks.files.wordpress.com/2012/11/schriftgroessen_h1-6html5-e1353279406539.jpg

Content matters, deswegen ist eine richtige Strukturierung desselben wichtig. Aber das hat jetzt eher weniger mit dem Inhalt des Artikels zu tun.

Antworten
Mario H.

Ich nutze Bootstrap auch schon sehr lange, und die Kritik an diesem Artikel ist durchaus berechtigt. Ich möchte die einzelnen Punkte gar nicht mehr alle aufführen, diese wurden ja schon in den Kommentaren genannt. Ich erwarte aber von t3n und vom Autor, dass wenigstens die Falschaussagen, z. B. Bootstrap gleich Desktop-First Ansatz, korrigiert werden. Denn so kann man das auf keinen Fall stehen lassen. Das ist nicht t3n würdig.

Antworten
Thomas

Hi Mario,
Deine Aussage ist trotzdem nicht richtig und was Du jetzt zusätzlich noch anführst, stützt sie ebenfalls nicht.

Die Browser stellen die Outline nämlich überhaupt nicht dar. Weder header, noch nav, noch article, section oder footer werden in irgendeiner Form „visualisiert“. Es sind lediglich strukturelle Elemente. Optisch sieht das ganze nämlich genau so aus wie ein div – gar nicht. Wie man das letztendlich typografisch mittels CSS visualisiert, steht auf einem völlig anderen Blatt. Wird aber andererseits durch Maschinen, die dazu nur die Struktur betrachten, völlig ignoriert. Sie können halt nicht „sehen“.

Mittels CSS kann ich die strukturellen Elemente natürlich völlig anders visualisieren und die Interpretation des Kontextes damit dem Leser (Mensch) überlassen: Ich kann sie inline laufen lassen, ich kann eine h2 größer machen als eine h1 oder was auch immer. DAS ist Typographie! Im Print (meist) problemlos, da durch den Leser oftmals intuitiv korrekt interpretiert. Im Web für eine Maschine problematisch, wenn ich eine h2 statt einer h1 verwende, einfach nur „weil sie so schön kleiner ist als eine h1“.
Zur Definition siehe auch: http://de.wikipedia.org/wiki/Typographie , hier insbesondere http://de.wikipedia.org/wiki/Typographie#Anwendung_von_Typografie interessant.

Selbst der Artikel zur digitalen Typographie unterstützt Deine Aussage in keiner Weise: Siehe http://de.wikipedia.org/wiki/Typografie_f%C3%BCr_digitale_Texte

Deine Schlussfolgerung aus dem Typolexikon ist schlichtweg falsch. Die Outline hat einfach nichts mit a.) Lesbarkeit und b.) Schrift am Hut. Das kannst Du dir übrigens auch ganz einfach bei MS Word in der „Gliederungsansicht“ verdeutlichen.

Das Bild ist in dem Kontext ohne entsprechenden Code irrelevant. Nutz lieber das von mir genannte Tool in Bezug auf individuellen Code.

Abschließend dennoch Dank für den Versuch der Verdeutlichung Deiner Aussagen. Ich bleibe dennoch bei meiner Meinung, dass hier verschiedene Sachen wild in einen Topf geworfen werden. Denn ich habe korrekt angewendete Mikro-Typographie noch lernen müssen.
Zumindest in einem Punkt geb ich Dir allerdings recht: Hat nichts mit dem Thema zu tun. Wollte nur korrigieren, da Du das Thema zuerst aufgegriffen hast und damit bei den Lesern nicht schon wieder ein falscher Eindruck entsteht, der dann nachher durch Sekundärverwertung wieder als „Fakt“ übernommen wird.

Antworten
silent

Abgesehen von der ganzen Diskussion hier – ich finde den Ansatz von Bootstrap persönlich wesentlich besser. Ich möchte ja oft ganz bewusst meine Informationen auf Smartphones und kleinen Tablets anders darstellen. Ein völlig Fluides Layout hat aus meiner Sicht daher kaum echte Vorteile. Ich hatte bereits einige Projekte, bei denen bestimmte Elemente auf dem Smartphone im Verhältnis zur Seite größer oder kleiner dargestellt werden sollten. Das lässt sich mit einem voll fluidem Layout ja nur sehr aufwändig umsetzen (bzw. weiche ich dann das Konzept auf).

Außerdem: Bilder möchte ich nicht immer in der vollen Größe/bzw. Auflösung laden! Auch da lässt sich am besten mit Break-Points arbeiten.

Antworten
Manuel Becker

@silent: Das ist aber so auch nicht ganz richtig. Fluid bedeutet ja nicht, dass du keine Breakpoints mehr hast, es verhält sich bis dahin lediglich etwas anders. Du kannst dein Design bei eigens von dir definierbaren Breakpoints genauso wie bei Bootstrap fast beliebig umkrempeln, falls du dies für notwendig hältst.

Das gilt auch für Bilder, die natürlich nicht in der vollen Größe geladen werden müssen. Weitere Infos dazu hier: http://foundation.zurb.com/docs/components/interchange.html

Lg,
Manuel

Antworten
Thomas Bügel

Interessanter Artikel und Diskussion.
Als Ergänzung: http://responsive.vermilion.com/compare.php

Antworten
alfredbez

„Im folgenden zweiten und letzten Teil dieser kurzen Serie …“

Wann kommt denn der zweite Teil?

Antworten
davisbrown562

Bootstrap vs Foundation – Top 2 CSS Frameworks Compared 2017 (English) https://blog.templatetoaster.com/bootstrap-vs-foundation

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige