Entwerfen von Webseiten für mobile Geräte

Wahrscheinlich haben Sie gesehen, wie das iPhone Webseiten umdrehen und erweitern kann. Es kann Ihnen die gesamte Webseite auf einen Blick anzeigen oder vergrößern, um den Text, an dem Sie interessiert sind, lesbar zu machen. In gewisser Hinsicht, da die iPhone verwendet Safari, Webdesigner sollten nichts Besonderes tun müssen, um eine Webseite zu erstellen, die auf dem iPhone funktioniert. Aber möchten Sie wirklich, dass Ihre Seite nur funktioniert – oder auffällt und glänzt?

Wenn du eine Webseite erstellen, müssen Sie darüber nachdenken, wer es sehen wird und wie es angezeigt wird. Einige der besten Websites berücksichtigen den Gerätetyp, auf dem die Seite angezeigt wird, einschließlich der Auflösung, der Farboptionen und der verfügbaren Funktionen. Sie verlassen sich nicht nur auf das Gerät, um es herauszufinden.

Allgemeine Richtlinien zum Erstellen einer Site für Mobilgeräte

• Testen Sie auf so vielen Geräten wie möglich. Das erste, was Sie tun sollten, ist, Ihre Website auf einem iPhone und auf vielen verschiedenen
  instagram viewer
  mobile Geräte oder Emulatoren, wie Sie können. Obwohl Sie Emulatoren für alle Ihre Tests verwenden können, geben sie Ihnen wirklich nicht das gleiche Gefühl wie beim Versuch, auf dem winzigen Bildschirm durch eine Website zu navigieren. Sie sollten so viel wie möglich auf tatsächlichen Geräten testen.
• Sorgen Sie dafür, dass Ihre Seiten in Würde herabgesetzt werden. Du kannst deine Seiten schreiben für Flash-fähig, Widescreen-Browser, aber stellen Sie sicher, dass die kritischen Informationen auch auf einem winzigen Monitor sichtbar sind, der keine speziellen Funktionen (wie Cookies, Ajax, Flash, JavaScript usw.) verarbeiten kann. Alles, was über XHTML Basic hinausgeht, wird über einige Mobiltelefone hinausgehen. Während die meisten Smartphones all diese Dinge bewältigen können, können andere mobile Geräte dies nicht.
• Erstellen Sie eine Wireless-spezifische Seite – und machen Sie sie leicht zu finden. Wenn Sie eine bestimmte Seite für Ihre Mobiltelefon- und Mobilfunkkunden erstellen möchten, stellen Sie sie zur Verfügung. Eine gute Möglichkeit besteht darin, den Link zur Wireless-Seite ganz oben in Ihrem Dokument zu platzieren und diesen Link dann mit dem Handheld-Medientyp für Nicht-Handheld-Geräte auszublenden. Schließlich kommen die meisten Leute sogar auf Mobiltelefonen auf Ihre Homepage – und wenn der Link zu Ihrer drahtlosen Seite nicht vorhanden ist, verlassen sie sie, wenn die Seite zu schwer zu verwenden ist.

Webseitenlayout für Smartphones

Das erste, was Sie beim Schreiben von Seiten für den Smartphone-Markt beachten sollten, ist, dass Sie keine Änderungen vornehmen müssen, wenn Sie nicht möchten. Das Tolle an den meisten verfügbaren Smartphones ist, dass sie Webkit-Browser (Safari auf iOS und Chrome auf Android) verwenden, um Webseiten anzeigen. Wenn Ihre Seite also in Safari oder Chrome in Ordnung aussieht, wird sie auf den meisten Smartphones gut aussehen (nur viel kleiner). Es gibt jedoch Dinge, die Sie tun können, um das Surferlebnis angenehmer zu gestalten:

• Denken Sie daran, dass der Bildschirm winzig ist. Smartphones werden all diese Spalten in dem winzigen Fenster verdichten, was das Lesen ohne Zoomen sehr erschweren kann. Die meisten Benutzer sind das Zoomen gewohnt, aber es kann ermüdend werden. Eine lange Textspalte ist leichter zu lesen.
• Teilen Sie die Seiten in kleinere Stücke auf. Es kann schwierig sein, lange Textabschnitte auf einem Mobiltelefon zu lesen. Wenn Sie sie also auf mehrere Seiten verteilen, sind sie leichter lesbar.

Links und Navigation auf iPhones

