Webseiten für Smartphones und Tablets optimieren

Webseiten für Spartphone und Tablets optimierenDa immer mehr User über ihr Smartphone und über ihr Tablet ins Internet gehen wird es immer wichtiger, die eigene Homepage für die Nutzung mit Smartphone und Tablet zu optimieren.

Die Umsetzung einer Homepage sowohl für Desktop-PCs als auch für Smartphones und Tablets ist mit einigen Schwierigkeiten verbunden. Aber besonders die Tablets und Smartphones sind inzwischen in aller Munde – und auch in immer mehr Hosentaschen zu finden. Als Blogger und Webseitenbetreiber stellt man sich dabei natürlich irgendwann die Frage:

  • “Muss ich meine Website für mobile Endgeärte optimieren, und wenn ja: wie?”

Auf diese Frage folgt vermutlich gleich die Nächste:

  • Wie mache ich das mit der Bildschirmauflösung?

Wenn man die eigene Webseite (aktuel nicht optimiert) auf einem Smartphone oder Tablet betrachtet fällt meist auf dass die Schriften kleiner sind und Seitenelemente übereinanderlappen. Deswegen möchte ich gleich auf die Bildschirmauflösung eingehen.

Die Bildschirmauflösung für Webseiten

Im besten Fall funtioniert eine Webseite im Internet in allen gänigen Bildschirmauflösungen und das ganz ohne Flash oder JavaScript.

Eine Möglichkeit um dies zu erreichen ist ein fließendes Layout zu verwenden, auch Liquid Layout genannt: Die Größen der Seitenelemente werden in Prozentzahlen angegeben und somit ganz egal welche Auflüsung, die gesamte Bildschirmbreite genutzt. Aber verändert sich die Fenstergröße, so verändert sich natürlich auch das Aussehen der Webseite.

Die zweite Option wäre ein 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.

Mobile Version einer Webseite

So sieht die Webseite aktuell auf einem Smartphone aus

Wenn man testen möchte wie die eigene Webseite aktuell auf einem mobilen Gerät aussieht, kann man das am Besten auf der Webseite von Opera tun.

Als hätten wir mit den verschiedenen Bildschirmgrößen nicht schon genug Ärger, kommen uns nun die häufig benötigten Programme “Flash” und “JavaScript“ in die Quere. Während JavaScript meist für viele simple Anwendungen wie zum Biespiel aufklappende Menüs genutzt wird, ist Flash meist für Animationen und Multimedia Inhalte zuständig.

Es gilt: Auch wenn weder Flash noch JavaScript bei einem Besucher nicht funktionieren, sollten die Seiten doch noch alle Informationen anzeigen und benutzbar bleiben. JavaScript wird von vielen Internetfähigen Handy unterstützt, Flash ist immer noch die absolute Ausnahme!

Plugins für Blog- und CMS-Systeme nutzen

Achja, die WordPress Nutzer haben es mal wieder leicht! Das bekannteste Mobile Theme Plugin für WordPress ist wahrscheinlich WPTouch. Installiert man ein Mobile-Theme Plugin, wird auf mobilen Geräten ein eigenes (vom Standard-Themedesign unabhängiges) Theme genutzt, welches speziell für mobile Geräte optimiert ist. Gerade für WordPress Blogger war WPTouch lange Zeit die eine sinnvolle Option, um die Inhalte auch für mobile Geräte optimiert anzuzeigen. Inzwischen bieten aber immer WordPress Themes eine mobile Version inklusive.

Dateigrößen für mobile Webseiten

Beim einem mobilen Zielpublikum muss man bedenken dass das herunterladen von großen Bildern und Grafiken sehr lange dauern kann, im schlimmsten Fall auch teuer ist. Der Besucher muss am Handy auf jedes Foto lange warten und wir wollen unsere Besucher selbstversänlich nicht vergraulen. Man sollte also Grafiken möglichst möglichst gering und klein halten.

Diese Kriterien sollte eine Mobile Website erfüllen:

  • Die selbstständige Erkennung: Wird die Seite auf einem PC oder einem Handy angezeigt?
  • Bilder und Grafiken sollten sich automatisch der Bildschirmgröße anpassen und die Dateigröße sollte klein bleiben
  • Einspaltiges Layout mit variabler Breite. Klassische 3-Spalten-Layouts sind insbesondere für die Nutzung mit Smartphones nicht so ideal.
  • Keine Flash-Inhalte, niemals! Flash läuft nicht auf IOS Systemen, also iPhone, iPad und iPod – damit ist ein Großteil der Besucher mit Apple-Geräten nicht in der Lage, Flash-Inhalte auf Webseiten anzusehen. Somit sollte zukünftig die Nutzung von Flash möglichst unterbleiben – egal wie tolle Effekte und Dinge sich damit realisieren lassen.
  • JavaScript ist so einzusetzen, dass es nicht zwingend notwendig ist.
  • Wichtige Informationen sollten schnell auffindbar sein

Dies sollte man bei einer Mobilen Webseite vermeiden:

  • Die Schrift sollte auch auf Smartphones nicht zu klein und damit lesbar bleiben, aber auf Desktop-PCs oder Tablets nicht riesengroß.
  • Dropdown Menüs sind für Smartphone & Co schwer nutzbar
  • Hoover-Effekte funktionieren auf Touchscreen-Geräten nicht wirklich, da ein Überfahren mit der Maus (wie beim Desktop-PC) mit einer Fingerbewegung auf dem Touchscreen von Smartphones nicht möglich ist.
  • Die Datenverbindungen von Smartphones und Tablets sind oftmals noch schlecht, die große Datenmengen verzögern den Lagevorgang der Webseite
  • Hintergrundmusik, Java-Animationen und Co. sollten bei Webseiten für Handys und Tablets vermieden werden

Tablets wie das Ipad und Ipad MiniFazit: Die Zukunft liegt ganz klar in den Mobilendgeräten, die Nutzung nimmt rasant zu und der gängige Desktop-PC wird immer weniger zum Surfen genutzt. Die Optimierung für mobile Geräte sollte absolute Priorität haben. Man stärkt nicht nur die Usability für die potenziellen Besucher, sondern kann sich auch von Mitbewerbern abheben denn mobile Webseiten sind heute noch nicht selbstverständlich.

Man sollte sich die Frage stellen: “Welche Merkmale und Angebote möchte ich meinen mobilen Besucher anbieten und welchen Wert haben die dargestellten Informationen eigentlich für sie?  Für die letztendlich einspaltigen Layouts bei Smartphones kommt dieser Aspekt ganz besonders zum Tragen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


1 × = eins

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>