WebDesign: iPhone erkennen und umleiten

Wir haben eine super designte Website und jeder mag sie gerne anschauen. Doch nur die Iphone-Nutzer mögen unsere Website nicht. Woran könnte das liegen? Vielleicht weil wir eine Contra-Apple-Site betreiben und das iPhone beschimpfen? Nein. Uns fehlt einfach ein auf das iPhone angepasstes Web-Layout. Das heißt, dass iPhone-Nutzer die Seite so angezeigt bekommen, wie man sie in einem Desktop-Browser angezeigt bekommen würde. Also nicht anzeigbare Flash-Animationen, viel zu breite Bilder und winzig kleine Texte.

Wir brauchen eine iPhone-gerechte Lösung!

Eigentlich ganz einfach: Man schreibt sich einfach ein kleines Template mit HTML, CSS & Co. Hört sich schwerer an, als es in Wirklichkeit ist. Es gibt auch schon einige gute iPhone-Website Templates zum Download. Ein gutes Beispiel für ein iPhone Web-Template habe ich auf iwebkit.net gefunden. Die Dokumentation ist komplett in english, aber sehr gut verständlich. Außerdem findet man unter developer.apple.com eine komplette Safari HTML Referenz, allerdings auch nur in englischer Sprache.

Nun sollte man folgendes bedenken:

• Man möchte eine komplett neue Website erstellen!
  Der Vorteil, dass man gleich von Beginn an sein Layout der Website auf das iPhone zuschneiden kann.

• Man hat bereits eine Website und möchte sie nachträglich auf das iPhone optimieren!
  In dem Fall ist es nicht ganz so einfach. Man ist in diesem Fall am besten beraten, wenn man eine eigene Website für das Iphone erstellt.

Wir gehen nun davon aus, dass wir eine eigene kleine Website für das iPhone gebastelt haben. Doch nun müssen wir es noch irgendwie hinbekommen, dass unser Server auch erkennt, dass da ein iPhone auf die Website zugreifen will und es auch an die richtige URL weiterleitet. Klar man könnte generell auf der eigentlichen Site darauf hinweisen, dass es eine Iphone-Variante der Page gibt und einen Link dahin setzen. Das würde mich als iPhone-Nutzer aber eher stören, denn eigentlich ist man da eher an Automatismen gewöhnt und außerdem bin ich eher der ungeduldige Mensch.
Aus dem Grund vergessen wir diesen Tipp gleich wieder und machen es richtig.

Eine Umleitung per PHP

Es gibt viele Möglichkeiten eine Umleitung von der normalen Website auf eine iPhone-optimierten Website zu realisieren. Jedoch finde ich viele davon nicht optimal und teilweise viel zu umständlich. Aus dem Grund beschreibe ich hier nur die PHP-Variante einer Umleitung. Vorraussetzung ist dann natürlich auch, dass der verwendete Webserver auch PHP versteht. Am besten findet man das heraus, indem man seinen Provider danach fragt, oder einfach mal einen Schnipsel PHP-Code auf seine Website einbaut und ausprobiert, ob dieser funktioniert 🙂

Vorweg ein wenig Theorie

Bei einem HTTP-Request sendet euer Browser immer eine Informationen an den Webserver! Der Webserver weiß somit also welcher Browser die Anfrage sendet, welches Betriebssystem verwendet wird und natürlich noch Daten, wie Sprache, IP-Adresse und vieles weitere. Für unsere Zwecke reicht es erst einmal zu wissen, dass der Browser die Information sendet, was für ein Browser er überhaupt ist. Man nennte diese Bezeichnung den sogenannten HTTP_USER_AGENT. Anhand dieses USER_AGENTS kann man nun eine Art Weiche bauen.

Im Pseudo-Code sieht das dann in etwa so aus:
Wenn HTTP_USER_AGENT = iPhone oder iPod dann rufe Seite:mobileURL auf
Andernfalls rufe Seite:standardURL auf

Der tatsächliche Code für die Umleitung sieht dann wie folgt aus:

01 <?php
02    define ('MOBILE_SITE_URL', 'http://ihreseite.de/iphone');
03    if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== FALSE ||
04    (strpos($_SERVER['HTTP_USER_AGENT'], 'iPod') !== FALSE)
05    {
06         header ("Location: " . MOBILE_SITE_URL);
07    }
08 ?>

[Update 14.08.2014]

Dieses kleine Scriptbeispiel funktioniert immer noch ganz prima. Klar kann man es nun vereinfachen und effizienter gestalten. Hier ist eine Liste mit aktuellen User Agent Strings um neuere Geräte bedienen zu können. Darunter zählen die neuen Blackberries, WindowsPhones 8 Windows8Tablets und Android-Geräte. Zur Liste.

Weitere Lösungswege:

Auch wenn ich hier nur auf die PHP-Lösung verweisen wollte, kann ich euch nicht einfach alternativlos zurücklassen. Aus dem Grund gibts dann hier doch noch ein paar Links zu anderen Methoden.

Die javaScript-Lösung

Der Blog-Autor Dave Aiello vom O’Reilly-Blog bietet unter folgendem Link seine Lösung per javaScript an.

Die .htaccess Variante

Brian Cray schreibt in seinem Blog www.dev-tips.com über eine Serverseitige Variante per .htaccess. Allerdings ist bei dieser Methode Vorsicht geboten, da fehlerhafte Einträge die Funktionalität einer ganzen Website gefährden können. Zum betreffenden Artikel gelangt ihr hier.