• Je kürzer die URLs sind, desto besser. Wenn Sie jemals versucht haben, eine URL auf einem Mobiltelefon einzugeben, wissen Sie, dass dies mühsam ist (außer vielleicht für Teenager, die es gewohnt sind, viele Textnachrichten zu senden). Selbst auf dem iPhone ist es mühsam, lange URLs einzugeben. Halten Sie sie kurz.
• Aber langer Linktext ist einfacher zu tippen. Wenn Sie sich auf einer Seite befinden, auf der mehrere separate Wörter mit verschiedenen Artikeln verknüpft sind, die alle direkt nebeneinander liegen, kann es sehr schwierig sein, ohne Zoom auf das richtige zu tippen. Viele Leute geben einfach auf und gehen woanders hin. Links mit 3 bis 5 Wörtern sind am Telefon einfacher anzuklicken als 1-Wort-Links.
• Platzieren Sie Ihre Navigation nicht ganz oben auf dem Bildschirm. Es gibt nichts ärgerlicheres, als durch Bildschirme und Bildschirme mit Links blättern zu müssen, um die gewünschten Informationen zu finden. Wenn Sie sich Webseiten angesehen haben, die für Mobiltelefone entwickelt wurden, werden Sie feststellen, dass als erstes der Inhalt und die Überschrift angezeigt werden. Darunter befindet sich dann die Navigation.
• Haben Sie keine Angst, Ihre Navigation zu verbergen.Navigationslinks ausblenden mit CSS oder JavaScript und lassen sie nur erscheinen, wenn der Benutzer danach fragt, ist eine Möglichkeit, die Seite für Smartphone-Benutzer zu vereinfachen.

Tipps für Bilder auf Smartphones

• Die Bilder müssen klein sein. Ja, Android und iPhones können Bilder vergrößern und verkleinern, aber je kleiner sie in Bezug auf die Abmessungen und die Downloadzeit sind, desto glücklicher werden Ihre Mobilfunkkunden sein. Optimieren von Bildern ist immer eine gute Idee, aber für Handyseiten ist es entscheidend.
• Bilder müssen schnell heruntergeladen werden. Bilder nehmen viel Platz auf Webseiten ein, wenn Sie sie auf einem Mobilgerät anzeigen. Und während sie oft sehr schön sind und die Seiten im Vollbild-Webbrowser besser aussehen lassen, sind sie auf einem mobilen Gerät oft im Weg. Wenn sich ein Smartphone-Benutzer im Mobilfunknetz befindet, ist das Letzte, wofür er bezahlen möchte, das Herunterladen einer Reihe riesiger Bilder oder Navigationssymbole.
• Platzieren Sie keine großen Bilder oben auf der Seite. Genau wie bei der Navigation kann es sehr mühsam sein, ganz oben auf der Seite darauf zu warten, dass ein Bild, das 3 bis 4 Bildschirmfüllungen benötigt, geladen wird. Und das ist auf Webseiten sehr üblich. Die einzige Ausnahme davon ist, wenn der Leser weiß, dass er beim Klicken ein Bild erhält, beispielsweise in einer Fotogalerie.

Was Sie beim Designen für Mobilgeräte vermeiden sollten

Es gibt mehrere Dinge, die Sie beim Erstellen einer für Mobilgeräte optimierten Seite vermeiden sollten. Wie oben erwähnt, wenn Sie diese wirklich auf Ihrer Seite haben möchten, können Sie dies tun, aber stellen Sie sicher, dass die Site ohne sie funktioniert.

• Blitz: Die meisten Mobiltelefone unterstützen Flash nicht, daher ist es keine gute Idee, es in Ihre drahtlosen Seiten aufzunehmen.
• Kekse: Viele Mobiltelefone haben keine Cookie-Unterstützung. iPhones haben Cookie-Unterstützung.
• Rahmen: Auch wenn der Browser sie unterstützt, denken Sie an die Abmessungen des Bildschirms. Frames funktionieren auf mobilen Geräten einfach nicht – sie sind sehr schwer oder unmöglich zu lesen.
• Tabellen: Verwenden Sie keine Tabellen für das Layout auf einer mobilen Seite. Und versuchen Sie, Tabellen im Allgemeinen zu vermeiden. Sie werden nicht auf jedem Mobiltelefon unterstützt (obwohl iPhones und andere Smartphones sie unterstützen) und Sie können seltsame Ergebnisse erzielen.
• Verschachtelte Tabellen: Wenn Sie eine Tabelle verwenden müssen, stellen Sie sicher, dass Sie sie nicht in einer anderen Tabelle verschachteln. Diese sind für Desktop-Browser schwer zu unterstützen und führen im besten Fall dazu, dass die Seite langsamer geladen wird.
• Absolute Maßnahmen: Mit anderen Worten, definieren Sie die Abmessungen von Objekten nicht in absoluten Größen (wie Pixel, Millimeter oder Zoll). Wenn Sie etwas als 100 Pixel breit definieren, kann es auf einem Mobilgerät die Hälfte des Bildschirms und auf einem anderen die doppelte Breite haben. Relative Größen (wie Ems und Prozentsätze) funktionieren am besten.
• Schriftarten: Gehen Sie nicht davon aus, dass einer der Schriftarten Sie es gewohnt sind, Zugriff auf die Mobiltelefone zu haben.