Entwerfen Sie Ihr Website-Design für Mobilgeräte zuerst

Heute besuchen die Mehrheit der Besucher ihre Websites auf ihrem SMARTPHONE, nicht auf einem Computer. Trotzdem denken viele Websites noch für den großen Bildschirm und passen sie dann « adaptiert » auf Mobilgeräte an – mit einem oft zufriedenstellend schlechten Ergebnis auf kleinen Bildschirmen. Die « mobile First »-Ansatz umkehrt die Logik: man denkt und gestaltet zuerst für das Smartphone, dann fügt man für größere Bildschirme (Tablette, Computer) hinzu. Ergebnis: eine Website, die gut funktioniert, wo die Mehrheit Ihrer Besucher sind. Hier ist, was mobile First ist, warum es zählt, und wie Sie es anwenden – ohne technisches Geschwätz.

Warum denken Sie mobile First

Mobile First ist eine Gestaltungsmethode, bei der man und gestaltet sein Website ZUNERST für das SMARTPHONE, dann es für größere Bildschirme (Tablette, Computer) bereichert – das Gegenteil der alten Praxis, bei der man für den großen Bildschirm gestaltete und dann für das Smartphone reduzierte. Diese Methode zählt, weil eine einfache Grundlage besteht: Die Mehrheit der Besucher besucht heute Websites auf ihrem Smartphone. Das Denken und Gestalten für das kleine Bildschirm bedeutet, das Denken und Gestalten für die REALITÄT Ihrer Zielgruppe. Die Vorteile sind konkret. Eine Website, die TATSACHELLICH gut auf Smartphone funktioniert: keine Website, die für den Computer gedacht und dann « gestopft » auf Smartphone (mit kleinem Text, zu kleinen Knöpfen, Elemente, die überlaufen), sondern eine Website, die von Anfang an für eine angenehme und einfache Nutzung auf kleinem Bildschirm konzipiert wird. Eine Website, die zum ESSENTIEL geht: das kleine Bildschirm drängt auf Priorisierung (weniger Platz), was das Superflügige ausschließt und das Nachrichten klarer macht – ein Vorteil für alle Bildschirme, nicht nur für das Smartphone. Bessere SUCHBEGRIFFERFOLGE: Suchmaschinen bevorzugen Websites, die sich auf das Mobile ausrichten (Google indexiert die mobile Version zuerst), daher denken Sie an das Mobile, um gut gefunden zu werden (unsere Anleitungen zum Suchbegriffserfolg für Anfänger). Bessere GESAMT-ERFAHRUNG: Eine Website, die gut auf Smartphone funktioniert, funktioniert in der Regel gut überall; das Gegenteil ist falsch (eine Website, die für den Computer konzipiert wurde, ist oft unangenehm auf Smartphone). Das Hauptgedanke: Ihre Besucher sind im Großen und Ganzen auf dem Smartphone – denken Sie zuerst für sie. Das bedeutet nicht, den Computer zu vernachlässigen (die Website muss auch auf großen Bildschirm gut funktionieren), sondern vom Smartphone aus zu beginnen und danach zu bereichern, anstatt vom großen Bildschirm aus zu beginnen und zu reduzieren. Die gute Nachricht: Die meisten modernen Lösungen zum Erstellen einer Website (unsere Anleitungen zum Erstellen Ihres eigenen Websites) produzieren « responsive » Websites (die sich an alle Bildschirme anpassen); mobile First ist sowohl ein GEIST (Denken Sie zuerst an das kleine Bildschirm, Priorisieren Sie das Wesentliche) als auch eine Technik. Zusammengefasst, denken Sie mobile First, das bedeutet, denken Sie an die Realität Ihrer Zielgruppe (im Großen und Ganzen auf dem Smartphone): eine Website, die TATSACHELLICH gut auf Smartphone funktioniert, geht zum ESSENTIEL, ist besser für Suchbegriffserfolg und bietet eine gute Erfahrung überall. Das ist die richtige Ansatz, wo das Smartphone der Hauptbildschirm ist.

Wie Sie mobile First konkret anwenden

