\u201eMobile First\u201c und \u201eResponsive Design\u201c, was hei\u00dft das eigentlich?<\/p>\n
<\/p>\n
Was bedeutet “mobile First”?<\/h2>\n
\u201eMobile First\u201c ist eine Gestaltungsphilosophie, die Produktdirektor Luke Wroblewski ins Leben gerufen hat.<\/p>\n
Seine Idee war es, anders als bis dahin \u00fcblich, Websites nicht prim\u00e4r f\u00fcr station\u00e4re PCs sondern gleich f\u00fcr mobile Endger\u00e4te wie Smartphones oder Tablets zu gestalten.<\/p>\n
Diese Philosophie ist nicht mit \u201eResponsivem Webdesign\u201c (kurz: RWD) zu verwechseln.<\/p>\n
Darunter versteht man die Idee, dass eine Website sich flexibel an den Nutzer anpassen soll, also bei gleicher Code- und Gestaltungsbasis auf Endger\u00e4ten mit verschiedenen Displaygr\u00f6\u00dfen und Anforderungen nutzbar bleiben muss. Es gibt dabei also nur ein einziges Template, das automatisch erkennt, welches Ger\u00e4t benutzt wird und sich diesem dann selbstst\u00e4ndig und dynamisch anpasst. Ein Beispiel daf\u00fcr ist die Website von Usersnap.<\/a><\/p>\n Responsive Design: Anpassung der Seite auf Tablet, Smartphone und Desktop-PC – Quelle: IronShark<\/em><\/p>\n Responsives Webdesign ist aber nur eine von vier verschiedenen M\u00f6glichkeiten<\/strong>, f\u00fcr seine Zielgruppe mobil besser erreichbar zu sein.<\/p>\n Andere Optionen sind die Entwicklung einer nativen App f\u00fcr ein bestimmtes Betriebssystem, einer Web-App, also einer speziell programmierten Website, die \u00fcber alle Endger\u00e4te mit Browser genutzt werden kann oder einer f\u00fcr die mobile Nutzung optimierten \u201eExtra-Website\u201c.<\/p>\n Diese wird meist nach der eigentlichen Website entwickelt. Wenn man von einem mobilen Endger\u00e4t dann auf die Domain zugreifen will, wird man auf die mobile Variante der Seite umgeleitet.<\/p>\n Alle diese M\u00f6glichkeiten haben Vor- und Nachteile. Jeder mit einer eigenen Webpr\u00e4senz muss selbst entscheiden, welche Option ihm am meisten zusagt. Bei einer App ist man h\u00e4ufig von App Stores abh\u00e4ngig und hat einen relativ hohen st\u00e4ndigen Pflegeaufwand. Allerdings kann sie den Nutzern im Vergleich zur Website noch (mobilen) Mehrwert bieten. Der Relaunch einer Website im responsiven Design<\/a> erfordert dagegen nur anf\u00e4nglich etwas Aufwand, ist in der Pflege aber einfacher, weil man nur ein Backend betreuen muss.<\/p>\n Beispiel f\u00fcr Responsive Design – Quelle: IronShark, Kundenwebsite<\/em><\/p>\n Da stellt sich die Frage: Wieso muss ich diesen Aufwand denn \u00fcberhaupt betreiben? Was bringt mir \u201eMobile First<\/a>\u201c?<\/p>\n Ganz einfach: Besucher und Kunden!<\/p>\n In den letzten Jahren ist die Anzahl der mobilen Internetnutzer extrem angestiegen. Sogar zu Hause nutzen immer mehr Menschen Smartphones und Tablets zum Surfen oder Shoppen, weil es handlicher und bequemer ist. Verschiedenen Prognosen zu Folge wird bis sp\u00e4testens 2020 mehr als die H\u00e4lfte des online-Umsatzes \u00fcber mobile Endger\u00e4te generiert werden. H\u00f6chste Zeit also, vor allem f\u00fcr Webshop-Betreiber, sich mit dem \u201eMobile First\u201c Gedanken anzufreunden. Nur an was muss man alles denken, bevor man \u201emobil geht\u201c?<\/p>\n Egal ob gro\u00dfes Unternehmen mit umsatzstarkem Webshop oder kleiner Blog \u2013 bevor ich meine Webpr\u00e4senz f\u00fcr mobile Nutzer optimiere, sollte ich mir selbst einige Fragen stellen. So findet sich nicht nur leichter die richtige Strategie f\u00fcr eine mobile Optimierung, sondern der erste Schritt in Richtung Planung ist damit auch schon getan:<\/p>\n Je nachdem, wie man diese Fragen beantwortet, muss eine mobile Optimierung ganz individuell erfolgen. Bei der Entscheidung, ob eine App oder der Relaunch der Website im responsiven Webdesign die bessere Wahl ist und welche Features sinnvoll sind kann eine professionelle Agentur (wie z. B. IronShark) helfen. Wenn der erste Plan steht, geht die Optimierung aber erst richtig los!<\/p>\n Hat man sich daf\u00fcr entschieden, die eigene Webpr\u00e4senz selbst f\u00fcr die mobile Nutzung anzupassen, gibt es einige wichtige Aspekte zu beachten. Nat\u00fcrlich muss die Displaygr\u00f6\u00dfe des Anzeigeger\u00e4ts bedacht werden.<\/p>\n Grafiken und Schriftgr\u00f6\u00dfen m\u00fcssen auch auf kleinen Displays noch gut lesbar sein und sich \u2013 im Falle einer responsiven Seite \u2013 selbstst\u00e4ndig anpassen.<\/p>\n Auch sollte man immer die verf\u00fcgbare Eingabemethode<\/strong><\/em> bei Textfeldern (Maus, Touch, Sprache) mit angleichen.<\/p>\n Lange Aneinanderreihungen von Suchw\u00f6rtern auf einem Touchscreen einzugeben ist beispielsweise einfach anstrengend und schreckt Nutzer ab! Schlie\u00dflich sollte auch die Leistungsf\u00e4higkeit des Ger\u00e4ts und die durchschnittliche Internetverbindung immer im Hinterkopf behalten werden: Je langsamer eine Seite l\u00e4dt, umso schneller springt ein Nutzer wieder ab. Um die einzelnen Schritte zu betrachten helfen verschiedene Tools wie der Response Viewer.<\/p>\n Oft kommt es bei der Anpassung im eigenen Team oder mit einer Agentur aber trotzdem zu Schwierigkeiten.<\/p>\n![\"mobile](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/Mobile-First.png\")
<\/p>\n\u201eMobile First\u201c \u2013 Welche M\u00f6glichkeiten gibt es?<\/h2>\n
![\"mobile](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/Iron-Shark.png\")
<\/p>\nWieso ist \u201eMobile First\u201c so wichtig f\u00fcr Websites und Webshops?<\/h2>\n
Wor\u00fcber muss ich vor einer mobilen Optimierung nachdenken?<\/h2>\n
\n
Was beim \u201egoing mobile\u201c beachtet werden sollte<\/h2>\n
![\"gesa](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/index.jpg\")
<\/p>\n