Beim Layout sollte beachtet werden, dass die Bildpunkte der meisten mobilen Geräte um einiges kleiner sind, als die der meisten Desktop-Displays. Das Layout sollte am besten testweise als Bild auf einem der Zielgeräte angesehen werden. Falls dieses nicht verfügbar ist, empfiehlt es sich, dass Layout bei 75% Zoom auf dem Rechner zu betrachten. Sind alle Elemente immer noch groß genug, sind sie auch auf dem Handy später groß genug.
Texte sollten auf mobilen Geräten generell mindestens eine Schriftgröße größer dargestellt werden, als z.B. auf einer Webseite. Es empfehlen sich folgende Größen:
Schriftgrößen kleiner 11 sollten vermieden werden. Für iOS Geräte ist es möglich, die Schriftgröße für zu lange Texte automatisch anzupassen (so dass der Text immer in den vorgegebenen Bereich passt). Passt ein Text nicht in einen vorgegebenen Bereich, wird dieser am Ende mit “…“ abgekürzt. Auf Android Geräten ist diese Funktion nicht verfügbar.
Ein Finger ist um einiges größer als ein Mauszeiger, dementsprechend müssen die Abstände zwischen klickbaren Objekten größer gewählt werden. Eine Größe von etwa 40px*40px sollte für einen klickbaren Bereich mindestens vorgesehen werden. Transparente Bereiche einer Grafik sind ebenfalls klickbar. Eine Grafik der Größe 30px*30px mit 5px transparenter Umrandung ist also ebenfalls möglich.
Die klickbaren Bereiche sollten sich nicht überschneiden, da es sonst passieren kann, dass ein falsches Objekt gewählt wird. Der „Klickpunkt“ ist nicht zwangsweise die Mitte des Fingers.
Bei HTML-Texten, die Links enthalten, sollte der Zeilenabstand und die Schriftgröße beachtet werden, so dass zwei Links in angrenzenden Zeilen trotzdem problemlos angewählt werden können. Der Abstand kann in diesem Fall etwas kleiner als die oben empfohlenen 40px*40px sein.
Auf den meisten mobilen Geräten sollten keine Bilder mit einer Größe über 1000px*1000px verwendet werden (z.B. für scrollbare Landkarten, etc.). Für Tablets verdoppelt sich diese Größe in etwa. Größere Bilder müssen gekachelt werden in mehrere kleinere. Große scrollbare Bereiche mit vielen Bildern (z.B. lange Tabellen) beeinträchtigen die Performance ebenfalls. Hier sollten wenige Bilder verwendet werden oder der scrollbare Bereich eingeschränkt werden.