{"id":13145,"date":"2022-06-21T00:00:00","date_gmt":"2022-06-20T23:00:00","guid":{"rendered":"http:\/\/marketing.ch\/uncategorized\/mobile-first-was-macht-den-trend-so-bedeutend\/"},"modified":"2023-07-27T16:23:42","modified_gmt":"2023-07-27T14:23:42","slug":"mobile-first-was-macht-den-trend-so-bedeutend","status":"publish","type":"post","link":"https:\/\/marketing.ch\/digital-marketing\/mobile-first-was-macht-den-trend-so-bedeutend\/","title":{"rendered":"Mobile First &#8211; Was macht den Trend so bedeutend?"},"content":{"rendered":"\n<p><strong>Beim Stichwort Mobile Internet dachte man bisher als erstes an Responsive Design. Aufgrund der Entwicklung der Webnutzung hat sich der Trend aber mittlerweile in Richtung Mobile First verschoben. Denn schon im Jahr 2015 verzeichnete Google zum ersten Mal mehr Suchanfragen \u00fcber mobile Ger\u00e4te als \u00fcber Desktops. Darauf reagierte die wichtigste Suchmaschine 2016 mit einer Anpassung ihrer <a href=\"https:\/\/marketing.ch\/seo-search-engine-optimization-einfach-erklaert\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rankingkriterien<\/a>. Zun\u00e4chst wurde Mobile Friendliness zum Rankingfaktor, schliesslich bewertete Google den mobilen Index prim\u00e4r und crawlt seitdem die mobilen Versionen der Webseiten. Durch diese Reaktion hat sich der Trend noch erheblich verst\u00e4rkt.<\/strong><\/p>\n\n\n\n<p>Die Entwicklung folgt einem ver\u00e4nderten Userverhalten. Weltweit kamen im Jahr 2021 bereits rund 58 Prozent der Seitenaufrufe von mobilen Endger\u00e4ten. In Asien waren es sogar 70 Prozent. In Europa liegt der Vergleichswert zwar bei nur 54 Prozent, doch die Tendenz ist auch hier steigend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-was-versteht-man-unter-mobile-first\">Was versteht man unter Mobile First?<\/h2>\n\n\n\n<p>Als sich ein klarer Trend hin zur mobilen Internetnutzung abzuzeichnen begann, ver\u00e4nderten sich allm\u00e4hlich auch die Priorit\u00e4ten der Webdesigner*innen. Zun\u00e4chst boten sie den mobilen User*innen spezielle Unterseiten an, die mit einem \u201am\u2018 vor dem Domainnamen gekennzeichnet waren. Wer mit dem Smartphone online gehen wollte, konnte diese mobilen Seiten nutzen. Die Vorgehensweise erwies sich nicht als optimale L\u00f6sung, deshalb ging man zum Responsive Design \u00fcber, Webseiten wurden von nun an dynamisch gestaltet. Das Ziel war, alle Inhalte so zu designen, dass sie sowohl auf dem Desktop als auch auf dem Smartphone optimal zu nutzen sind. Aber auch diese L\u00f6sung brachte keine perfekte <a href=\"https:\/\/marketing.ch\/diese-7-usability-gesetze-fuers-webdesign-musst-du-kennen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Usability <\/a>hervor.<\/p>\n\n\n\n<p>Daraufhin kehrten die Webdesigner*innen ihre Priorit\u00e4ten einfach um und setzten die mobile Bedienbarkeit an die Spitze der Aufgabenstellung. <a href=\"https:\/\/marketing.ch\/mobile-marketing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mobile First<\/a> war geboren. Das Prinzip dahinter steht unter dem Motto \u201aso viel wie n\u00f6tig, so wenig wie m\u00f6glich\u2018. Man beschr\u00e4nkt sich bei der Programmierung auf das Wesentliche und entwirft zuerst am Smartphone-Bildschirm. F\u00fcr den Desktop wird dann alles etwas fl\u00e4chiger gestaltet.<\/p>\n\n\n\n<p>Webseiten werden also im Zusammenhang mit Mobile First einfacher strukturiert und gestalten sich dadurch ganz automatisch userfreundlicher. Davon profitieren auch die Nutzer*innen am Desktop. Funktionen wie beispielsweise JavaScript oder Flash-Anwendungen verlieren stark an Beliebtheit. Denn die modernen User*innen sind ungeduldig. Nach zwei bis drei Sekunden Ladezeit ist Schluss mit lustig und der Besucher bzw. die Besucherin klickt weiter. Und rund 80 Prozent der Online-Kund*innen kehren nach einer negativen Erfahrung nie wieder auf die Seite zur\u00fcck. Die Conversion-Rate einer Website h\u00e4ngt also massgeblich von den Ladezeiten ab. So kann dir Mobile First auch zu mehr Traffic verhelfen, unabh\u00e4ngig davon, wie sich deine Interessenten einw\u00e4hlen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-die-vorteile-von-mobile-first\">Die Vorteile von Mobile First<\/h2>\n\n\n\n<p>Mobile First ist eine Strategie, die beim Content ansetzt. Das bedeutet: Nur wirklich wichtige Inhalte kommen auf die Website. Anpassungen k\u00f6nnen sp\u00e4ter jederzeit noch vorgenommen werden. Und dank der schlanken Struktur kannst du deine Seite auch viel leichter an neue Entwicklungen adaptieren.<\/p>\n\n\n\n<p>Die Vorteile auf einen Blick:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Es gibt keine komplizierten Inhalte, die das Laden verlangsamen.<\/li>\n\n\n\n<li>Der Fokus der Betrachtenden liegt auf dem Produkt oder der Dienstleistung, die User*innen werden nicht mit anderen bunten Inhalten abgelenkt.<\/li>\n\n\n\n<li>Die Texte konzentrieren sich auf das Wesentliche und werden dadurch automatisch hochwertiger.<\/li>\n\n\n\n<li>Es gibt keine unn\u00f6tigen Inhalte mehr, was die Seite \u00fcbersichtlicher gestaltet.<\/li>\n\n\n\n<li>Die <a href=\"https:\/\/marketing.ch\/customer-journey-einfach-und-verstaendlich-erklaert\/\" target=\"_blank\" rel=\"noreferrer noopener\">Customer Journey<\/a> f\u00fchrt direkt zum Abschluss, der\/die Interessent*in wird nicht von \u00fcberladenen Seiten mit allzu vielen Men\u00fcpunkten zu abweichenden Klicks animiert.<\/li>\n\n\n\n<li>Die User*innen finden leichter, was sie suchen, und sparen Zeit.<\/li>\n<\/ul>\n\n\n\n<p>Mobile First zwingt die Programmierer*innen zum Abspecken des Designs. So verbleiben nur Inhalte auf der Website, die wirklich n\u00f6tig und f\u00fcr die Besucher*innen n\u00fctzlich sind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-mobile-first-so-gehst-du-vor\">Mobile First: So gehst du vor<\/h2>\n\n\n\n<p>Am besten wendet man die Mobile-First-Strategie schon beim Programmieren einer neuen Website an. Wenn das Motto \u201aweniger ist mehr\u2018 von Beginn an gilt, dann landen erst gar keine unn\u00fctzen Inhalte auf der Seite.<\/p>\n\n\n\n<p>Achte beim Design deiner neuen Website besonders auf folgende Punkte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00dcbersichtliche Gestaltung<\/li>\n\n\n\n<li>Klare Men\u00fcf\u00fchrung<\/li>\n\n\n\n<li>Optimale Ladezeiten<\/li>\n\n\n\n<li>Nicht zu viele und nur einfache Bilder<\/li>\n\n\n\n<li>Nur wirklich wichtige Inhalte<\/li>\n<\/ul>\n\n\n\n<p>Webdesigner*innen f\u00e4llt es wesentlich leichter, eine kleine mobile Website zu programmieren, die dann auf den Desktop \u00fcbertragen wird, als umgekehrt. Aber nat\u00fcrlich kannst du auch eine bestehende Seite entsprechend optimieren. Allerdings kann eine f\u00fcr den Desktop programmierte Online-Pr\u00e4senz nicht so einfach auf Mobilger\u00e4te \u00fcbertragen werden. Denn mobiles Surfen hat seine eigenen Gesetze. Hier z\u00e4hlen vor allem Usability und Geschwindigkeit.<\/p>\n\n\n\n<p>Diese beiden Ziele erreichst du mit folgenden Features:<\/p>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\">\n<li><strong>AMP (Accelerated Mobile Pages)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>AMP ist eine HTML-Version, die das Laden von Webinhalten auf mobilen Endger\u00e4ten beschleunigt. Google und Twitter haben dieses Projekt im Jahr 2015 gemeinsam gestartet und als Open-Source-Software konzipiert. Damit geht der Mobile-First-Ansatz noch weiter und wird zu User*in First. Denn mit Priorit\u00e4ten wie optimaler Lesbarkeit und rasanter Geschwindigkeit <a href=\"https:\/\/marketing.ch\/dein-verstaendlicher-guide-fuer-die-5-elemente-der-user-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">steht hier die User Experience im Vordergrund<\/a>. Zu erkennen sind mit AMP-Technik gestaltete Seiten am Blitz-Symbol. \u26a1<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PWA (Progressive Web Apps)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Auch dieses Feature wurde von Google initiiert. Es handelt sich um eine Mischform aus Website und App. Die hybriden Internetseiten werden \u00fcber einen Browser aufgerufen, weisen aber auch typische App-Eigenschaften auf. Sie k\u00f6nnen \u00e4hnlich interaktiv und intuitiv genutzt werden wie native Apps. Von Google k\u00f6nnen sie dennoch wie ganz normale Webseiten indexiert werden.<\/p>\n\n\n\n<p>PWAs bieten mehr Funktionalit\u00e4ten als AMP, sind aber genauso schnell und nutzerfreundlich. Beide Features k\u00f6nnen gut nebeneinander koexistieren. Zu empfehlen ist der Einstieg mit AMP, sp\u00e4ter k\u00f6nnen dann mit PWAs weitere Funktionen hinzugef\u00fcgt werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-content-optimierung-mit-mobile-first\">Content-Optimierung mit Mobile First<\/h2>\n\n\n\n<p>Mobile First zwingt zur Konzentration auf das Wesentliche. Dieser klare Fokus wirkt sich nat\u00fcrlich auch auf die Texte aus. Und die Lesbarkeit der Inhalte tr\u00e4gt massgeblich zur optimalen User Experience bei.<\/p>\n\n\n\n<p>Eine Mobile First Strategie verlangt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kurze, pr\u00e4gnante Texte, die den Inhalt auf den Punkt bringen.<\/li>\n\n\n\n<li>Treffende \u00dcberschriften, die den Inhalt erkennen lassen.<\/li>\n\n\n\n<li>\u00dcbersichtliche Strukturen mit schnell auffindbaren Men\u00fcpunkten.<\/li>\n<\/ul>\n\n\n\n<p>Von allen diesen Vorgaben profitieren auch die Desktop-User*innen. Eigentlich sollten der Fokus auf das Wesentliche und das Weglassen unn\u00f6tiger Features zu den selbstverst\u00e4ndlichen Priorit\u00e4ten aller Webdesigner*innen geh\u00f6ren. Gut f\u00fcr alle Internet-Nutzer*innen, dass der Mobile-First-Ansatz diesen Trend ins Rollen gebracht hat.<\/p>\n\n\n\n<p>Dennoch sollte sich jede*r Webseitenbetreiber*in eingehend \u00fcberlegen, welche Strategie seinen \/ihren Bed\u00fcrfnissen am besten entspricht. Denn ein kompletter Relaunch der bestehenden Online-Pr\u00e4senz ist aufwendig, zeitintensiv und kostspielig, muss sich also rechnen. Eine praktikable Alternative kann beispielsweise die separate mobile Website sein. Auch die Entwicklung einer eigenen App ist eine bedenkenswerte L\u00f6sung. Nicht f\u00fcr jedes Unternehmen ist Mobile First das Nonplusultra.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fazit-die-mobilen-nutzer-innen-erobern-das-internet\">Fazit: Die mobilen Nutzer*innen erobern das Internet<\/h2>\n\n\n\n<p>Die Generation Millennials kauft mobil. Weltweit generieren Online-Shops bereits mehr als 50 Prozent ihres Umsatzes \u00fcber mobile Endger\u00e4te. Damit ist der Desktop in diesem Ranking erstmals an die zweite Stelle ger\u00fcckt. Umfragen haben gezeigt, dass die modernen User*innen ihr Smartphone heutzutage als wichtigste Ressource betrachten, wenn es um Kaufentscheidungen geht. Der Markt h\u00e4ngt also immer mehr an mobilen Ger\u00e4ten. Und die Entscheidung zum Kauf steht und f\u00e4llt mit der User Experience auf dem Smartphone. <\/p>\n\n\n\n<p>Mobile First ist also ein Trend, der sich nicht mehr aufhalten l\u00e4sst und der immer mehr an Bedeutung gewinnt. Auch wenn es um das Suchmaschinen-Ranking geht, denn Google setzt voll und ganz auf die mobile Usability. Den Trend an sich kann also kein Unternehmen mehr ignorieren. Jedoch sollte jeder einen Strategieplan erstellen, bevor es wild ans mobile Optimieren geht. Bei der Programmierung einer neuen Website ist Mobile First ein alternativloses Ziel. Bei bestehenden Seiten sollte der zeitliche, technische und finanzielle Aufwand aber sehr gut gegen den tats\u00e4chlichen Nutzen abgewogen, die beste Alternative sorgf\u00e4ltig ausgew\u00e4hlt werden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beim Stichwort Mobile Internet dachte man bisher als erstes an Responsive Design. Aufgrund der Entwicklung der Webnutzung hat sich der Trend aber mittlerweile in Richtung Mobile First verschoben. Denn schon im Jahr 2015 verzeichnete Google zum ersten Mal mehr Suchanfragen \u00fcber mobile Ger\u00e4te als \u00fcber Desktops. Darauf reagierte die wichtigste Suchmaschine 2016 mit einer Anpassung [&hellip;]<\/p>\n","protected":false},"author":284,"featured_media":13146,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[173],"tags":[],"class_list":["post-13145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing"],"acf":[],"_links":{"self":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/13145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/users\/284"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/comments?post=13145"}],"version-history":[{"count":2,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/13145\/revisions"}],"predecessor-version":[{"id":19026,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/13145\/revisions\/19026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media\/13146"}],"wp:attachment":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media?parent=13145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/categories?post=13145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/tags?post=13145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}