Mobile Templates & Themes Development
Haben Sie schon einmal überprüft, wie Ihre Website für die Nutzer von Smartphones und Tablets aussieht? Wissen Sie, ob das Layout Ihrer Internetseite sich automatisch an die verfügbare Bildschirmauflösung anpasst, also ein Responsive Template (bzw. Theme) verwendet wird? Liefert Ihr Content Management System für die mobile Darstellung auf Smartphones und Tablets ungeeignete Inhalte wie Flash aus und wie werden diese Inhalte (wenn überhaupt) mobil dargestellt?
Oh ja, das Thema… – schicken Sie mir bitte ein Angebot!
Testen der Mobilen Darstellung
Mit einem mobilen Endgerät
Wenn Sie ein Smartphone oder ein Tablet besitzen, ist es das einfachste, Ihre Seite einmal im Browser Ihres Mobilgerätes aufzurufen und zu überprüfen, ob die Darstellung vollständig und anwenderfreundlich ist. Sehen Sie nur eine auf unleserliche, auf Briefmarkenformat verkleinerte Darstellung Ihrer Website, so wie sie auf einem normalen Desktop PC aussieht, dann ist Ihre Seite nicht mobilfähig.
Moderne Browser gängiger Smartphones, die auf Android oder iOs Basis laufen, kommunizieren mit Ihrem Internetserver und teilen z.B. über den User Agent String mit, welches Betriebssystem und welcher Browser verwendet wird. Weiterhin kann den Mobilgeräten über den Viewport Meta Tag im HTML Template mitgeteilt werden, wie der Browser die Seite darzustellen und zu skalieren hat.
Mit dem Browser auf dem Desktop PC
Sollten Sie kein Smartphone verwenden, können Sie mit den aktuellen Browsern auf Ihrem Desktop Computer die Mobildarstellung auf gängigen Geräten simulieren.
Chrome
Der Chrome Browser kann Ihrem Internetserver über das Setzen des User Agent Strings und der Bildschirmabmessungen vormachen, dass es sich um ein Mobilgerät handelt, welches die Seite anfordert. Die nötigen Einstellungen finden sich in den Developer Tools, die Sie beim Betrachten einer Internetseite über die Taste [F12] Ihrer PC Tastatur aufrufen können. Falls Sie damit noch nie gearbeitet haben, finden Sie nun am unteren Rand des Browserfensters eine Tab-Leiste mit den Punkten „Console“, „Search“, „Emulation“, „Rendering“.
Wählen Sie den Menupunkt „Emulation“ und wählen Sie aus dem Select Menu neben Device -> Model ein geeignetes gängiges oder Ihnen geläufiges Mobilgerät aus. Die Einstellungen für die Bildschirmauflösung des entsprechenden Gerätes werden automatisch geladen. GGf. müssen Sie die Seite noch einmal neu laden [F5], dann sollte der Chrome die Seite darstellen, wie es auf dem entsprechenden Mobilgerät zu erwarten wäre.
Sie können zwischen mobiler und Desktop-Darstellung über das kleine Smartphone Symbol hin- und herschalten (Toggle emulation enabled).
FireFox
Für den Mozilla FireFox Browser gibt es ein Plugin, das verschiedene User Agent Strings setzen kann. Dies ist`nicht Standardmäßig vorinstalliert, kann aber über den Menupunkt „Extras“->“Add Ons“ installiert werden. Hier einfach nach dem Add-On „User Agent Switcher“ suchen und dies installieren. Sie müssen den FireFox ggf. neustarten um das Add-On zu installieren bzw. zu aktivieren.
Anschließend kann man den User Agent String, den der Browser (hier FireFox) an den Webserver sendet mit diesem Tool völlig unkompliziert und ohne Fachkenntnisse verändern. Einfach unter „Extras“->“Default User Agent“ ein Mobilgerät auswählen. Standardmäßig ist hier noch „iPhone 3.0“ möglich, was aber zum Testen durchaus ausreicht.
Eine Liste mit weiteren gängigen Mobilgeräten wie Smartphones und Tablets lässt sich hier runterladen. Dieses XML File muss unter Windows in das Verzeichnis
C:\Users\<Benutzername>\AppData\Roaming\Mozilla\Firefox\Profiles\<kryptischer-mozilla-string-für-den-user>\useragentswitcher
kopiert werden. Dies kann auch über das Add-On selbst unter „Extras“->“Default User Agent“->“Edit User Agents…“ und den Link „Download list of user agents to import…“ durchgeführt werden. Die dort runtergeladene Datei kann dann mit dem Button „Import“ eingelesen werden.
Sie können aber auch selbst manuell ein Mobilgerät definieren, sollte es in dieser Liste nicht vorhanden sein: Einfach auf „New“ klicken und „New User Agent“ auswählen. Sie sollten hier jedoch wissen was Sie tun.
Online Smartphone Simulator
Sollten Sie weder ein Smartphone besitzen noch einen aktuellen Browser auf Ihrem PC haben, oder ist Ihnen das alles zu technisch, können Sie auch unser Smartphone Simulator Online Tool benutzen. Einfach die aufzurufende Internetadresse in den Simulator eingeben, Enter drücken und die eingegeben Webseite wird dargestellt, wie auf einem Mobilgerät.
Entwicklung von mobilfähigen Themes und Templates
Sollten Sie über eine der angegebenen Methoden festgestellt haben, daß Ihre Internetseite nicht mobilfähig ist, helfen wir von da Agency Ihnen gerne, dies so schnell wie möglich zu ändern und Ihre Website für die Darstellung auf alle modernen mobilen Endgeräten zu optimieren.
