iPhone-Version einer TL-Site: Vorgehensweise?

[pingo]

Hallo zusammen,

zunächst möchte ich ein dickes Kompliment an die TL-Entwickler und -Community loswerden: Ich bin von TL als CMS sehr beeindruckt, mir gefällt vor allem der imho sehr gut durchdachte Mix von out-of-the-box vorhandenen Features und großer Freiheit bei der Gestaltung von Websites. Und die Community macht einen sehr freundlichen und kompetenten Eindruck - ich mache gerade meine ersten Gehversuche mit TL und habe aus Forum und Wiki schon viel gelernt - danke

Für ein möglicherweise mit TL umzusetzendes Projekt wird auch eine mobile Version für iPhone, Blackberry & Co gewünscht. Mich würde interessieren, ob hier jemand sowas schon umgesetzt hat. Meine Vorgehensweise wäre wie folgt, da ich aber noch wenig TL-Erfahrung habe, würde mich Euer Feedback dazu interessieren:
- Implementierung der Mobilversion als Subdomain (z.B. iphone.xyz.com)
- Redirect von der Hauptdomain anhand des UA per htaccess (potentiell problematisch, da der Redirect dann automatisch und immer erfolgt, der mobile User also keinen Zugriff auf die normale Seite mehr hätte)
- Eigener Startpunkt auf dem TL-Server für die Subdomain
- innerhalb der Subdomain Ausgabe der Inhalte (vor allem News und Termine) mit eigenen Templates und CSS
- "statische" Inhalte müssten in beiden Versionen gepflegt werden (natürlich nicht sehr elegant)

Macht das so Sinn?

tia
pingo

[Toflar]

Eigener Startpunkt für die iphone Website macht durchaus Sinn, wenn man anderen Inhalt anbieten will.

Ansonsten würde ich nicht mit .htaccess arbeiten. Die Gründe dafür hast du schon genannt

PHP kann erkennen, ob ein iPhone am Werke ist:

if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {} 

Dann könntest du auf eine bestimmte Seite weiterleiten und einen Link anbieten, der auf Wunsch diese Abfrage aushebelt und die Seite in der Originalversion anzeigt.

[ku-ma-122]

- "statische" Inhalte müssten in beiden Versionen gepflegt werden (natürlich nicht sehr elegant)

Wenn die Inhalte identisch sind, dann reicht eine einmalige Eingabe (und Änderung) und das "Inhaltselement" ;-)

[pingo]

Hallo Yanick,

danke für die schnelle Antwort.

PHP kann erkennen, ob ein iPhone am Werke ist.

Ja, eine solche Konstruktion zusammen mit einem Cookie schwebte mir auch vor. Den entsprechenden PHP-Code würde ich dann per {{file::}} einbinden, sehe ich das richtig?

@ku-ma-122: Guter Hinweis, danke - ich habe die TL-spezifischen Aspekte noch nicht so verinnerlicht...

[Toflar]

Evtl. eher als Modul und Erweiterung für TL.

Dann kannst du gleich den ganzen Seitenaufbau ändern

[leo]

Vielleicht sehe ich es sehr pragmatisch, aber wäre nicht ein separates Stylesheet mit dem entsprechenden Medientyp der beste Weg? Bei allen anderen Lösungen würde man ja quasi zwei verschiedene Seiten entwickeln und das ist ja gerade nicht der Sinn. So wie z.B. die Printversion von https://contao.org mittels CSS anders aussieht als die Browserversion, müsste man doch auch eine iPhone-Version erstellen können, oder?

[MacKP]