Mobile First erfordert keine technische Kenntnisse: es ist hauptsächlich ein GEIST und einige gute Praktiken. Beginnen Sie mit dem ESSENTIEL – auf dem kleinen Bildschirm ist Platz begrenzt: fragen Sie sich, was wirklich wichtig ist (das Kernnachricht, die Hauptaktion, die wesentlichen Informationen), und priorisieren Sie es; was nicht zum Wesentlichen passt, kann später oder anderswo kommen (unsere Anleitungen zum ESSENTIEL). Denken Sie an die LIESBARKEIT auf dem kleinen Bildschirm – großes Text (kein Zooming notwendig), kurze Absätze, ausreichender Kontrast; was auf dem Smartphone lesbar, ist überall lesbar. Denken Sie an den TOUCH – auf dem Smartphone navigieren Sie mit dem Finger – große und gut getrennte Knöpfe und Links (um den Finger zu klicken, ohne sich zu vertun), passende Menüs (der klassische « Hamburger-Menü »-Button, der sich entfaltet), einfache Formulare zum Füllen mit dem Finger (unsere Anleitungen zu effektiven Formularen). Verkürzen Sie – auf dem Smartphone kann die Verbindung langsamer sein – optimierte Bilder, eine Website, die nicht zu viele schwerwiegende Elemente lädt, um schnelles Anzeigen (unsere Anleitungen zu schnellen Websites); die Geschwindigkeit zählt noch mehr auf dem Smartphone. TESTEN Sie auf einem echten Smartphone – das beste Testen: schauen Sie auf Ihrem eigenen Smartphone auf Ihre Website (und bitten Sie andere, es ebenfalls zu tun); durchlaufen Sie sie wie ein Besucher (ist die Lesbarkeit gut? Klicken Sie auf die Knöpfe? Füllen Sie das Formular? Ist nichts überlaufen? ) – das ist der sicherste Weg, um Probleme zu erkennen. Bereichern Sie für größere Bildschirme – nachdem das Mobile gut ist, nutzen Sie die zusätzliche Platz auf dem Computer (reicher Layout, mehr Spalten) – aber beginnen Sie immer mit dem Mobile, denken Sie nicht zuletzt daran. Einige TIPPEN: Die meisten modernen Tools produzieren « responsive » Websites (die sich an alle Bildschirme anpassen), daher ist die technische Anpassung oft automatisch – Ihr Job ist es, mobile First zu denken (Priorisieren Sie das Wesentliche, überprüfen Sie, dass alles auf dem kleinen Bildschirm gut funktioniert) und zu TESTEN. Vertrauen Sie nicht ausschließlich auf das « mobile » Vorschaubild Ihres Tools – nichts ersetzt das echte Smartphone in der Hand. Zusammengefasst, mobile First anwenden, bedeutet mit dem ESSENTIEL beginnen (das kleine Bildschirm drängt auf Priorisierung), die Lesbarkeit und den Touch zu verbessern (große Text, klickbare Knöpfe mit dem Finger), verkürzen (schnelles Anzeigen), auf einem echten Smartphone TESTEN, und dann für größere Bildschirme bereichern. Ein GEIST mehr als eine Technik: denken Sie an das, wo Ihre Besucher wirklich sind.

• Beginnen Sie mit dem ESSENTIEL – Priorisieren Sie die wichtigsten Inhalte
• Denken Sie an die LIESBARKEIT – Großer Text, kurze Absätze, guter Kontrast
• Denken Sie an den TOUCH – Große, gut getrennte Buttons für Finger
• Verkürzen Sie – Optimierte Bilder, schnelle Ladezeiten
• TESTEN Sie auf einem echten Smartphone – Kein Ersatz für echte Nutzung
• Bereichern Sie für größere Bildschirme – Erst nach der mobilen Version

Der gute Reflex. Adoptieren Sie den GEIST « mobile First » – bei jeder Seite, fragen Sie sich, was wirklich WICHTIG ist (das Kernnachricht, die Hauptaktion, die wichtigen Informationen) und priorisieren Sie es, da die begrenzte Platz des Smartphones Sie dazu zwingt, das Superflügige auszuschließen – ein Vorteil für alle Bildschirme. Sorgen Sie für das, was zählt auf dem Smartphone: großes Text, um ohne Zooming zu lesen, kurze Absätze, ausreichender Kontrast; große und gut getrennte Knöpfe und Links, um den Finger zu klicken, ohne sich zu vertun; einfache Formulare zum Füllen mit dem Finger; optimierte Bilder für schnelles Anzeigen, selbst bei langsamer Verbindung (die Geschwindigkeit zählt noch mehr auf dem Smartphone). Und vor allem, TESTEN Sie auf einem ECHTEN Smartphone: schauen Sie auf Ihrem eigenen Smartphone auf Ihre Seite und bitten Sie andere, es ebenfalls zu tun; durchlaufen Sie sie wie ein Besucher (ist die Lesbarkeit gut? Klicken Sie auf die Knöpfe? Füllen Sie das Formular? Ist nichts überlaufen? ) – das ist der sicherste Weg, um echte Probleme zu erkennen – vertrauen Sie nicht ausschließlich auf das « mobile » Vorschaubild Ihres Tools, nichts ersetzt das echte Smartphone in der Hand. Nachdem das Mobile gut ist, bereichern Sie für größere Bildschirme (nutzen Sie die zusätzliche Platz auf dem Computer), aber beginnen Sie immer mit dem Mobile, behandeln Sie es nicht zuletzt. Die meisten modernen Tools produzieren « responsive » Websites, die sich an alle Bildschirme anpassen – die technische Anpassung ist oft automatisch – Ihr Job ist es, mobile First zu denken (Priorisieren Sie, überprüfen Sie) und zu TESTEN. Denken Sie an das, wo Ihre Besucher wirklich sind – im Großen und Ganzen auf dem Smartphone –, das ist der Reflex, der einen site effektiv überall macht.

