Website für das iPhone optimieren
Auch wenn das iPhone "normale" Webseiten ohne Probleme darstellen kann und nur bei Flash Inhalten (mangels eines Flash-Players) den kürzeren zieht, kann eine Website explizit für das iPhone optimiert werden.
Das iPhone verkleinert normalerweise eine 'Standardwebsite' soweit, dass sie auf das iPhone Bildschirm passt. Soweit mir bekannt liegt aber hier eine Begrenzung von 980px - sodass bei breiteren Webseiten links und rechts etwas abgeschnitten wird.
Den Grund für die Optimierung hätten wir also schon. Nun zu der Optimierung. Natürlich möchte ich mich nicht mit fremden Federn schmücken, deshalb an dieser Stelle erstmal ein Link auf kulturbanause.de (man die Domain könnte fast von mir sein :)). Hier erklärt Jonas Hellwig mit welchen Mitteln eine Website zu optimieren ist und welche Spezifikationen das iPhone mitbringt.
Wenn Sie mit dem Artikel fertig sind, können wir an die Umsetzung in TYPOlight gehen. Alles ist natürlich beispielhaft und kann durch eigene Ideen erweitert werden:
- Erstellen Sie zuerst ein Template mit dem "Templates" Modul - zum Beispiel auf Basis von fe_page.tpl
- Benennen Sie das Template um in zum Beispiel: fe_iphone.tpl (fe_ MUSS sein, danach ist es fast egal)
- Löschen Sie den Inhalt der gerade erstellten Vorlage und kopieren dorthin den u.a. Quellcode
<?php echo $this->doctype; ?> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>"> <!-- iPhone Template for TYPOlight Version: 1.0 by kretschi //--> <head> <base href="<?php echo $this->base; ?>"></base> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" /> <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title> <?php echo $this->stylesheets; ?> <!-- Homescreen Icon --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> </head> <body> <div id="container"> <div id="main"> <div class="inside"> <?php echo $this->main; ?> </div> </div> </div> </body> </html>
Nachdem der Quellcode in Ihrem Template gesichert ist, können Sie mit Hilfe von "Seitenlayouts" Modul ein neues Seitenlayout für das iPhone erstellen - hier wählen Sie als "Layoutvorlage" die gerade erstellte fe_ Vorlage.
Mit Hilfe von "Seitenstruktur" Modul können Sie nun eine neue Seite erstellen und dieser direkt das eben erstellte Seitenlayout zuweisen.
Was nun fehlt ist ein Artikel welcher auf Ihrer 'iPhone' Seite erscheint! Legen Sie mit dem Modul "Artikel" einen (in der gerade erstellten Seitenstruktur) an und testen Sie ihn mit einem iPhone. Sollten Sie keinen iPhone zur Hand haben gibt es für Mac User hier Abhilfe. Windows User können sich mit einem installierten Safari Browser und dieser Website helfen.
Einen Kommentar schreiben