Hallo leo,
an sich gibt es zwar den CSS-Typ für Handys, aber das IPhone meldet sich soweit ich weiß nicht als Handy. Daher klappt das schon mal nicht so ganz. Die Seiten werden an sich ja erst mal genau so dargestellt wie normale Seiten (ist ja ein vollwertiger Browser drinn in dem Teil).
Ich würde das Design auch nicht zwangsweise für solche Medientypen anders machen.
Was aber ein wichtiger Punkt ist: Bilder.
Bilder möchte man schon in minderer Qualität anbieten für solche Handys, da die Bandbreite ja nicht so groß ist. Daher wäre es an sich schon schön, wenn man über TL so etwas genau so abfangen könnte wie die Sprachversionen.
Das man dann 2 mehr oder minder gleiche Seiten pflegen muss/kann ist eben dann mal mehr mal weniger gut und sinnvoll. Aber anders sehe ich da im Moment auch keine Möglichkeit da kleinere Dateien anzubieten.

Im Moment würde ich das dann eher mit einer subdomain handhaben wie mobil.meineseite.de und dort dann je nach Bedarf den Inhalt rein kopieren und aufbereiten. Schwierig wirds dann eher den Leuten beizubringen, das die mit einem Handy auch auf diese URL gehen.

Viele Grüße

[Toflar]

Ja Leo hat schon recht. Stylesheets eignen sich da auch

Die Sache ist nur, dass man manchmal einfach trotzdem lieber die Originalseite sehen möchte (auch mit den richtigen Bildern...wlan kann das Ding ja auch).

Da muss man wechseln können

[MacKP]

Hab noch mal ein wenig geschaut.
Man kann das schon mit einem speziellen media-type -> http://minimaldesign.net/articles/re...e-specific-css

Aber an sich ist das immer noch nicht die ganze Miete.. wie gesagt ist es an der Stelle sinnvoller die Bilder in anderer Qualität anzubieten wie ich finde (das sind über CSS ja nicht gerade die meisten).

Viele Grüße

Edit:
spannender Ansatz-> http://aktuell.de.selfhtml.org/artik...le-endgeraete/

[Toflar]

Wenn Interesse besteht, können wir evtl. mal über eine geeignete Extension im dev-channel diskutieren...

Ich denke Leo sollte es eh nicht gross betreffen, weil der TL-Core sicher nicht fürs iPhone ausgelegt sein sollte - das wiederum heisst natürlich nicht, dass seine Inputs nicht erwünscht wären!!!

Aber es gibt viele Ansätze und es wäre ohne Frage eine Extension, die aufgrund vieler Änderungen seitens von Apple, aktiv bewirtschaftet werden müsste

So sehe ich das...

[Tiggr]

Hiho!

Ja Leo hat schon recht. Stylesheets eignen sich da auch

Nö, so einfach ist das leider nicht! iPhone (und Palm Pre) ignorieren die handheld-css, und nehmen die normalen. Man kann da wie im o.g. Link tricksen, ist aber eigentlich schade, das die handheld-css nicht ausgewertet werden!

Tschüss
Marcus (aka Tiggr)

[pingo]

Über die Notwendigkeit einer eigenen Mobilversion kann man tatsächlich diskutieren, denn die mobilen Browser auf Webkit-Basis sind inzwischen verdammt gut.

Ich beobachte, dass die iPhone-optimierte Fassung der eigenen Website tatsächlich aktiv von Kunden nachgefragt wird - entweder weil es gerade in ist, oder auch weil das mobile Surfen in den letzten ein, zwei Jahren wirklich alltagstauglich geworden ist.

Wie auch immer: Vielen Dank für Euren Input, ich werde mal an dem Projekt basteln und dabei sicher noch viiiiele TL-Fragen haben

[Toflar]

Wir könnten ein Projekt auf typolight-forge.org starten und dort weiterdiskutieren, wie das aussehen müsste!

Stylesheets: Ich hab mich noch nicht mit der Materie befasst, aber ich denke es müsste durchaus möglich sein iPhone only anzusprechen! Ansonsten eben mit der einfachen php-Abfrage die ich weiter oben gepostet habe...

[pingo]

