Tipps zum Erstellen von Webseiten für Mobiltelefone

Die Breite der mobilen Seite sollte am besten auf 240 Pixel begrenzt werden, da so eine Reihe von Vorgängen ausgeführt werden können, ohne den Bildschirm zu bewegen. Für das Projekt unseres Unternehmens wurde ein Hintergrundbild mit einer Größe von 240 x 420 verwendet. Das hat tatsächlich einen Nachteil. Ich muss die Höhe jeder Seite innerhalb von 420 kontrollieren, sonst sieht es hässlich aus, wenn es den Grenzwert überschreitet.

Weder normale Mobiltelefone noch Smartphones scheinen js zu unterstützen. Funktionen wie <a href="javascript:history.back()"> und "alert()" werden nicht unterstützt. Darüber hinaus unterstützen Mobiltelefone den Stil von „<input type="button">“ nicht sehr gut. Derselbe Code weist je nach Breite einen gewissen Breitenunterschied zwischen dem Browser und dem Mobiltelefon auf. Daher schlage ich vor, möglichst auf Schaltflächen zu verzichten. Sie können stattdessen Text-Hyperlinks oder kleine Symbole verwenden.

Für Listenseiten ist es am besten, table statt ul li oder p+space zu verwenden. Einerseits dient es dem Schriftsatz, andererseits kann man, wenn die Elemente in einer Spalte zu lang sind, "table tr td{word-break:break-all;}" verwenden. Die anderen beiden Lösungen können den String nur kürzen. Aus meiner Sicht ist das Kürzen des Strings natürlich eine gute Wahl, da die Höhe meiner Seiten fest ist.

Es besteht immer noch ein gewisser Bedarf an großen Bildern. Navigationskarten können beispielsweise ein blendendes Gefühl vermitteln, aber die Bilder dürfen nicht zu groß sein und müssen innerhalb von 10 KB liegen. Die Navigationskarte unseres Unternehmens verwendet eine Seite, die der von Lenovo-Mobiltelefonen ähnelt, und zwar wie folgt:

Die Details mobiler Webseiten können weitaus geringer sein als die normaler Webseiten. Zumindest müssen sie nur auf der mobilen Seite weitergegeben werden, ohne dass IE6, 7, 8 oder andere Browser erforderlich sind. Es bedarf jedoch dennoch einiger Überlegungen, damit es gut aussieht.