Smartphones und Tablets


 

Webseiten für die Nutzung mit Smartphones und Tablets optimieren
 
Da immer mehr User über ihr Smartphone und über ihr Tablet ins Internet gehen und Webseiten ansurfen, wird es immer wichtiger, die eigene Homepage für die Nutzung mit Smartphone und Tablet zu optimieren. Wir geben Ihnen einige Informationen und Links, die Ihnen bei der Anpassung Ihrer bestehenden Seite (falls diese nicht schon für die mobile Nutzung optimiert ist) helfen kann. Zudem gibt es Tipps für Neueinsteiger in diesem Thema.
 
Die Umsetzung einer Homepage sowohl für Desktop-PCs als auch für Smartphones und Tablets ist mit einigen Schwierigkeiten verbunden:
 
Flash läuft nicht auf 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...
Bilder sollten sich automatisch der Bildschirmgröße anpassen und die Dateigröße der Bilddateien sollte im Rahmen bleiben
Die Schrift sollte auch auf Smartphones nicht zu klein und damit lesbar bleiben, gleichzeitig auf Desktop-PCs oder Tablets nicht riesengroß sein.
Die Navigation auf dem Smartphone ist eine ganz andere als auf dem Desktop-PC
Verschachtelte Menüs und umständliche Dropdown-Listen 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) bei der Fingerbedienung auf dem Touchscreen eines Handys nicht möglich ist.
Die Datenverbindungen von Smartphones und Tablets besonders in den Handynetzen sind oftmals schlechter als DSL-Verbindungen. Von daher sollten die Webseiten nicht mit ausufernden Datenmengen bestückt sein, die das Laden verzögern.
Da die Nutzung über mobile Geräte rasant zunimmt und der Desktop-PC immer weniger zum Surfen genutzt wird, sollte für eine zukünftig erfolgreiche Webseite die Optimierung für mobile Geräte absolute Priorität haben.
Jeder Schnickschnack, der hinter einer dicken DSL-Leitung ganz lustig sein mag (z.B. Hintergrundmusik, Java-Animationen, Tunnelwebseiten etc.) sollte bei Webseiten für Handys und Tablets unterbleiben!
Möglichst ein einspaltiges Layout insbesondere für Smartphones. Klassische 3-Spalten-Layouts sind insbesondere für die Nutzung mit Smartphones nicht so ideal.
Wenn Sie testen wollen, wie Ihre Webseite aktuell auf einem mobilen Gerät aussieht, können Sie dies auf der Webseite von Opera Mini tun. Hier gibt es eine Testumgebung, die auch auf dem Desktop-PC funktioniert:
 
de.opera.com/developer/tools/mini
 
Nachfolgend zeigen wir Ihnen verschiedene Lösungsansätze für die Optimierung von Webseiten für mobile Geräte:
 
Nutzung eines Homepage-Baukastens, der auch für mobile Geräte optimiert ist
 
Die einfachste Erstellung einer für Smartphones, Tablets und Desktop-PC optimierten Webseite ist sicherlich die Nutzung eines Homepage-Baukastens, der diese Optimierung von Haus aus mitbringt. Die Inhalte der Webseite pflegen Sie bequem z.B. am Desktop-PC im Browser, die Nutzer können mit Smartphone, Tablet und Desktop-PC immer alle Inhalte gut und leicht erreichen. Eine solche Plattform bietet z.B. 1&1 mit der DO-IT-YOURSELF-Homepage:
 
 1&1 DO-IT-YOURSELF - die 1&1 DO-IT-YOURSELF Homepage ist ein fertig gehostetes CMS inkl. Domain, eMail-Adresse, Gästebuch, Besucherzähler und vielem mehr. Sie können unter verschiedenen Designs auswählen, z.B. für die private Variante zur Geburt Ihres Kindes, zur Hochzeit etc... Bei der Firmenvariante finden Sie viele Branchenvorlagen. Die DO-IT-YOURSELF-Homepage ist auch für Smartphones und Tablets optimiert!
Ein Homepage-Baukasten ist aber nicht jedermanns Sache. Deshalb nachfolgend weitere Möglichkeiten.
 
Nutzung einer Dreamweaver-Erweiterung
 
Wir standen selbst vor der Aufgabe, für die Baumschule Helmers eine Webseite zu erstellen, die überwiegend für Smartphones optimiert ist. Mit der Einführung von Pflanzen-Bildetiketten mit QR-Codes im Verkauf mussten auch die dazu passenden Informationen übers mobile Internet abrufbar sein. Da die Pflanzen im Gartencenter verkauft und dort der Kunde sein Smartphone zum Lesen des QR-Codes nutzen soll, mussten auch hierfür die Webseiten optimal gestaltet sein.
 