Das Smartphone, die Realität Ihrer Zielgruppe

Mobile First ist keine Mode – es ist die Anpassung an eine REALITÄT – die Mehrheit Ihrer Besucher ist auf dem Smartphone. Halten Sie diese Referenzen bei. Die REALITÄT des Verbrauches – denken Sie an das Bildschirm, auf dem Ihre Besucher wirklich arbeiten (das Smartphone, im Großen und Ganzen), nicht für den Bildschirm, auf dem Sie arbeiten (oft ein Computer) – daher die Bedeutung von TESTEN auf dem Smartphone. Die VORZUGSBEWEISUNG: das kleine Bildschirm drängt auf Priorisierung, was das Nachrichten klarer macht für alle Bildschirme (ein unerwarteter Vorteil von Mobile First). Das SUCHBEGRIFFERFOLG – Suchmaschinen bevorzugen Websites, die sich auf das Mobile ausrichten (Google indexiert die mobile Version zuerst) – denken Sie an das Mobile, um gut gefunden zu werden (unsere Anleitungen zum Suchbegriffserfolg für Anfänger). Die universelle ERFAHRUNG – eine Website, die gut auf dem Smartphone funktioniert, funktioniert in der Regel gut überall – das Gegenteil ist falsch – daher ist das Mobile First die sicherste Wahl. Das REALISTISCHE TESTEN – nichts ersetzt das echte Smartphone in der Hand (Ihr eigenes, das von anderen) – das ist der sicherste Weg, um zu überprüfen, dass Ihre Website wirklich angenehm auf dem kleinen Bildschirm ist. Die teknische EINFACHKEIT – moderne Tools produzieren « responsive » Websites (die sich an alle Bildschirme anpassen) – Mobile First ist hauptsächlich ein GEIST (Denken Sie zuerst an das kleine Bildschirm, Priorisieren Sie, TESTEN Sie), ohne technische Kenntnisse. Zusammengefasst, denken Sie an das Mobile First, das bedeutet, denken Sie an die Realität Ihrer Zielgruppe – im Großen und Ganzen auf dem Smartphone. Man denkt ZUNERST für das kleine Bildschirm (Priorisieren Sie das Wesentliche, die Lesbarkeit und den Touch verbessern, verkürzen Sie), TESTEN Sie auf einem echten Smartphone, und dann bereichern Sie für größere Bildschirme. Die Vorteile: eine Website, die TATSACHELLICH gut auf dem Smartphone funktioniert (keine Website, die für den Computer tassiert auf dem Smartphone), ein klarerer Nachrichten für alle Bildschirme, bessere Suchbegriffserfolge, und eine gute Erfahrung überall. Das ist nicht das Vernachlässigen des Computers – es ist vom Mobile aus zu beginnen und zu bereichern, nicht das Ignorieren des großen Bildschirm. Im Zeitalter, wo das Smartphone der Hauptbildschirm ist, ist Mobile First einfach die richtige Ansatz – denken Sie an das, wo Ihre Besucher wirklich sind.

