Gunther: [SASS] mixin @media rule Verknüpfung der Expressions?

Beitrag lesen

@@Gunnar:

nuqneH

Oder worin besteht deiner Meinung nach der Vorteil von 'overlapping mq'?

Es entspricht dem Progressive-enhancement-Gedanken: Bessere Geräte bekommen bessere Features. Besser heißt hier größer und Feature Ansicht.

Also sagst du: Progressive Enhancement = overlapping MQs

Bezeichnenderweise steht in der Definition des Englischen Wikipedia Artikels gar nichts von "Bildschirm-/ Viewportgröße".

[Zitat]
Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth. (Quelle: http://en.wikipedia.org/wiki/Progressive_enhancement)
[/Zitat]

Basisansicht für alle („mobile first“); größerer Viewport → Breakpoint, der die Ansicht aufwertet – mit _zusätzlichen_ Style-Regeln. Noch größerer Viewport → Breakpoint, der die Ansicht noch mehr aufwertet – mit weiteren _zusätzlichen_ Style-Regeln.

Und genau hier sehe ich einen der "Knackpunkte" des "Mobile First" Ansatzes.

Basisansicht für alle ...

Warum sollte sich eine/ die Basisansicht denn bitte ausgerechnet am KAV (kleinster anzunehmender Viewport) orientieren!?

Zumal heutzutage alle relevanten Mobile Browser MQ unterstützen.
Ergo dürften Browser, die eine "Basisansicht" brauchen, nicht unbedingt auf Geräten mit einem sehr kleinen Viewport anzutreffen sein.

Außerdem bezog und bezieht sich imho progressive enhancement, genauso wie graceful degradation, immer auf den verwendeten Browser und dessen Fähigkeiten - nicht auf die Größe eines verwendeten Displays/ Monitor.

Imho hat 'Mobile first' noch nie Sinn gemacht ...!

IMHO macht das schon Sinn. Wonei sich der Gedanke nicht nur aufs Layout bezieht, sondern viel früher ansetzt: Inhaltsmanagement, Informationsarchitektur, … Nicht zu vergessen: Bandbreite und Performance.

Das ist sicher alles richtig und ich gehe da auch mit dir d'accord. Nur hat das für mich nichts mit "Mobile first" zu tun.

Denn wenn eine Website nachher zwar die "optimale" Benutzbarkeit für kleine Viewports bietet, dafür aber auf Bildschirmen mit Full HD Auflösung "schei... aussieht" (als Sammelbegriff für schlechte Bedienbarkeit, fehlende Übersicht etc.), dann ist das Endresultat genauso misslungen.

Denn normalerweise geht man doch von vorhandenen Inhalten aus, und muss sich überlegen, wie man diese jeweils bestmöglich auf unterschiedlichen Viewports darstellen kann.

Womit ich da bei den Überlegungen anfange, macht für mich keinen Unterschied.
Denn bevor man mit dem Erstellen anfängt, sollte man die Planung für alle Viewportgrößen abgeschlossen haben.

Erstmal Beschränkung aufs Wesentliche, und wenn man mehr Platz zum Anzeigen hat, sollte man überlegen, ob zusätzliche Inhalt es wirklich wert sind angezeigt zu weredn oder ob sie nur den Bildschirm zumüllen.

Auch hier neige ich zu einer leicht anderen Betrachtungsweise:
Grob gesagt, wenn man ganz radikal kategorisieren möchte, gibt es nur 2 Kategorien, nämlich
1. relevante Inhalte
2. nicht relevante Inhalte

Inhalte, die zur Kategorie 1 zählen, müssen (sollten) jeweils immer angezeigt werden.
Inhalte der Kategorie 2 sind zwar nicht zwingend für den reinen Informationsgehalt der Seite notwendig, liefern dem User aber ggf. eine bessere Übersicht und/ oder zusätzliche Informationen.

Diese kann man dann eben vom vorhandenen Platzangebot abhängig machen.

Und wieder braucht es keinen "Mobile first" Ansatz ...!

Bei „desktop first“ fängt man mit viel Müll an und es fällt schwer, sich davon zu trennen.

In vielen Fällen ist mit „mobile first“ progressive enhancement gemeint. Was auch nicht heißen muss, dass man auf Mobilgeräten weniger hat. Schließlich haben Mobilgeräte Bewegungssensoren, GeoLocation u.a., mit denen Features hinzugefügt werden können, die bei Desktopgeräten nicht verfügbar sind.

Genau!
Und hier sind wir im Bereich der "geräteabhängigen Möglichkeiten".
Auch das hat imho nichts mit "Mobile first" zu tun.

Deine oben genannten Features finden sich ja bspw. auf Smartphones genauso wie auf Tablets, deren jeweilige Viewportgrößen sich teils ganz gewaltig voneinander unterscheiden!

Da hat einer einen Hype ausgelöst, der zumindest für die allermeisten Projekte überhaupt keinen Vorteil bringt - eher das Gegenteil.

Das kann daran liegen, dass die Projekte nicht richtig geplant worden sind. Dass bspw. der Mobile-first-Gedanke nur aufs Layout bezogen wurde.

Das mag vielleicht zutreffen - spielt aber letzendlich keine Rolle.
Denn wenn ich unter einem Begriff/ Konzept wie "Mobile first" so ungefähr "alles" verstehen kann, oder jeder etwas anderes darunter versteht, wozu ist es dann noch gut?

Und für mich ist bis heute zumindest ein wesentlicher Bestandteil von "Mobile first" der, dass man sein CSS so aufbaut, dass man (ohne MQ) beim KAV anfängt und dann per 'overlapping' MQs mit 'min-width' für immer größer werdende Viewports erweitert.

Und genau dieses "Konzept" stelle ich zumindest für viele Sites in Frage!

Und hierbei hat sich seinerzeit eine fixe Breite von ~ 960px bestens bewährt.

Als ich noch einen Monitor mit 640 oder 800 px Breite hatte, war ich von solchen Webseiten recht begeistert. Nicht.

Du weißt selber ganz genau, dass sich sowohl die zur Verfügung stehenden Techniken, als auch die "relevante" Hardware seither ständig weiterentwickelt haben.

Gerätespezifische Darstellungsangaben waren noch nie gut fürs Web. Responsive Design bringt die (dem Web inhärente!) Flexibilität zurück, die jahrelang versaut wurde.

Das ist doch reine Definitionssache.
Oder sind 'min-/max-width' MQs für dich keine "gerätespezifischen Darstellungsangaben"!?

Nochmal:
Was mich im Grunde genommen stört ist, dass per "Mobile first" Slogan im Bezug auf das CSS eine Methode favorisiert wird, die imho vielleicht vor 3-4 Jahren "sinnvoll" gewesen sein mag, die heutzutage aber für die allermeisten Projekte eher von Nachteil, denn von Vorteil ist!

Und auch du bist hier im Prinzip nicht auf die Unterschiede (Vor- & Nachteile) der beiden unterschiedlichen Strategien ('overlapping' <-> 'stacking') eingegangen!
Wenn man diese nämlich mal konkret nebeneinander stellen würde, dann bin ich ziemlich davon überzeugt, dass sie sich mindestens die Waage halten! Es demnach also keinen (vernünftigen) Grund gibt, automatisch eines der Konzepte dem anderen gegenüber vorzuziehen!

Alles andere, was du hier genannt und aufgeführt hast, fällt für mich unter den Oberbegriff "RWD" und hat nichts mit "Mobile first" zu tun!

Gruß Gunther

0 84

[SASS] mixin @media rule Verknüpfung der Expressions?

Gunther
  • css
  1. 1
    Gunnar Bittersmann
    1. 0
      Gunther
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunther
          1. 0

            Korrektur: Geht doch ohne 'unquote()'

            Gunther
          2. 0
            Gunnar Bittersmann
            1. 0
              Gunther
              1. 1
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                      1. 0
                        molily
                        1. 0
                          Gunther
                          1. 0
                            molily
                            1. 0
                              Gunther
                              1. 0
                                molily
                                1. 0
                                  Gunther
                            2. 0

                              Mobile First

                              molily
                              • design/layout
            2. 0
              Gunnar Bittersmann
            3. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
              2. 0
                molily
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
                  3. 0

                    gelesene Postings hervorheben

                    Gunnar Bittersmann
                    • zu diesem forum
                    1. 0
                      Gunther
                2. 0

                  "Lücke" in stacked MQs detektieren

                  Gunther
                  • javascript
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                  2. 0
                    molily
            4. 0

              Wert der Basis-Schriftgröße

              Gunther
              1. 0
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Gunther
                          1. 0
                            Gunther
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Gunther
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    Gunther
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Gunther
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            Gunther
                                            1. 0
                                              Gunnar Bittersmann
                                              1. 0
                                                Gunnar Bittersmann
                                                1. 0
                                                  Gunther
                          2. 0
                            Gunnar Bittersmann
                            1. 0
                              Gunther
                              1. 0
                                Gunnar Bittersmann
                        2. 0
                          Gunnar Bittersmann
                        3. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
        2. 0
          Gunnar Bittersmann
          1. 0
            Gunther
            1. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
        3. 0
          molily
          1. 0
            Gunther
            1. 0
              molily
              1. 0
                Gunther
            2. 1
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Gunther
      2. 0
        molily
        1. 0
          Gunther
          1. 0
            molily
    2. 0
      Gunnar Bittersmann
      1. 0
        Gunther