Stylesheets: Ich hab mich noch nicht mit der Materie befasst, aber ich denke es müsste durchaus möglich sein iPhone only anzusprechen!

Ja, das geht z.B. über ein

media="only screen and (max-device-width: 480px)"

Ansonsten gibt es auch ein entsprechendes JS-Script von den WebKit-Entwicklern, quasi als vierte Methode neben htaccess, CSS und Applicationserver (hier: PHP): http://trac.webkit.org/wiki/DetectingWebKit

Ich werde in den nächsten Tagen mal mit der iPhone-Fassung der fraglichen Seite anfangen... ein Projekt auf tl-forge wäre natürlich cool, allerdings bin ich dazu rein TL-mäßig noch zu grün hinter den Ohren und wäre garantiert auf Hilfe angewiesen

[Kahmoon]

Man kann hier auch das Metatag "viewport" verwenden.

<meta name="viewport" content="width=850" />

[dreiHP]

Hallo,

vielleicht helfen die Tips und Links auf dieser Seite.

VG, Peter

[Philip]

Habe eine Lösung mit Javascript gebastelt, um Browser von iPhone und Android eine handheld.css unterzuschieben ;-)

<script type="text/javascript">
	var agent = navigator.userAgent.toLowerCase();  
	if (agent.indexOf("mobile")>-1) { 
		document.write('<link rel="stylesheet" href="handheld.css" type="text/css" media="screen" />');
	}   
</script>

Funktioniert natürlich nur, wenn im useragent "mobile" auftaucht. Für andere Browser sollte weiterhin das handheld.css mit

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />

eingetragen sein.

Werde trotzdem die oben genannten Ansätze auch mal ausprobieren.

[dl1ely]

Leicht in die Off-Topic-Richtung, aber liebe "Mobile-Webseiten"-Entwickler, bitte denkt daran, dass es außer dem iPhone inzwischen auch noch andere Telefone gibt, die richtig gute Browser an Bord haben.

Danke,
Stefan

[Nils Riel]

Android wurde ja auch schon genannt. Aber was mich ein wenig nervt an der ganzen Sache:

Ich kaufe mir doch ein solches Handy, um das "richtige" Internet zu sehen - mich nervt es jedesmal, wenn ich auf eine mobile Webseitenversion geleitet werde und dann noch nicht einmal die Möglichkeit habe zu wechseln.

[dl1ely]

Tja, schwieriges Thema...Auch die neuesten Smartphones haben immer noch nicht die Displayauflösung, wie wir sie bei Webseiten für "Desktops" häufig voraussetzen. Mal im Ernst, wer entwickelt denn noch ernsthaft Multi-Column-Layouts für 800x600? Selbst auf einem "guten" Handybrowser würde ich mich also schon über Anpassungen freuen,die mich die Seite auch bei weniger Bildschirmplatz _in vollem Umfang_ nutzen lassen,,,

Stefan

[Sebastian]

HI

dafür gibt es dann eine Zoom-Funktion…

@Nils: Könnte man das nicht wie Amazon machen, es gibt einen Link von der mobilen auf die normale Version, somit kann der Nutzer entscheiden, was er will?

Sebastian

[ku-ma-122]

Das könnte man machen, dafür wird aber dann eine etwas umfangreichere Prüfung vorausgesetzt. Mit einem Cookie z.B. könnte man das erreichen. Wer die normale Seite angezeigt haben möchte erhält das Cookie (Bei klicken auf "normale Seite anzeigen"). Und wenn das vorhanden ist, dann wird das "mobile-CSS" ignoriert auch wenn die Browser-/Gerätekennung stimmt.

[RalfW]

Das Thema geht wohl doch Richtung Off-Topic. Klar, die Tendenz das Internet mobil zu nutzen, ist steigend. Schuld ist sicherlich das iPhone.

Aber habt ihr schon mal überlegt, wieviele mobile Endgeräte es gibt, die potenziell das Internet nutzen könnten, wenn es eine vernünftig dargestellte Seite geben würde?

