So konvertieren Sie eine Website für einen mobilen Browser

Mobile Geräte wie Smartphones und Tablets machen mehr als die Hälfte des gesamten Internetverkehrs aus. Doch laut einer Studie von BrightEdge aus dem Jahr 2014 ist mehr als ein Viertel der Websites, die Besucher besuchen, nicht richtig für diese Geräte konfiguriert – was sie durchschnittlich 68 Prozent Trafficverlust kostet. Das richtige Ändern Ihrer eigenen Website für mobile Browser erfordert Planung und Tests. Die Codierung selbst ist jedoch normalerweise nicht sehr anspruchsvoll, insbesondere wenn Sie bereits mit CSS vertraut sind. Wenn Sie eine Plattform wie WordPress verwenden, müssen Sie überhaupt keinen Code kennen.

Gemeinsame Plattformen

Seit dem Aufkommen des iPhones haben Entwickler von Website-Plattformen wie WordPress, Joomla und Drupal mobiles Design integriert. Drupal zum Beispiel wird in seiner ursprünglichen Installation mit mobilfreundlichen Themen geliefert. Jede dieser Plattformen verfügt über mobile Themen, die so konzipiert sind, dass sie aktiviert werden, sobald Ihre Website erkennt, dass von einem mobilen Browser darauf zugegriffen wird. Andere Themes sind bereits mobilfreundlich und reagieren auf Berührungsgesten genauso wie auf Mausklicks, ohne das Design oder Layout Ihrer Website auf verschiedenen Geräten signifikant zu ändern.

CSS und HTML verwenden

Verwenden Sie für HTML-Websites eine Cascading Stylesheet- oder CSS-Datei, um die mobile Version Ihrer Seiten anzuzeigen, wenn sie von einem mobilen Browser aufgerufen werden. Obwohl es möglich ist, CSS zu codieren, um bestimmte Geräte zu erkennen, besteht ein häufiger Ansatz darin, Layouts basierend auf der Bildschirmgröße in Pixeln anzugeben. Auf Wunsch können Sie einen Stil für große Bildschirme, einen für Tablets und einen für Mobiltelefone verwenden. Die Verwendung von CSS hat den zusätzlichen Vorteil, dass Sie den Code nur einmal schreiben müssen – in der CSS-Datei. Jede Ihrer Seiten benötigt dann nur eine einzige Codezeile, um ihre Stile aus CSS zu zeichnen.

Interaktive Touchscreen-Funktionen

Wenn Sie eine Webseite so konfiguriert haben, dass sie Besuchern mit JavaScript oder HTML5 ein interaktives Erlebnis bietet, ist es wichtig zu wissen, wie Ihre Website auf Berührungsereignisse reagiert, nicht nur in einem mobilen Browser, sondern auch auf einer wachsenden Zahl von Touchscreen-Desktops . In den meisten Fällen sollten Sie erwägen, Ihrem Designcode Berührungsereignisse und Gesten hinzuzufügen. In JQuery beispielsweise ist das Äquivalent zu einem Mausklick auf einem Touchscreen ein Tap-Ereignis, das ausgelöst wird, wenn ein Benutzer den Bildschirm berührt und dann einen Finger vom Bildschirm nimmt. Abhängig von Ihrer Seite möchten Sie möglicherweise auch die Standardeinstellungen des mobilen Browsers deaktivieren, z.

Testen und Verifizieren

Der beste Weg, um Ihre neue mobile Website zu testen, ist die Verwendung Ihres eigenen mobilen Geräts. Untersuchen Sie den Stil und das Seitenlayout, navigieren Sie mit Berührungen und Gesten und sehen Sie sich Ihre Bilder genau an, um sicherzustellen, dass sie gestochen scharf aussehen. Sie können auch den Webbrowser Ihres Computers verwenden, um eine mobile Anzeige zu emulieren. Drücken Sie beispielsweise in Google Chrome "F12", um die Entwicklerkonsole zu öffnen. Klicken Sie auf das Symbol "Einstellungen" und dann auf die Registerkarte "Emulation", um ein Gerät wie ein Google Nexus oder Apple iPad auszuwählen.