Aufpassen: Denken Sie nicht nur auf dem großen Bildschirm und vertrauen Sie nicht nur auf das Vorschaubild Ihres Tools. Zwei große Fallen. KONZEPTIEREN SIE ZUNERST AUF DEM COMPUTER – Sie arbeiten wahrscheinlich auf einem großen Bildschirm, und es ist verlockend, Ihre Seite nur dort zu beurteilen – aber die Mehrheit Ihrer Besucher ist auf dem Smartphone – eine Seite, die Ihnen auf dem Computer perfekt erscheint, kann auf dem Smartphone unangenehm sein (kleiner Text, zu kleine Knöpfe oder zu nahe beieinander, Elemente, die überlaufen, unbenutzbare Menüs). Denken Sie an den Bildschirm, den Sie verwenden, und nicht an den Bildschirm, den Ihre Besucher verwenden, ist die klassische Fehlern. TESTEN SIE NICHT AUF EINEM ECHTEM SMARTPHONE – das « mobile » Vorschaubild Ihres Erstellungs-Tools gibt eine Idee, aber es reproduziert die echte Erfahrung nicht (der Fingerklick, die Geschwindigkeit bei mobiler Verbindung, der genaue Anzeigebereich) – nichts ersetzt das echte Smartphone in der Hand (Ihr eigenes, das von anderen). Andere Fallen: VERGESSEN SIE die Geschwindigkeit auf dem Smartphone (lange Bilder, eine Seite, die langsam lädt bei mobiler Verbindung – verkürzen Sie, unsere Anleitungen zu schnellen Websites), VERGESSEN SIE den Touch (zu kleine Knöpfe, die unbenutzbar sind, wenn man mit dem Finger klickt), und ÜBERFÜLLEN SIE das kleine Bildschirm (versuchen Sie alles hinzuzufügen, anstatt das Wesentliche zu priorisieren). Im Gegensatz dazu, vergessen Sie nicht den Computer (die Seite muss gut überall sein) – Mobile First, das bedeutet vom Mobile aus zu beginnen und zu bereichern, nicht das Ignorieren des großen Bildschirm. Der gute Reflex: denken Sie an das kleine Bildschirm, TESTEN Sie auf einem echten Smartphone, korrigieren Sie, was nicht funktioniert, und dann bereichern Sie für größere Bildschirme. Denken Sie an die Realität Ihrer Zielgruppe – nicht an Ihrem Designkomfort – das macht eine Seite, die TATSACHELLICH effektiv ist, wo Ihre Besucher sind.

Häufig gestellte Fragen

Was ist « mobile First »?

Es ist eine Gestaltungsmethode (mobile First), bei der man und gestaltet sein Website ZUNERST für das Smartphone, dann es für größere Bildschirme (Tablette, Computer) bereichert – das Gegenteil der alten Praxis, bei der man für den großen Bildschirm gestaltete und dann für das Smartphone reduzierte. Sie antwortet auf eine einfache Realität: Die Mehrheit der Besucher besucht heute Websites auf ihrem Smartphone. Das Denken und Gestalten für das kleine Bildschirm bedeutet, das Denken und Gestalten für die REALITÄT Ihrer Zielgruppe. Die Vorteile: eine Website, die TATSACHELLICH gut auf dem Smartphone funktioniert (keine Website, die für den Computer tassiert auf dem Smartphone, mit kleinem Text und zu kleinen Knöpfen), ein klarerer Nachrichten für alle Bildschirme (das kleine Bildschirm drängt auf Priorisierung), bessere SUCHBEGRIFFERFOLGE (Suchmaschinen bevorzugen Websites, die sich auf das Mobile ausrichten, Google indexiert die mobile Version zuerst) und eine gute Erfahrung überall (eine Website, die gut auf dem Smartphone funktioniert, ist in der Regel gut überall – das Gegenteil ist falsch). Mobile First ist sowohl ein GEIST (Denken Sie zuerst an das kleine Bildschirm, Priorisieren Sie das Wesentliche) als auch eine Technik: moderne Tools produzieren « responsive » Websites (die sich an alle Bildschirme anpassen), daher ist keine technische Kenntnis erforderlich. Denken Sie nicht nur auf Ihrem großen Bildschirm (denken Sie an den Bildschirm, den Ihre Besucher verwenden, nicht für Ihren Komfort), und vergessen Sie nicht den Computer (beginnen Sie vom Mobile aus und bereichern Sie, ignorieren Sie nicht den großen Bildschirm). Im Zeitalter, wo das Smartphone der Hauptbildschirm ist, ist Mobile First einfach die richtige Ansatz – denken Sie an das, wo Ihre Besucher wirklich sind.

Muss ich technisch sein, um eine mobile First-Website zu erstellen?