Leider wird das Thema immer nur auf "kleine Bildchen" und kleine Bildschirm-/Viewport-Breiten reduziert. Es steckt aber wesentlich mehr dahinter:
diverse Formfaktoren, keine Maus bei der Navigation, reduzierte Übertragungsgeschwindigkeit, Navigation auch auf Kopfsteinpflaster, minimierte Benutzereingaben, möglichst viele Auswahlen in Form von Dropdown etc. anstatt von Tastatureingaben usw.
Nicht zu vergessen die große Zahl mobiler Browser im Feld.

WURFL und UAProfile liefern hier wichtige Infos, um mobile Devices zu identifizieren und listen deren Möglichkeiten auf.

Wenn schon mobiles TL, dann sollte eine solche Seite alle wesentlichen Inhalte enthalten, aber Vorrang sollte immer die Mobilität haben. Der Inhalt ist entscheidend, nicht das identische Aussehen von mobilem und Desktop-Web.

Das "nur mal so als Gedanke".

Gruß
Ralf

[dl1ely]

Ja, genau richtig....Schön und gut "man kann ja zoomen", aber wie sehr nervt es mich, wenn ich unheimlich weit in eine Seite reinzoomen muss, um einen Mini-Button "klicken" zu können, um dann wieder weit rauszuzoomen, um z.B. ein Foto in Gänze sehen zu können...Von daher schließe ich mich meinem Vorgänger also ganz an :-).

Stefan

[andreas.schempp]

Ich habe jetzt nicht den vollständigen Thread durchgelesen, aber die Erweiterung "redirect" hat ein Modul welches iPhone erkennen und an eine andere URL weiterleiten kann (z.B. mobile.example.com Domain).

[tobo]

Ich spiele auch schon länger mit dem Gedanken einer mobilen Webseite und finde es super, dass hier so etwas diskutiert wird. Mittlerweile wird es immer wichtiger, dass eine solche Seite angeboten wird. Es ist mMn gut, dass es diese mobilen Webseiten gibt, die schnell geladen werden, aber trotzdem alle relevanten Infos liefern. Ich nutze selbst ein iPhone und surfe viel auf z.b. spiegel.de, die eine mobile Version haben.
Nicht überall gibt es UMTS (nur in Großstädten), daher kann eine normale Webseite manchmal echt lange dauern. Auch wenn man unterwegs ist und nur schlechtes Netz hat, bietet sich die mobile Version an.
Meiner Meinung wäre es daher ideal, eine mobile Version anzubieten und via extra-Link auf die reguläre Seite auf Wunsch weiterzuleiten.

Ich habe jetzt nicht den vollständigen Thread durchgelesen, aber die Erweiterung "redirect" hat ein Modul welches iPhone erkennen und an eine andere URL weiterleiten kann (z.B. mobile.example.com Domain).

Könnte man mit diesem Ansatz nicht einen neuen Startpunkt innerhalb TLs einrichten und dem eine Version des CSS, die sich rein auf eine mobile Darstellung konzentriert, zuweisen?
Gerade durch die Module können ja gleiche Inhalte angeboten werden (News, Kalendar, etc) und diese werden anschließend vom Stylesheet angepasst.

Was haltet ihr von diesem Ansatz?

Edit: Das wäre dann so etwa wie bei Spox.com
Normale Version: www.spox.com
Mobile Version: m.spox.com (wird auch so im Firefox dargestellt)

Computerbase hat so einen Umleitungs-Link mit dabei:
http://computerbase.mobi/

[RalfW]

... das Problem auf Seiten der Anwender ist nun wohl recht klar umrissen.

Mit reinem CSS kommt man aber mMn hier nicht wirklich weiter.
Vergesst doch mal für einen Moment das iPhone, bitte.

Mobile Webseiten sollten sich an den Endgeräten orientieren!

