Hinweis: Der folgende Artikel hilft Ihnen dabei: 10 hervorragende Tools zum Testen Ihrer Website auf Mobilgeräten
Mit den ständig steigenden Verkäufen von smartphones Und der aufkeimende Tablet-Markt beginnt in die Höhe zu schießen, gepaart mit einem weitaus besseren Zugang zu robusteren mobilen Datennetzen, haben unsere Nutzer nun auf vielfältige neue Arten Zugriff auf das Internet. Die große Auswahl an mobilen Geräten, die heutzutage zum Surfen im Internet verwendet werden, bedeutet, dass Sie bei der Gestaltung Ihrer responsiven Website wirklich darüber nachdenken müssen, Ihre Website mobilkompatibel zu machen. Aber wie gehen Sie dabei vor?
Das Testen Ihrer Website auf Mobilgeräten kann aufgrund der großen Anzahl unterschiedlicher Mobilgeräte zeitaufwändig und teuer sein. Keine Angst, denn es stehen Ihnen einige praktische Tools zur Verfügung, mit denen Sie sicherstellen können, dass Ihre Website im mobilen Web ordnungsgemäß dargestellt wird. In diesem Artikel werden 10 solcher Tools vorgestellt und besprochen.
1. iPhoney
Als ausgezeichneter kostenloser iPhone-Tester ist iPhoney nicht gerade ein Emulator, sondern ermöglicht Entwicklern die Erstellung von 320 x 480 Pixel großen Websites für die Verwendung auf dem iPhone. Damit können Sie Bilder und Code pixelgenau testen Apple-Safari-basierte Umgebung mit allen normalen Funktionen, einschließlich Hoch- und Querformat, Vollbild, Zoom und Plugins.
2. W3C mobileOK Checker
Dieser Checker ist ein webbasiertes automatisiertes Validierungstool, das prüft, wie mobilgerätefreundlich Ihre Website ist. Die Tests werden gegen die geprüft W3C mobileOK-Basistests Vom W3C entwickelte Spezifikation.
3. iPad-Peek
Mit diesem praktischen webbasierten Tool können Sie sehen, wie Ihre Websites aussehen, wenn sie auf dem iPad gerendert werden. Es wird empfohlen, einen WebKit-basierten Browser zu verwenden, z Apple Safari oder Google Chrome um eine möglichst genaue Simulation zu haben – oder zumindest einen CSS3-fähigen Browser, der Transformationseigenschaften (wie Opera) unterstützt, weil er diese zum Rendern der Seite im Hochformat verwendet.
4. Ändern Sie das Headers-Add-on für Firefox
Es gibt Add-ons für Firefox, die die an Server gesendeten Daten so manipulieren können, dass es so aussieht, als würde der Benutzeragent auf einem mobilen Gerät surfen, auch wenn dies nicht der Fall ist. Dazu benötigen Sie ein Add-on namens Modify Headers (für Firefox). Sobald Sie dieses Add-on heruntergeladen und installiert haben, sollten die neuen Optionen Extras > Standardbenutzeragent und Extras > Header ändern in Ihrem Browser erscheinen.
Um das Surfen auf einem Mobilgerät zu emulieren, müssen Sie den User Agent Profile (UAProf)-Wert Ihres Mobilgeräts finden, den Sie mit einer schnellen Google-Suche nach „User Agent“ gefolgt vom Modell Ihres Telefons finden können (z. B. siehe Google-Ergebnisse für „Benutzeragent iPad“). Alternativ können Sie hier vorbeischauen Liste der UAProf-Werte.
Sobald Sie den UA-Profilwert für das gewünschte Telefon gefunden haben, geben Sie ihn in das Dialogfeld „Header ändern“ ein, und schon werden Sie sehen, wie das Surfen von diesem Gerät aus funktioniert. Für Google Chrome, können Sie die User-Agent Switcher-Erweiterung ausprobieren. Probieren Sie es aus, um eine browserunabhängige Desktop-Anwendung zu erhalten, die mit praktisch jeder internetfähigen App funktioniert Fiddler Web Debugger Damit können Sie unter anderem HTTP-Anfragen ändern.
5. Adobe Device Central CS5
Als Teil der neuesten Adobe Creative Suite emuliert Device Central die Bedienung mobiler Geräte auf Ihrem Desktop, sodass Sie HTML und Flash bequem von Ihrem Desktop aus testen können. Um eine Seite oder Site zu öffnen, wählen Sie Geräteprofile > Geräte durchsuchen, klicken Sie dann mit der rechten Maustaste und wählen Sie . Nachdem Sie nun ein Gerät hinzugefügt haben, gehen Sie einfach zu Datei > Öffnen (für lokale Tests) oder Datei > URL öffnen (für Remote-Tests).
Obwohl es alles andere als kostenlos ist, haben Sie als professioneller Designer oder Entwickler eine hohe Chance, auf die kreative Anwendungssuite von Adobe zuzugreifen.
6. Google Mobilizer
Google Mobilizer ist ein einfaches Web-Tool, mit dem Sie eine Webseitenadresse eingeben und die Seite dann für das mobile Internet geeignet machen können, indem der Inhalt auf das Wesentliche reduziert wird. Dies ist ein hervorragendes Tool, um zu sehen, wo Sie Leistungsoptimierungen auf Ihrer Website vornehmen können.
7. Gomez
Der mobile Bereitschaftstest von Gomez gibt Ihnen eine Punktzahl zwischen 1 und 5, basierend auf einer Analyse von über 30 bewährten mobilen Webentwicklungstechniken, die von der Verwendung von Stylesheets (z. B. Medienabfragen) bis hin zu Caching-Techniken und standardkonformem Code reichen. Die Ergebnisse werden in einem leicht verständlichen Dokument angezeigt, das Ratschläge zur Verbesserung Ihrer Website bietet.
Um Ihre Website testen zu können, müssen Sie leider eine Reihe von Informationen eingeben, darunter Ihre E-Mail-Adresse, Ihr Land, Ihre Postleitzahl und Ihre Telefonnummer.
8. MobiReady
Ähnlich wie Gomez ist MobiReady eine weitere Online-Testseite, auf der Sie eine URL eingeben können, um eine Reihe von Bewertungen durchzuführen, darunter Seitentest, Markup-Test und Site-Test der Webseite. Dies ist eine etwas detailliertere Version von Gomez oben und bietet eine umfassende Testergebnisseite, einschließlich dotMobi-Konformität, W3C mobileOk-Tests, Geräteemulatoren, detaillierte Fehlerberichte, HTTP-Tests und einen Code-Checker. Allerdings sind die Ergebnisse nicht so prägnant wie die von Gomez, was ein Nachteil ist, wenn es darum geht, Ihre Informationen Ihren weniger technisch versierten Kunden/Arbeitgebern zu präsentieren.
9. DotMobi-Emulator
Der dotMobi-Emulator bietet Ihnen eine Live-Vorschau Ihrer Website von einer (um ehrlich zu sein, ziemlich kleinen) Auswahl verschiedener Mobiltelefone. Dieses mobile Testtool eignet sich hervorragend, wenn Sie Ihre Seite auf älteren Mobilgeräten testen müssen. Was potenzielle Benutzer dieses Tools ärgern kann, ist, dass es das Java-Browser-Plugin benötigt, damit es funktioniert.
10. Opera Mini-Simulator
Mit über 120 Millionen smartphones verkauft, auf dem Opera vorinstalliert ist[1] und eine Edition, die für fast jedes Betriebssystem verfügbar ist und sicherstellt, dass Ihre Website darauf funktioniert Opera Mini (die mobile Version des Opera-Webbrowsers) ist eine gute Praxis, die Sie in Ihren Testworkflow integrieren können. Glücklicherweise hat uns Opera dazu verpflichtet, einen kostenlosen webbasierten Emulator zum Testen und Bewerten Ihres Webdesigns auf einem mobilen Gerät anzubieten, das Opera Mini verwendet. Für die Funktion dieses Tools ist das Java-Browser-Plugin erforderlich.
Da in vielen Branchen mittlerweile der Großteil des Datenverkehrs über mobile Geräte statt über Desktops erfolgt, müssen Sie über eine für Mobilgeräte optimierte Website verfügen. Denken Sie zum Beispiel an einen Universitätscampus. Die überwiegende Mehrheit, wenn nicht alle Studenten, haben ein Mobiltelefon und werden die Website des Campus wahrscheinlich die meiste Zeit über dieses Telefon besuchen.
Dies ist ein wichtiger Punkt, den Sie bei der Gestaltung der Website einer Hochschule beachten sollten. Wenn es nicht für Mobilgeräte geeignet ist, führt dies zu einer schlechten Benutzererfahrung.
Weiterführende Literatur
Mobiles Webdesign: Best Practices: Dieser Artikel enthält eine Liste von 20 Mobiltelefonemulatoren. Entwerfen von Web-Apps für das iPad: Tipps und Designüberlegungen beim Entwerfen einer iPad-Site. 10 iPhone-Apps, die jeder Webdesigner kennen sollte: Dies ist eine Sammlung mobiler Apps für Designer. Erste Schritte mit dem iPhone SDK: Möchten Sie mehr über die Erstellung von iPhone-Apps erfahren? Lesen Sie diesen Einführungsleitfaden.
Verweise
Opera: Bericht zum Stand des mobilen Webs. www.opera.com