Nein. Die meisten modernen Tools zum Erstellen einer Website produzieren « responsive » Websites – die sich automatisch an alle Bildschirme anpassen – die technische Anpassung ist daher oft automatisch. Mobile First ist hauptsächlich ein GEIST, der ohne technische Kenntnisse zugänglich ist: denken Sie zuerst an das kleine Bildschirm (priorisieren Sie das Wesentliche, da Platz begrenzt ist), sorgen Sie für die LIESBARKEIT (großer Text) und den Touch (große und gut getrennte Knöpfe für den Finger), verkürzen Sie (schnelles Anzeigen, die Geschwindigkeit zählt noch mehr auf dem Smartphone), und TESTEN Sie auf einem echten Smartphone (der sicherste Weg, um Probleme zu erkennen – vertrauen Sie nicht nur auf das Vorschaubild Ihres Tools). Ihr Job ist es, mobile First zu denken und zu überprüfen, dass alles auf dem kleinen Bildschirm gut funktioniert. Schauen Sie auf Ihrem eigenen Smartphone auf Ihre Seite, durchlaufen Sie sie wie ein Besucher, korrigieren Sie, was nicht funktioniert: das ist für alle zugänglich.

Wie kann ich überprüfen, dass meine Website gut auf dem Smartphone funktioniert?

Das beste Testen: schauen Sie auf Ihrem ECHTEN Smartphone auf Ihre Seite (Ihr eigenes, und bitten Sie andere, es ebenfalls zu tun). Durchlaufen Sie sie wie ein Besucher und überprüfen Sie: ist der Text ohne Zooming lesbar? Sind die Knöpfe und Links groß genug und gut getrennt, um mit dem Finger zu klicken, ohne sich zu vertun? Führt das Menü gut? Sind die Formulare leicht zu füllen mit dem Finger? Sind die Bilder und Elemente korrekt angezeigt, ohne dass etwas überlaufen ist? Lädt die Seite schnell genug? Vertrauen Sie nicht nur auf das « mobile » Vorschaubild Ihres Erstellungs-Tools – es gibt eine Idee, aber es reproduziert die echte Erfahrung nicht (den Fingerklick, die Geschwindigkeit, der genaue Anzeigebereich) – nichts ersetzt das echte Smartphone in der Hand. Dieser einfache Test ist der sicherste Weg, um Probleme zu erkennen, wo die Mehrheit Ihrer Besucher sind.

Was man sich merken sollte

Denken Sie mobile First (mobile First), das bedeutet, dass Sie Ihr Website ZUNERST für das Smartphone gestalten, dann es für größere Bildschirme (Tablette, Computer) bereichern – das Gegenteil der alten Praxis. Die Grundlage ist einfach: Die Mehrheit der Besucher ist auf dem Smartphone – denken Sie zuerst für das kleine Bildschirm, das Denken und Gestalten für die REALITÄT Ihrer Zielgruppe. Die Vorteile: eine Website, die TATSACHELLICH gut auf dem Smartphone funktioniert (keine Website, die für den Computer tassiert auf dem Smartphone, mit kleinem Text und zu kleinen Knöpfen) – ein klarerer Nachrichten für alle Bildschirme (das kleine Bildschirm drängt auf Priorisierung) – bessere SUCHBEGRIFFERFOLGE (Suchmaschinen bevorzugen Websites, die sich auf das Mobile ausrichten, Google indexiert die mobile Version zuerst) – und eine gute Erfahrung überall (eine Website, die gut auf dem Smartphone funktioniert, ist in der Regel gut überall – das Gegenteil ist falsch). Um es ANWENDEN zu können: beginnen Sie mit dem ESSENTIEL (priorisieren Sie das Kernnachricht und die Hauptaktion), sorgen Sie für die LIESBARKEIT (großer Text) und den Touch (große und gut getrennte Knöpfe für den Finger), verkürzen Sie (schnelles Anzeigen, die Geschwindigkeit zählt noch mehr auf dem Smartphone), TESTEN Sie auf einem echten Smartphone (der sicherste Weg, um Probleme zu erkennen – vertrauen Sie nicht nur auf das Vorschaubild Ihres Tools), und dann bereichern Sie für größere Bildschirme. Es ist sowohl ein GEIST (Denken Sie zuerst an das kleine Bildschirm, Priorisieren Sie das Wesentliche) als auch eine Technik: moderne Tools produzieren « responsive » Websites (die sich an alle Bildschirme anpassen), daher ist keine technische Kenntnis erforderlich. Denken Sie nicht nur auf Ihrem großen Bildschirm (denken Sie an den Bildschirm, den Ihre Besucher verwenden, nicht für Ihren Komfort), und vergessen Sie nicht den Computer (beginnen Sie vom Mobile aus und bereichern Sie, ignorieren Sie nicht den großen Bildschirm). Im Zeitalter, wo das Smartphone der Hauptbildschirm ist, ist Mobile First einfach die richtige Ansatz – denken Sie an das, wo Ihre Besucher wirklich sind.