Und da haben wir mit Bildschirmbreiten ab 160px bis zu 480px oder 600px einen ganz schön großen Bereich, auf den das CSS Rücksicht nehmen soll.
Und als Protokoll wird nicht nur HTML verstanden, viele Endgeräte verstehen XHTML, und dann nur 'strict', andere lieben (immer noch) WML.

Und einige Browser - sogar von namhaften Herstellern - kümmern sich auf gut deutsch "einen feuchten Dreck" um die CSS-Vereinbarungen.

Ich glaube, dass man bei der Seitenaufbereitung nicht ohne die UAProfiles u. ä. auskommt und mit Hilfe dieser Informationen dann mobil-gerechte Webseiten generieren kann.

Zusätzlich sollte dann auch noch für jeden Artikel etc. festzulegen sein, ob er überhaubt für die mobile Welt relevant ist.
Ich fände es jedenfalls unsinnig, auf einem Link zu landen, hinter dem sich ein x MB großer Download eines Reports, einer Exe-Datei etc. befindet.
Und warum erst so etwas anbieten, wenn die Rechtfertigung dann lautet: "Soll der User doch entscheiden, ob er den Link anklickt".

Die Idee hinter einem "One Web" mittels CRM abzubilden, ist OK. Ich bin aber davon überzeugt, dass es nur mittels CSS nicht wirklich gut funktioniert.

Ein zweiter Einstiegspunkt à la 'm.domain.tld' ist mMn gut, nur muss sich dahinter mehr als nur ein 240px-breites CSS verbergen.

[noxlibris]

Das sieht ziemlich einfach aus, das CSS allein zu so zu verändern das es mit jedem Browser mobil oder nicht adaptiert wird. Ich denke nicht das CSS ist hier das problem, sondern der Aufbau der seite (html) der sich für eine CSS eignet oder nicht.

Ich arbeite gerade an einem Portal der mit eingeschachtelten table geschrieben wurde. Jetzt stellt sich mir die Frage in wie weit ich diese seite adaptieren kann mit CSS ohne sie neu zu schreiben (in div und css).
Ich denke daher daß, für mobile geräte (iphone, bb) sozusagen eine eigene web Pressens, die nur teilweise mit dem großen Bruder zu tun hat. Mobile geräte brauchen mobile und schnelle informationen. Das iphone (Blackb kenne ich nicht) bietet eine oberfläche und möglichkeiten die ein standgerät nicht bietet. Also für entwickler eine sandkiste mehr, und was für eine.

Wie muss ich in typolight vorgehen, um die informationen von einer kompleten homepage mobilfähig zu machen. (in erster linie nur iphone) Also kompletes neues layout mit den seiten und informationen meiner Wahl.

Muss ich die ganze seitenstruktur + artikel kopieren und sie dann so adaptieren? und jeden neuen artikel erneut kopieren?

Wäre toll wenn mir jemand dabei behilflich sein könnte.

Danke an euch alle

[parsec3d]

Hi nolibris,

ich würde den Seiten, die ich für das iPhone optimieren möchte, ein eigenes Seitenlayout verpassen. Um die Inhalte nicht 2 mal pflegen zu müssen, kannst Du mit den TL-Funktionen "Seitenverweis" etc. arbeiten.
Im Seitenlayout bindest Du dein iPhone-CSS ein. Im Header deines Standardlayout steht dann die JavaScript Browserweiche, mit deren Hilfe Du auf den iPhone-Inhalt verweist.

So weit so gut. Ich habe aber noch folgende Frage: Wenn ich per Redirect auf eine Subdomain verweise (http://iphone.meinedomain.de), wie kann ich dann den TL-Content meiner Hauptdomain (da ist die TL-Installation) verweisen, ohne dass sich die URL wieder ändert?

Viele Grüße

(ist übrigens auf dem iPhone geschrieben ;-)