Internetseiten für’s Handy optimieren?

iPhone, iPad und Smartphones sind in aller Munde – und auch in immer mehr Hosentaschen zu finden. Daher stellt sich auch immer wieder die Frage:

  • Muss ich meine Website für das mobile Internet optimieren?

Dahinter versteckt sich aber eigentlich zwei andere Fragen:

  • Für welche Bildschirmauflösung wurde meine Website entworfen?
    und
  • Welche Hilfsprogramme werden benötigt, damit meine Website gut aussieht?

Denn es geht hierbei nicht nur um die Besitzer von Smartphones, sondern auch um diejenigen Besucher (also: potentielle Gäste und Kunden), die einen kleineren Monitor auf dem Schreibtisch stehen haben. Ich erkläre nicht, wie man die entsprechenden Lösungen realisiert, sondern ich zeige Ihnen, auf was Sie bei Ihrer Website achten sollten. Ich benutze in diesem Artikel übrigens den Begriff “Smartphone” um zu verdeutlichen, dass nicht nur das iPhone, sondern auch die Telefone anderer Hersteller für das mobile Internet geeignet sind.

Bildschirmauflösung

Screenshot: krone-neuenburg.de auf AndroidIdealerweise funtioniert eine Seite im Internet bei allen Bildschirmauflösungen und ohne jegliche Hilfsprogramme wie Flash oder JavaScript.

Eine Möglichkeit, um dies zu erreichen ist “Liquid Layout” (etwa: Fließendes Layout). Die Größen der Seitenelemente sind in Prozentsätzen angegeben. Hier wird die gesamte Bildschirmbreite genutzt. Verändert sich die Fenstergröße, so verändert sich auch das Aussehen der Seite. Diese Technik setze ich etwa bei meiner Hotel-Homepage ein. Besuchen Sie http://Krone-Neuenburg.de und verändern Sie die Größe des Browserfensters, um zu sehen, was damit gemeint ist. Wenn das Fenster zu klein wird (ab der 1024er-Auflösung) schieben sich allerdings einzelne Seitenelemente übereinander.

Auf einem modernen Smartphone sieht die nicht-optimierte Seite dann so aus, wie man das im nebenstehenden Bildschirmfoto sehen kann: Die Schrift ist klein aber lesbar. Viele Seitenelemente sind übereinandergeschoben. Dafür fehlt die ansonsten so schicke Diashow, was ein riesiges, leeres Feld auf dem viel zu kleinen Bildschirm hinterlässt- Nicht wirklich das, was man einem geschätzten Kunden zeigen will.

Android-Screenshot: Zimmerbuch.de Die Alternative: “Fixed Layout” (etwa: Festgelegtes Layout). Hierbei hat jedes Element eine vorgegebene Breite in Bildschirmpunkten, egal ob die ganze Seitenbreite auf den Monitor passt oder nicht. Um alles zu sehen muss man auf kleinen Bildschirmen hin- und her scrollen. Auf großen Bildschirmen hingegen bleibt ein Großteil der zur Verfügung stehenden Fläche ungenutzt. Smartphones haben inzwischen bequeme Zoommöglichkeiten, wodurch man sich schnell einen Überblick über die gesammte Seite machen kann, um dann den interessanten Ausschnitt schnell vergrößern zu können. Aber auch dies macht das Surf-Erlebniss nicht wirklich einfach.

Benötigte Hilfsprogramme

Als hätten wir mit den verschiedenen Bildschirmgrößen nicht schon genug Ärger! Es gibt noch einen weiteren großen Stolperstein für unseren mobilen Internetauftritt: Die oft benötigten Hilfsprogramme “Flash” und “JavaScript“. Während JavaScript meist für viele Kleinigkeiten wie aufklappende Menüs oder Vereinfachungen bei der Dateneingabe genutzt wird, ist Flash meist für Multimedia-Inhalte zuständig. Auch hiebei gilt für alle Websites – nicht nur für die Mobilen: Auch wenn weder Flash noch JavaScript bei einem Besucher nicht funktionieren, sollten die Seiten doch noch alle Informationen anzeigen und benutzbar bleiben. Wie oft doch genau gegen diese Regel verstoßen wird! Und was im “normalen Internet” von den meisten unbemerkt bleibt, kann auf dem Mobiltelefon zur totalen Unbrauchbarkeit führen. JavaScript wird von vielen (nicht allen) Internetfähigen Handy unterstützt. Flash ist noch die absolute Ausnahme!

Dateigrößen, Anzahl der Seitenelemente,…

Außerdem muss beim mobilen Zielpublikum bedacht werden, dass je nach Mobilfunkvertrag das herunterladen von großen Grafiken sehr teuer sein kann. Aber selbst wenn inzwischen Internet-Flatrates auch für’s Handy üblich sind, so ist die Verbindung nicht so schnell, wie man es vom Büro gewohnt ist. Der Gast muss am Handy auf jedes Foto extra lange warten. Daher ist es angebracht, mit grafischem Schnick-Schnack (der auf normalen PCs in unserer Branche durchaus wichtig ist!) zu sparen.

Fazit: Unsere Gäste haben eine spezielle Mobilversion unserer Website verdient!

Und diese Mobil-Website sollte folgende Kriterien erfüllen:

  • Selbstständige Erkennung: Wir die Seite auf einem PC oder einem Handy angezeigt?
  • Einspaltiges Layout mit variabler Breite
  • Keine Flash-Inhalte! Gar keine, null, niemals!
  • JavaScript ist so einzusetzen, dass es nicht zwingend notwendig ist.
  • Wenige, an die geringe Auflösung angepasste Grafiken
  • Wichtige Informationen sollten schnell (d.h. mit wenig “Klicks”) auffindbar sein.

Im Moment ist ein solcher Internetauftritt sicher noch nicht selbstverständlich. Um so besser! Damit kann man sich vom Mitbewerber abheben. Und bald werden immer mehr unserer Gäste – auch in ländlichen Gegenden – diesen Service von uns erwarten:

Android-Screenshot: Krone-Neuenburg.de + WPtouch

Tags:

Discuss: “Internetseiten für’s Handy optimieren?”

  1. 19. April 2010 at 10:27 #

    Macht Spaß hier zu lesen – freue mich auf weitere Artikel!

    • 20. April 2010 at 08:47 #

      Na klasse! Der erste Kommentar ist direkt SPAM. Ich habe nichts gegen Nennung der Firmenwebsite bei den Kommentaren. Aber ein richtiger Name (oder wenigstens eine ordentliche E-Mail Adresse) sollte schon dabei sein.

      Posted by stwaidele
  2. 14. August 2010 at 17:19 #

    schöner blog, schöner artikel – nur scheint der flattr link falsch zu sein, oder? egal – ich flattere sie trotzdem mal!

    Posted by aRb
  3. 14. August 2010 at 17:21 #

    hab den fehler gefunden: in ihrer url steht noch ne 52 mit drin, wenn das draussen ist, funktioniert auch der flattr link!

    lg, aRb

    Posted by aRb
  4. 31. October 2011 at 07:47 #

    url steht noch ne 52 mit drin, wenn das draussen ist, funktioniert auch der flattr link!

    Posted by Titanium Ring

Leave a Reply

Comments links could be nofollow free.