XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Media Queries vs. Extraseite (http://xhtmlforum.de/showthread.php?t=66124)

Mr.T 06.11.2011 05:13

Media Queries vs. Extraseite
 
Hallo liebe Forengemeinde!

Die nächste Webseite die ich erstellen möchte, soll auch für mobile Geräte (Smartphones und Tablet-PCs) optimiert sein.

Dazu soll sich das Grundlayout an das verwendete Gerät anpassen und die Spaltenanzahl je nach Browserbreite reduziert werden, sodass das Layout auf einem Iphone beispielsweise nur 1-spaltig ist.

Ich habe schon ein wenig recherchiert und weiß nun, dass es dafür im wesentlichen 2 verschiedene Techniken gibt:

1. Media Queries
2. Browserweiche mit PHP oder Javascript und Umleitung auf eine extra Seite

Die Media Queries gehören ja schon zu CSS3 und sind noch sehr neu, aber wohl relativ einfach einzusetzen. Mir gefällt diese Möglichkeit sehr gut, aber leider lässt sich damit nicht verhindern, das nicht verwendete Bilder trotzdem heruntergeladen werden oder? Wobei background-images, die nicht benötigt werden (und nur in der standard-css eingebettet sind), dann doch eigentlich nicht mitgeladen werden dürften oder?

Mit der PHP-Methode könnte man dieses Problem ja durch die extra nur für die Smartphones/Tablets erstellte Seite gut lösen. Jedoch gibt es hier den Nachteil des doppelten Pflegeaufwands.

Und wenn man schon umleitet, würde ich dem Anwender trotzdem gerne die Wahl lassen, ob er nicht doch die Desktop-Variante mit seinem Smartphone/Tablet sehen möchte. Aber wie lässt sich das am besten umsetzen? Ein einfacher Link von der mobilen Seite zurück auf die normale würde ja ein erneutes Auslösen der Browserweiche bewirken.

take_a_7 06.11.2011 10:03

Moin,

Zitat:

Zitat von Mr.T (Beitrag 505228)
Die Media Queries gehören ja schon zu CSS3 und sind noch sehr neu, aber wohl relativ einfach einzusetzen.

Die mobilen Browser (Android, iPhone, etc.) können die aber schon ganz gut und darauf kommts ja an ;)
Zitat:

Zitat von Mr.T (Beitrag 505228)
Mir gefällt diese Möglichkeit sehr gut, aber leider lässt sich damit nicht verhindern, das nicht verwendete Bilder trotzdem heruntergeladen werden oder? Wobei background-images, die nicht benötigt werden (und nur in der standard-css eingebettet sind), dann doch eigentlich nicht mitgeladen werden dürften oder?

Da hast du natürlich recht. Man müsste für die jeweiligen Browser halt testen, inwieweit mit display:none ausgeblendete Sachen trotzdem geladen werden.
Zitat:

Zitat von Mr.T (Beitrag 505228)
Mit der PHP-Methode könnte man dieses Problem ja durch die extra nur für die Smartphones/Tablets erstellte Seite gut lösen. Jedoch gibt es hier den Nachteil des doppelten Pflegeaufwands.

Und wenn man schon umleitet, würde ich dem Anwender trotzdem gerne die Wahl lassen, ob er nicht doch die Desktop-Variante mit seinem Smartphone/Tablet sehen möchte. Aber wie lässt sich das am besten umsetzen? Ein einfacher Link von der mobilen Seite zurück auf die normale würde ja ein erneutes Auslösen der Browserweiche bewirken.

Dann setzt du halt in der Session ein Flag und leitest nur dann um, wenn es nicht gesetzt ist ;)

gruß,
take

OscarWilde1024 06.11.2011 15:58

Zitat:

Zitat von Mr.T (Beitrag 505228)
Ich habe schon ein wenig recherchiert und weiß nun, dass es dafür im wesentlichen 2 verschiedene Techniken gibt:

1. Media Queries
2. Browserweiche mit PHP oder Javascript und Umleitung auf eine extra Seite

Also ich habe mit beidem bereits experimentiert und es kommt auch die Inhalte der Webseite an. Da mobile Endgeräte oft über UMTS mit dem Netz verbunden sind, würde ich hier auch ein Augenmerk auf die Datenmenge legen. Zum einen sind fast alle Flatrates volumenbegrenzt und die Verbindung ist auch nicht immer so schnell.

Somit hängt es stark von der Größe und der Menge der Bilder ab. Hier muss man dann natürlich den Pflegeaufwand berücksichtigen. Ich tendiere aber eher zur Browserweiche.

Frank

Mr.T 07.11.2011 21:24

Danke schonmal für eure Meinungen.

Ich habe jetzt testweise ersteinmal die Media Queries auf dieser Webseite eingesetzt:
Ihre flexible Webseite - Home

Klappt dort auch ganz wunderbar, wie ich im Firefox oder auf meinem Smartphone sehe.

Dort benutze ich auch das CMS Joomla, welches ich beim nächsten Projekt auch gerne wieder einsetzen möchte.

Jetzt frage ich mich aber, wie ich die Technik mit der PHP-Browserweiche umsetzen könnte, wenn ich mit einem CMS arbeite. Denn dann gibt es ja nur eine index.php Datei, die sich die Inhalte je nach Unterlink selber aus der Datenbank besorgt. Wenn ich nun eine extra Subdomain à la mobile.webseite.de erstellen würde, würde ich diese extra Seite die Inhalte ja auch aus der Datenbank holen lassen. Aber wie soll ich dann z.B. verhindern, dass die Bilder mitgeladen werden usw.?

@take

Diese Flag-Technik habe ich leider noch nie benutzt und verstehe von PHP nicht sonderlich viel. Wie kann ich mir deren Funktionsweise vorstellen?

take_a_7 07.11.2011 22:20

Moin,

Zitat:

Zitat von Mr.T (Beitrag 505315)
@take

Diese Flag-Technik habe ich leider noch nie benutzt und verstehe von PHP nicht sonderlich viel. Wie kann ich mir deren Funktionsweise vorstellen?

Was eine Session ist, weißt du aber? Wenn du jetzt von der Mobilseite zurückleitest, verlinkst du nicht auf "index.php" sondern auf "index.php?nomobile=true", o.ä. In der index.php setzt du bei diesem URL-Parameter dann $_SESSION['nomobile'] = true;. Am Anfang von der index.php kannst du dann jedesmal überprüfen, ob $_SESSION['nomobile'] == true ist und dann eben nicht auf die Mobilseite umleiten, hoffe das war verständlich ;)

gruß,
take

Mr.T 07.11.2011 22:58

Ah ja das war verständlich genug um den Mechanismus zu verstehen, für alles weitere wird mir diesbezüglich hoffentlich google helfen können. ;)
Danke!

Jetzt bleibt noch die Frage, wie ich das mit der Browserweiche in Zusammenhang mit einem CMS machen kann.


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:27 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023