Da wir ausschließlich Dreamweaver zum Erstellen unserer Webseiten nutzen und schon positive Erfahrungen mit Project Seven als Lieferant für gute Dreamweaver Erweiterungen hatten, kam bei der Umsetzung des Projekts wieder eine Erweiterung von www.projectseven.com in Frage.
 
 www.projectseven.com/products/templates/pagepacks/cssbuilder/index.htm - CSS Page Builder Magic - diese Dreamweaver-Erweiterung baut Ihnen automatisch eine Webseite, die für die Nutzung über Desktop-PCs und mobile Geräte optimiert ist. Unser fertiges Projekt Pflanzenmanufaktur können Sie sich hier als Beispiel ansehen: www.pflanzenmanufaktur.de.
Nutzung eines PHP-Scripts
 
Um Ihre Webseite an die Welt des mobilen Internets anzupassen, gibt es einen Anbieter, der ein passendes PHP-Script bereit stellt:
 
 www.ads-content.de - ein PHP-Script zum Erstellen einer Homepage-Version für das mobile Internet
 
Weitere Webseiten mit Informationen zur Optimierung von Webseiten für die Nutzung auf mobilen Geräten:
 
aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete - Informationen bei Selfhtml zu via CSS angepassten Inhalten für mobile Geräte
www.drweb.de/magazin/webinhalte-fur-smartphones-und-pocket-pcs-aufbereiten - Informationen bei Dr. Web (Archiv) zum Thema Webinhalte für Smartphones und Pocket-PCs aufbereiten
www.homepage-faqs.de/index.php?site=hp-html-wml-wap-seiten-fuer-mobiltelefon
www.imeister.de/blog/apple-ipad/webseiten-fur-iphones-und-ipads-optimieren
klickkomplizen.de/blog/online-marketing/tipps-fur-das-optimieren-von-mobile-websites
www.startmobile.de - auf startmobile.de (gehört übrigens zu Google) geht es darum, ob Ihre Webseite bereits fit für das mobile Internet ist. Sie können Ihre bestehende Webseite einem mobilen Fitnesstest unterstellen. Sie erhalten eine mobile Vorschau Ihrer Webseite, ordnen Ihre Webseite in eine passende Kategorie ein und beantworten einige Fragen zur Webseite. Am Ende bekommen Sie einen Bericht angezeigt oder auf Wunsch auch zugemailt. Der Bericht enthält Tipps speziell zu Ihrer Webseite, aber auch Best Practices für mobile Webseiten, d.h. wichtige Tipps und Anforderungen an Webseiten bei der Anzeige auf Smartphone & Co. Unter der Rubrik Webseite erstellen finden Sie Anbieter speziell für die Erstellung mobiler Webseiten.
www.toolboks.de/professionelle-websites/webseite-fuer-ipad-optimieren.html
validator.w3.org/mobile - hier gibt es den W3C mobileOK Checker - der Checker prüft, ob Ihre Webseite für die Nutzung mit mobilen Geräten optimiert ist. Als Ergebnis erhalten Sie einen Prozentwert, in wie weit Ihre Seite schon optimiert ist und Hinweise, wo es noch Probleme gibt. meine-erste-homepage.com erreicht z.B. 0% - die von uns optimierte Webseite pflanzenmanufaktur.de erreicht immerhin 74%...
www.youtube.com/watch?v=NoHe8feMDv0 - hier gibt es ein Video-Tutorial von HTMLworld bei dem der Autor wesentliche Dinge zur Erstellung von Webseiten für Smartphones erläutert.
www.zuellich.de/tutorials/css-fuer-smartphones - CSS für Smartphones
Wir wissen, dass wir gerade bei der Optimierung von Webseiten für Smartphones und Tablets am Anfang der Entwicklung stehen. Wir bitte daher alle Leser, die Links und Tipps für uns haben, uns diese zukommen zu lassen, zum Beispiel im folgenden Kommentarfeld etwas weiter unten. Alternativ können Sie uns die Informationen auch über unsere Rubrik Seite anmelden zukommen lassen. 
 
Vielen Dank für Ihre Mitarbeit!
 
Gratis Homepage von Beepworld
 
Verantwortlich für den Inhalt dieser Seite ist ausschließlich der
Autor dieser Homepage, kontaktierbar über dieses Formular!