Es ist keine Überraschung, dass ein kürzlich veröffentlichter Bericht der UN - Agentur, der Internationale Telekommunikationsunion , sagte voraus, dass es auf dem Planeten mehr mobile Abonnements geben wird als Menschen innerhalb der nächsten 9 Monate. Die "Smartphone-Revolution" steht definitiv auf uns, und so ist das mobile Webdesign in den letzten Jahren explodiert.
Dies hat dazu geführt, dass Webentwickler sich mit dem Design mobiler Websites auseinandersetzen mussten, wenn sie konkurrieren und ihr Geschäft zukunftssicher machen wollen. Vor diesem Hintergrund habe ich mir einige Top-Tipps ausgedacht, um Entwicklern einen Ausgangspunkt zu geben, wobei einige Dinge zu beachten sind, bevor man fortfährt.
Ein kurzer Blick darauf, wie weit die mobilen Geräte seit der Einführung des iPads gekommen sind, wird bestätigen, dass die mobile Technologie eine sich schnell verändernde Industrie ist. Aus diesem Grund ist es ratsam, darüber nachzudenken, wie Sie zukunftssicheres Design entwickeln können.
Das bedeutet, dass es wichtig ist, mit den neuesten Trends Schritt zu halten, wenn Sie irgendwie sicherstellen wollen, dass die Website in ein paar Jahren funktionsfähig sein wird. Responsive Design ist im Moment natürlich der letzte Schrei und es ist wahrscheinlich, dass dies Teil Ihres Plans sein wird.
Es ist zwar davon auszugehen, dass die meisten Ihrer Besucher Smartphones haben werden, aber es ist eine Überlegung wert, dass dies nicht alles wird, und Sie müssen dies möglicherweise in das Design einarbeiten. Es lohnt sich, in der Planungsphase die Zielgruppe zu recherchieren, um sich mit den gebräuchlichen Geräten sowie dem Nutzerverhalten vertraut zu machen.
Mobile Web-Besucher greifen nicht unbedingt auf Webseiten von unterwegs zu, und das ist etwas, das man im Auge behalten sollte. Mobiles Browsen wird oft während des Wartens durchgeführt; im Zug, im Auto oder sogar auf dem Sofa zu Hause.
Dies bedeutet, dass es zu kontraproduktiv sein kann, das Design zu strippen, um es zu simpel zu machen. Wenn Sie eine Barebone-Site haben, auf der nicht viel Content verfügbar ist, könnte dies für das Publikum abschreckend sein, da Ihre Site nicht viel von echtem Nutzen bietet und nur als übergroße Werbebanner angesehen werden kann.
Mobile wird heutzutage genauso oft verwendet wie der Desktop für das Surfen im Internet. Denken Sie beim Designprozess daran und stellen Sie sicher, dass Ihre Website benutzerfreundlich und dennoch reich an Inhalten ist.
Die Optimierung von mobilen Websites ist auch wichtig, insbesondere für Zielseiten, da diese der Einstiegspunkt für die Website sind. Dies bedeutet, dass eine mobile Website für den Benutzer optimiert werden sollte, ebenso wie die Suchmaschine, um eine einfache Navigationserfahrung, klaren Text, einfache Ein-Klick-Formulare und relevante Meta-Informationen und Alt-Tags zu bieten.
Dateigrößen sollten in Bezug auf das Gewicht berücksichtigt werden, und auf den Zielseiten sollte ein starker Aufruf zum Handeln enthalten sein. Wenn Sie Formulare verwenden müssen, dann halten Sie sie so einfach wie möglich, mit so wenigen Eingabefeldern wie möglich, damit der Benutzer nicht frustriert wird und geht.
Das gleiche gilt für Aktionen; halte sie einfach und verwende sie nur wenn nötig. Während es vielleicht schön ist, ein schickes Navigationssystem zu haben, sollte man, wenn es unbrauchbar ist, eine hohe Absprungrate erwarten.
Wenn Tasten verwendet werden müssen, vergewissern Sie sich, dass sie den "Daumentest" bestehen, dh Sie sollten bequem einen Knopf mit Ihrem Daumen drücken können, ohne andere Inhalte zu treffen, die Sie zu einer unerwünschten Seite führen könnten.
Bei der Erstellung einer responsiven Website muss auch die Optimierung berücksichtigt werden. In letzter Zeit wurde viel darüber debattiert, wie reaktionsfreudiges Design das Internet verlangsamt und ob es im Wesentlichen den Verlust von responsiven Websites bedeutet. Es gibt jedoch bedingte Ladetechniken, mit denen eine Website beschleunigt werden kann, um sicherzustellen, dass Geräte nicht immer die vollständige Desktopversion der Site automatisch herunterladen.
CSS- und JavaScript-Ressourcen sollten komprimiert werden und es gibt reichlich Open-Source-Software, die dabei helfen kann. Beispielsweise, UglifyJS kann mit JavaScript verwendet werden, um Code zu komprimieren und Kompass kann verwendet werden, um saubereres Markup sowie Sprites und Erweiterungen zu erstellen, ohne viel Aufhebens und harte Arbeit.
Bei der Verwendung von Responsive Design müssen Sie zunächst das Raster und Ihre Haltepunkte definieren. Auch hier gibt es zahlreiche Werkzeuge online das kann Ihnen helfen, Spalten und ihre Breite und Rinnen zu definieren.
Einige Entwickler setzen Breakpoints basierend auf der Auflösung, aber dies ist nicht wirklich die beste Lösung, da es so viele mobile Geräte auf dem Markt gibt und sich die Auflösungen mit der Zeit ändern.
Dies bedeutet, dass Breakpoints eher auf Design und Inhalt als auf Auflösung basieren sollten. Um Haltepunkte und Raster zu testen, kann das Browserfenster während des Entwurfsprojekts verwendet werden, um zu sehen, wie sich Inhalte bei der Größenänderung verhalten.
Im Idealfall sollte es natürlich fließen und Sie können so viele Haltepunkte verwenden, wie Sie benötigen, um dies zu erreichen.
Nicht alle mobilen Betriebssysteme sind, wie Sie wissen, gleich aufgebaut. Daher lohnt es sich, die Richtlinien für die Entwicklung von Android und iOS sowie die Browser zu lesen, die für sie verwendet werden können.
Bedenken Sie, dass Benutzer auf verschiedenen Betriebssystemen surfen und einige ältere Versionen verwenden. Daher ist es hilfreich, sicherzustellen, dass die mobile Website rückwärtskompatibel ist. Hier ist es sinnvoll, sich gegebenenfalls die Analyse der Hauptwebsite anzusehen, da Sie sehen können, auf welche Geräte Ihre Zielgruppe auf die Website zugreift.
Natürlich können Sie nach Abschluss der Website auch Analysen durchführen, um notwendige Änderungen vorzunehmen und für die Zukunft zu lernen.
Wie wir alle inzwischen wissen, ist Content wieder der König des Webs und die Planung von Content-Modulen ist wichtig. Das Verhalten von Inhaltsmodulen muss definiert werden, um sicherzustellen, dass sie ordnungsgemäß angezeigt werden, wenn der Benutzer navigiert und Maßnahmen ergreift.
Dies bedeutet, dass Sie sich ansehen und definieren müssen, wie Inhalte angezeigt werden, wenn Sie zwischen einem Desktop- und einem mobilen Bildschirm wechseln, um zu bestimmen, wie die Module gestapelt und neu angeordnet werden.
In dieser Hinsicht ist es oft einfacher, dies in der Planungsphase zu fixieren. Machen Sie eine Skizze darüber, wie Sie sich Inhalt anzeigen lassen und wie Sie dies erreichen können.
Versuche jedoch, nicht zu sehr auf alles zu verzichten. Während Ihre Hauptseiten Drahtmodelle benötigen, muss nicht unbedingt jede einzelne Seite folgen. Erstellen eines Master-Sets für Bildschirmgrößen und Ausrichtung sollte wirklich ausreichen.
Baue zuerst einen Prototyp und teste gründlich, um sicher zu gehen, dass alle Aspekte funktionieren, während du mitgehst. Es ist auch ratsam, den Benutzer beim Testen im Auge zu behalten, um sicherzustellen, dass die Navigation einfach und vorzugsweise aus maximal drei Ebenen besteht. Versuchen Sie, jemanden zu finden, der nicht technologisch interessiert ist, aber verschiedene Geräte verwendet, um die Website zu testen.
Mobiles Webdesign ist eine notwendige Herausforderung, um sich als Designer zu verstehen, um dem Kunden einen kompletten Service zu bieten. Wie bei vielen Dingen im Leben ist einer der wichtigsten Aspekte die Planung, so dass Sie eine klare Vorstellung davon haben, wie Sie vorgehen sollen.
Eine effektive Planung und die Berücksichtigung des Benutzers helfen dabei, die meisten Hürden zu überwinden, denen Sie wahrscheinlich begegnen werden, und gründliche Tests werden den Rest aufheben. Denken Sie ansprechend, schnell und einfach, mit sehr nützlichen Inhalten und Sie können nicht zu weit falsch gehen.
Ausgewähltes Bild / Vorschaubild, mobiles Webbild über Shutterstock.