molily: Mobile First

Beitrag lesen

Hallo,

Wenn ich von »Mobile First« spreche, meine ich das Produkt- und Designkonzept von Luke Wroblewski. Natürlich ist das mit obigen MQs verwandt, aus den genannten Gründen. Sie gehen oftmals miteinander Hand in Hand gehen, sind aber nicht identisch.

Falls es jemand interessiert, ich habe mir einmal das Buch gekauft und hineingeschaut.

Es geht darin um einen »business case for mobile first«. »You won’t find any code in this book; there are many programmers out there who can provide better advice on mobile development than I can.«

Zusammenfassung es Inhalts:

  • Warum es so wichtig ist, Websites für Mobilgeräte zu schreiben – weil dort das Wachstum und die Zukunft ist.
  • Die Beschränkung aufs Wesentliche, die technisch nötig ist und aus UX-Sicht sinnvoll: »don’t dumb things down on mobile—focus on what really matters«
  • Verschiedene Nutzungsmuster von Desktop vs. Mobile (z.B. Zeit, Ort, Leseverhalten, Aufmerksamkeit)
  • Nutzung der besonderen Fähigkeiten der Geräte (z.B. Geolocation, Touch), um die UX zu verbessern
  • Aufbau/Struktur von Mobilseiten, die die Nutzerbedürnisse befriedigen (Informationsarchitektur)
  • Navigationstechniken, Navigation vs. Inhalt
  • Anforderungen von Touch-Bedienung an die UI, User Interface Guidelines
  • Verwendung von Gesten, Konventionen (z.B. Pull to refresh)
  • :hover und :focus ersetzen/nachbauen
  • Eingabe: Aufbau und Vereinfachung von Formularen, Nutzung von HTML5-input-Typen
  • Erst das letzte Kapitel dreht sich um Layout:
      - Erklärung vom virtuellen Viewport, viewport-Meta-Tag, Device-Pixel-Ratio
      - Responsives Design, Media Queries werden nur namentlich genannt

Kurz gesagt: Es geht hier nicht um konkrete CSS-Techniken, sondern um Grundwissen, dass Mobilgeräte sich verbreiten, wie sie bedient werden, wie man Websites für Mobilgeräte aufbaut, dass man flexible Websites bauen sollte. Es geht darum, den Fokus bei der Entwicklung von neuen Sites auf Mobilgeräte zu setzen, ohne andere Zugangs- und Nutzungsarten aus den Augen zu verlieren. Hinsichtlich der technischen Umsetzung wird auf das Buch von Ethan Marcotte, dem Namensgeber von RWD, verwiesen.

Mathias

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